ComboBox

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

ComboBox - DropDown Configurator

Example Configuration

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

C# VB
Show code in new window Demo isolation steps
<%@ Page AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="ComboBox.Examples.Functionality.DropDownConfigurator.DefaultVB"Language="vb"  %>

<%@ 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>ASP.NET ComboBox Demo - DropDown Configurator</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="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

     <div class="qsf-demo-canvas">
          <telerik:RadComboBox ID="RadComboBox1" AllowCustomText="true" runat="server"
              DataSourceID="SqlDataSource1" DataTextField="CompanyName" EmptyMessage="Search for people..." 
            EnableAutomaticLoadOnDemand="True" ItemsPerRequest="10"
            ShowMoreResultsBox="true" EnableVirtualScrolling="true" EnableViewState="false">
          </telerik:RadComboBox>
     </div>

     <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Expanded="True" Orientation="Vertical">
           <ul class="conf">
            <li class="confLI offsetX">
                        <telerik:RadNumericTextBox ID="RadNumericTextBoxOffsetX" runat="server" Value="0"
                            ShowSpinButtons="true" Label="Offset X:" AutoPostBack="true" EnableSingleInputRendering="false">
                            <NumberFormat DecimalDigits="0" PositivePattern="n"></NumberFormat>
                        </telerik:RadNumericTextBox>
                    </li>
            <li class="confLI offsetY">
                        <telerik:RadNumericTextBox ID="RadNumericTextBoxOffsetY" runat="server" Value="0"
                            ShowSpinButtons="true" Label="Offset Y:" AutoPostBack="true" EnableSingleInputRendering="false">
                            <NumberFormat DecimalDigits="0" PositivePattern="n"></NumberFormat>
                        </telerik:RadNumericTextBox>
                    </li>
            <li class="confLI dropDownWidth">
                        <telerik:RadNumericTextBox ID="RadNumericTextBoxDropDownWidth" runat="server" Value="160"
                            ShowSpinButtons="true" Label="Width:" AutoPostBack="true" EnableSingleInputRendering="false">
                            <NumberFormat DecimalDigits="0" PositivePattern="npx"></NumberFormat>
                        </telerik:RadNumericTextBox>
                    </li>
            <li class="confLI height">
                        <asp:Label ID="LabelRadioButtonListHeightPropertyType" runat="server" Text="Height:"
                            CssClass="sizedLabel" AssociatedControlID="RadioButtonListHeightPropertyType"></asp:Label>
                        <asp:RadioButtonList ID="RadioButtonListHeightPropertyType" runat="server" AutoPostBack="true"
                    RepeatLayout="Flow" RepeatDirection="Vertical" CssClass="heightList">
                            <asp:ListItem Text="Auto"></asp:ListItem>
                            <asp:ListItem Text="Fixed" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="Maximum"></asp:ListItem>
                        </asp:RadioButtonList>
                        <telerik:RadNumericTextBox ID="RadNumericTextBoxHeight" runat="server" Value="200"
                            AutoPostBack="true" ShowSpinButtons="true" Width="65px" EnableSingleInputRendering="false">
                            <NumberFormat DecimalDigits="0" PositivePattern="npx"></NumberFormat>
                        </telerik:RadNumericTextBox>
                    </li>
                </ul>
                <ul class="conf">
                    <li class="screenBoundaryDetection">
                        <asp:CheckBox runat="server" ID="CheckBoxEnableScreenBoundaryDetection" AutoPostBack="true"
                            Checked="true" Text="Enable screen boundary detection" CssClass="checkBox"></asp:CheckBox>
                    </li>
                    <li class="expandDirection">
                        <asp:Label ID="LabelExpandDirection" runat="server" Text="Expand direction:" AssociatedControlID="RadioButtonListExpandDirection"
                            CssClass="sizedLabel" Width="107px"></asp:Label>
                        <asp:RadioButtonList ID="RadioButtonListExpandDirection" runat="server" AutoPostBack="true"
                            RepeatLayout="Flow" RepeatDirection="Horizontal">
                            <asp:ListItem Text="Up" Value="1"></asp:ListItem>
                            <asp:ListItem Text="Down" Value="2" Selected="True"></asp:ListItem>
                        </asp:RadioButtonList>
                    </li>
                     <li class="screenBoundaryDetection">
                        <asp:CheckBox runat="server" ID="DropDownAutoWidth" AutoPostBack="true"
                            Checked="true" Text="Enable Drop Down Auto width" CssClass="checkBox"></asp:CheckBox>
                    </li>
                </ul>
     </qsf:ConfiguratorPanel>

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

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