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

DropDown Configurator

  • Demo Configurator
  • Enable Screen Boundary Detection
  • ExpandDirection
  • Enable Drop Down Auto width
  • Spin UpSpin Down

This demo shows the most commonly used properties of RadComboBox related to its drop down element like expand direction, boundary detection, offset ot autowidth.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" ResponseEncoding="UTF-8"Inherits="ComboBox.Examples.Functionality.DropDownConfigurator.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" AllowCustomText="true" runat="server" Width="300px"
            DataSourceID="SqlDataSource1" DataTextField="CompanyName" EmptyMessage="Search for people..."
            EnableAutomaticLoadOnDemand="True" ItemsPerRequest="10" 
            ShowMoreResultsBox="true" EnableVirtualScrolling="true" EnableViewState="false">
        </telerik:RadComboBox>
    </div>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT [CompanyName] FROM [Customers] Order By ContactName" />


    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadComboBox1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="RadNumericTextBoxOffsetX" runat="server" Value="0" Size="Narrow"
                                Label="Offset X:" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" PositivePattern="n"></NumberFormat>
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="RadNumericTextBoxOffsetY" runat="server" Value="0" Size="Narrow"
                                Label="Offset Y:" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" PositivePattern="n"></NumberFormat>
                            </qsf:NumericTextBox>
                        </li>


                        <li>
                            <span class="label">Height</span>
                            <qsf:RadioButtonList ID="RadioButtonListHeightPropertyType" runat="server" AutoPostBack="true">
                                <asp:ListItem Text="Auto"></asp:ListItem>
                                <asp:ListItem Text="Fixed" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="Maximum"></asp:ListItem>
                            </qsf:RadioButtonList>
                            <br />
                            <qsf:NumericTextBox ID="RadNumericTextBoxHeight" runat="server" Value="200" Size="Narrow"
                                AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" PositivePattern="n"></NumberFormat>
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <span class="label">Enable Screen Boundary Detection</span>
                            <qsf:RadioButtonList ID="CheckBoxEnableScreenBoundaryDetection" runat="server" Orientation="Horizontal"
                                AutoPostBack="true">
                                <asp:ListItem Text="True" Value="1" Selected="True" />
                                <asp:ListItem Text="False" Value="2" />
                            </qsf:RadioButtonList>
                        </li>
                        <li>
                            <span class="label">ExpandDirection</span>
                            <qsf:RadioButtonList ID="RadioButtonListExpandDirection" runat="server" AutoPostBack="true"
                                Orientation="Horizontal">
                                <asp:ListItem Text="Up" Value="1"></asp:ListItem>
                                <asp:ListItem Text="Down" Value="2" Selected="True"></asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                        <li>
                            <span class="label">Enable Drop Down Auto width</span>
                            <qsf:RadioButtonList ID="DropDownAutoWidth" runat="server" Orientation="Horizontal"
                                AutoPostBack="true">
                                <asp:ListItem Text="True" Value="1" Selected="True" />
                                <asp:ListItem Text="False" Value="2" />
                            </qsf:RadioButtonList>
                        </li>
                        <li>
                            <qsf:NumericTextBox ID="RadNumericTextBoxDropDownWidth" runat="server" Value="160" Size="Narrow"
                                Label="Width:" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" PositivePattern="n"></NumberFormat>
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance