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

    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