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 Auto Width

  • select
  • select

The demo shows how the drop down width of the RadComboBox is automatically calculated. In order to use drop down auto width functionality you need to set DropDownAutoWidth property to Enabled (default value Disabled). Please filter the RadComboBox control and observe the drop down. In FireFox, Chrome, Safari and IE10 the DropDown is sized by CSS. In IE9(-) and Opera we are using javascript.

C# VB
Show code in new window Demo isolation steps
<%@ Page AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="ComboBox.Examples.Functionality.DropDownAutoWidth.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>
    <title>ASP.NET ComboBox Demo - DropDown Auto Width</title>
    <style type="text/css">
        .qsf-demo-canvas .qsf-fb label
        {
            width: 170px;
        }

        .qsf-demo-canvas .qsf-fb .status-text
        {
            margin-left: 160px;
        }
    </style>
</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">
        <div class="qsf-fb">
            <ul>
                <li>
                    <telerik:RadComboBox ID="RadComboBox1" runat="server" DropDownAutoWidth="Enabled" Height="150"
                        EmptyMessage="Select a Company" DataSourceID="SqlDataSource1" DataTextField="CompanyName"
                        DataValueField="CompanyName" EnableAutomaticLoadOnDemand="True" ItemsPerRequest="10"
                        ShowMoreResultsBox="true" EnableVirtualScrolling="true" Label="Load On Demand">
                    </telerik:RadComboBox>
                </li>
                <li>
                    <telerik:RadComboBox runat="server" ID="RadComboBox2" DropDownAutoWidth="Enabled" Filter="Contains" Label="Filter Contains">
                        <Items>
                            <telerik:RadComboBoxItem Text="Alfreds Futterkiste" />
                            <telerik:RadComboBoxItem Text="Ana Trujillo Emparedados y helados" />
                            <telerik:RadComboBoxItem Text="Bon app'" />
                            <telerik:RadComboBoxItem Text="Drachenblut Delikatessen" />
                            <telerik:RadComboBoxItem Text="Folk och f� HB" />
                            <telerik:RadComboBoxItem Text="Island Trading" />
                            <telerik:RadComboBoxItem Text="Ottilies K�seladen" />
                            <telerik:RadComboBoxItem Text="Que Del�cia" />
                        </Items>
                    </telerik:RadComboBox>
                </li>
            </ul>
        </div>
    </div>
    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CompanyName] from [Customers] ORDER By [CompanyName]"></asp:SqlDataSource>
    </form>
</body>
</html>