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