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

    Multi-column ComboBox

    You can create multiple columns in a dropdown with RadMultiColumnComboBox without additional CSS or custom templates.

    Grid-like multi-column:



    Multiple rows and columns:

    Taking advantage of the RadComboBox's ItemTemplate, RadComboBox can represent its items in a multiple-column-like visualization.

    The second RadComboBo visualizes several items in a row. This is achieved by defining the following CSS rules for the DropDownCssClass. 

            .multipleRowsColumns .rcbItem,
        .multipleRowsColumns .rcbHovered
        {
            float:left;
            margin:0 1px;
            min-height:13px;
            overflow:hidden;
            padding:2px 19px 2px 6px;
            width:125px;
        }

    RadComboBox also has a Header and FooterTemplate which you can use to improve the usability as well as the appearance of its the drop-down container.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • styles.css
    <%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ComboBox.Examples.Functionality.MultiColumnCombo.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" />
     
        <qsf:MessageBox runat="server" ID="MessageBox1" Icon="Info">
            You can create multiple columns in a dropdown with
            <a href="../../../../MultiColumnComboBox/">RadMultiColumnComboBox</a>
            without additional CSS or custom templates.
        </qsf:MessageBox>
     
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Button1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Label1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
     
        <div class="demo-container size-narrow">
            <h2>Grid-like multi-column:</h2>
            <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="RadComboBox1" Height="190px" Width="460px" 
                MarkFirstMatch="true" DataSourceID="SessionDataSource1" EnableLoadOnDemand="true"
                HighlightTemplatedItems="true" OnClientItemsRequested="UpdateItemCountField"
                OnDataBound="RadComboBox1_DataBound" OnItemDataBound="RadComboBox1_ItemDataBound"
                OnItemsRequested="RadComboBox1_ItemsRequested" DropDownCssClass="exampleRadComboBox">
                <HeaderTemplate>
                    <ul>
                        <li class="col1">Contact Name</li>
                        <li class="col2">City</li>
                        <li class="col3">Title</li>
                    </ul>
                </HeaderTemplate>
                <ItemTemplate>
                    <ul>
                        <li class="col1">
                            <%# DataBinder.Eval(Container.DataItem, "ContactName") %></li>
                        <li class="col2">
                            <%# DataBinder.Eval(Container.DataItem, "City") %></li>
                        <li class="col3">
                            <%# DataBinder.Eval(Container.DataItem, "ContactTitle") %></li>
                    </ul>
                </ItemTemplate>
                <FooterTemplate>
                    A total of
                    <asp:Literal runat="server" ID="RadComboItemsCount" />
                    items
                </FooterTemplate>
            </telerik:RadComboBox>
            <br />
            <br />
            <h2>Multiple rows and columns:</h2>
            <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox2" runat="server" Height="190px" Width="460px" 
                DropDownCssClass="multipleRowsColumns" DropDownWidth="460px" />
     
            <telerik:RadButton RenderMode="Lightweight" runat="server" ID="Button1" Text="Select" OnClick="Button1_Click" ></telerik:RadButton>
            <asp:Label runat="server" ID="Label1" />
        </div>
     
        <asp:SqlDataSource ID="SessionDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>
     
        <telerik:RadScriptBlock runat="server">
            <script type="text/javascript">
                function UpdateItemCountField(sender, args) {
                    //Set the footer text.
                    sender.get_dropDownElement().lastChild.innerHTML = "A total of " + sender.get_items().get_count() + " items";
                }
            </script>
        </telerik:RadScriptBlock>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance