ComboBox - Multi-column ComboBox

Grid-like multi-column:

select


Multiple rows and columns:

select
Isolate this demo as a stand-alone application

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.

<%@ 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" %>
<!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" />
    <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 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">
            <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 ID="RadComboBox2" runat="server" Height="190px" Width="460px"
            DropDownCssClass="multipleRowsColumns" DropDownWidth="460px" />

        <telerik:RadButton 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>

Find Assistance

Help Us Improve

Was this example helpful?