ComboBox - Property Explorer

Demo Configurator

  • Autocomplete separator:None
  • Filter:None
  • Mode:Disabled
  • Spin UpSpin Down
  • Spin UpSpin Down
  • Spin UpSpin Down
  • Checked Items Text:Fit in input
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This demo shows the most commonly used properties of RadComboBox and their effects on the control. Detailed tool tips show additional information about each property including its default value (if any), description and relations to other properties.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ComboBox.Examples.Configurator.DefaultCS" %>

<!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-narrow">
        <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" EnableVirtualScrolling="true" Height="400px" 
            DataSourceID="SqlDataSource1" DataTextField="CompanyName" DataValueField="CustomerID">
        </telerik:RadComboBox>
    </div>

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



    <telerik:RadAjaxManager 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 Title="General">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:TextBox ID="LabelTextBox" runat="server" Label="Label:" AutoPostBack="true">
                            </qsf:TextBox>
                        </li>
                        <li>
                            <qsf:NumericTextBox ID="WidthNumericTextBox" runat="server"
                                Value="350" Label="Width:" AutoPostBack="true">
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:TextBox ID="ToolTipTextBox" runat="server" Label="Tool tip:" AutoPostBack="true">
                            </qsf:TextBox>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBoxChangeTextOnKeyBoardNavigation" runat="server" Text="Change Text On Keyboard Navigation"
                                    Checked="true" AutoPostBack="true" /></span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="Selection">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="AllowCustomTextCheckBox" runat="server" Text="Allow custom text" Checked="true"
                                    AutoPostBack="true" /></span>
                        </li>
                        <li>
                            <qsf:DropDownList ID="RadDDLAutocompleteSeparator" runat="server" AutoPostBack="true" Label="Autocomplete separator:">
                                <Items>
                                    <telerik:DropDownListItem Text="None" Value="" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text=";," Value=";,"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text=";" Value=";"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="," Value=","></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="|" Value="|"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:TextBox ID="EmptyMessageTextBox" runat="server" Label="Empty message:"
                                AutoPostBack="true">
                            </qsf:TextBox>
                        </li>
                        <li>
                            <qsf:DropDownList ID="FilterDropDownList" runat="server" AutoPostBack="true"
                                Label="Filter:">
                                <Items>
                                    <telerik:DropDownListItem Text="None" Value="0" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="Contains" Value="1"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="StartsWith" Value="2"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="MarkFirstMatchCheckBox" runat="server" Text="Mark first match" Checked="true"
                                    AutoPostBack="true" /></span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="SelectTextCheckBox" runat="server" Text="Select text on focus-click" Checked="true"
                                    AutoPostBack="true" /></span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="Load On Demand">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList ID="LoadOnDemandModeDDL" runat="server" AutoPostBack="true" Label="Mode:">
                                <Items>
                                    <telerik:DropDownListItem Text="Disabled" Value="0" />
                                    <telerik:DropDownListItem Text="Custom" Value="1" />
                                    <telerik:DropDownListItem Text="Automatic" Value="2" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:NumericTextBox ID="MinFilterLengthNumbericTextBox" runat="server" Value="0"
                                MinValue="0" Label="Minimum filter length:" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" PositivePattern="n"></NumberFormat>
                            </qsf:NumericTextBox>
                        </li>
                        <li>

                            <span class="checkbox">
                                <asp:CheckBox ID="VirtualScrolling" runat="server" Text="Enable Virtual Scrolling" Checked="true"
                                    AutoPostBack="true" /></span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="ShowMoreResultBox" runat="server" Text="Enable 'Show More Results' box" Checked="true"
                                    AutoPostBack="true" /></span>

                        </li>
                        <li>
                            <qsf:NumericTextBox ID="ItemsPerReuqestNumbericTextBox" runat="server" Value="-1"
                                MinValue="-1" Label="Items per request:" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" PositivePattern="n" NegativePattern="-n"></NumberFormat>
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <qsf:NumericTextBox ID="IemsRequestTimeOut" runat="server"
                                Value="0" MinValue="0" Label="Item request timeout:" AutoPostBack="true">
                                <NumberFormat DecimalDigits="0" PositivePattern="n"></NumberFormat>
                            </qsf:NumericTextBox>
                        </li>

                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="ItemCaching" runat="server" Text="Enable item caching" Checked="true"
                                    AutoPostBack="true" /></span>
                        </li>
                        <li>
                            <qsf:TextBox ID="LoadingMessageTextBox" runat="server" Label="Loading message:"
                                AutoPostBack="true">
                            </qsf:TextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="CheckBoxes">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBoxSupport" runat="server" Text="Enable Checkbox support"
                                    AutoPostBack="true" /></span>
                        </li>

                        <li>
                            <qsf:DropDownList ID="CheckedItemsTexts" runat="server" AutoPostBack="true"
                                Label="Checked Items Text:">
                                <Items>
                                    <telerik:DropDownListItem Text="Fit in input" Value="0"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Text="Display all in input" Value="1"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>

                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="EnableAllItemsCheckBox" runat="server" Text="Enabled Check all items checkbox" Checked="true"
                                    AutoPostBack="true" /></span>
                        </li>

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

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

Find Assistance

Help Us Improve

Was this example helpful?