New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Overlay and Animation

RadComboBox overlays flash files, too.

  • Demo Configurator
Expand Animation
  • Spin UpSpin Down
Collapse Animation
  • Spin UpSpin Down

RadComboBox fully supports overlay. Its drop-down can hover over windowed objects (ASP.NET dropdownlists and/or flash movies). In addition, RadComboBox is not rendered as a windowed object, so DHTML content can hover the RadComboBox when needed. This functionality is enabled by default. No property should be set to enable the feature.

Please use the configuration panel to explore the different types of animations. To observe the overlay result over the DropDownList and the flash object, please open the RadComboBox.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
  • combobox.xml
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ComboBox.Examples.Functionality.Overlay.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin">
        <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" Height="250" Width="300px"  />
    </div>
    <div class="plugin-flash">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="748" height="270">
            <param name="movie" value="images/ASP_AJAX_banner_lineCS3.swf" />
            <param name="wmode" value="transparent" />
            <object type="application/x-shockwave-flash" data="images/ASP_AJAX_banner_lineCS3.swf"
                width="748" height="270">
                <param name="wmode" value="transparent" />
                <p>
                    RadComboBox overlays flash files, too.
                </p>
            </object>
        </object>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow" Title="Expand Animation">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="ddlExpandType" runat="server" Width="120" Height="300"
                                Label="Type" />
                        </li>
                        <li>
                            <qsf:NumericTextBox ID="editExpandDuration" runat="server" Width="150" IncrementSettings-Step="100"
                                MinValue="0" MaxValue="3000" NumberFormat-DecimalDigits="0" ShowSpinButtons="true"
                                Label="Duration" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow" Title="Collapse Animation">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="ddlCollapseType" runat="server" Width="120" Height="300"
                                Label="Type" />
                        </li>
                        <li>
                            <qsf:NumericTextBox ID="editCollapseDuration" runat="server" Width="150" IncrementSettings-Step="100"
                                MinValue="0" MaxValue="3000" NumberFormat-DecimalDigits="0" ShowSpinButtons="true"
                                Label="Duration" />
                        </li>
                        <li>
                            <qsf:Button runat="server" ID="ApplySettingsButton" Text="Update Animation" AutoPostBack="false" OnClientClicked="applySettings" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>


    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function applySettings() {
                var combo = $find("<%= RadComboBox1.ClientID %>");

                //set the expand animation
                var expandAnimationTypeDropDown = $find("<%= ddlExpandType.ClientID %>");
                var expandAnimationType = Telerik.Web.UI.AnimationType.parse(expandAnimationTypeDropDown.get_text());
                combo.get_expandAnimation().set_type(expandAnimationType);

                //set the expand duration
                var expandDurationTextBox = $find("<%= editExpandDuration.ClientID %>");
                var expandDuration = parseInt(expandDurationTextBox.get_value());
                combo.get_expandAnimation().set_duration(expandDuration);

                // set the collapse animation                
                var collapseAnimationTypeDropDown = $find("<%= ddlCollapseType.ClientID %>");
                var collapseAnimationType = Telerik.Web.UI.AnimationType.parse(collapseAnimationTypeDropDown.get_text());
                combo.get_collapseAnimation().set_type(collapseAnimationType);

                //set collapse duration
                var collapseDurationTextBox = $find("<%= editCollapseDuration.ClientID %>");
                var collapseDuration = parseInt(collapseDurationTextBox.get_value());
                combo.get_collapseAnimation().set_duration(collapseDuration);

                //show the dropdown
                combo.showDropDown();

                return false;
            }
        </script>
    </telerik:RadScriptBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance