ComboBox - Overlay and Animation

RadComboBox overlays flash files, too.

Demo Configurator

Expand Animation
Collapse Animation
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?