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 - Multi-column ComboBox

select
select

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.

C# VB
Show code in new window Demo isolation steps
<%@ 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="sds" Namespace="Telerik.Web.SessionDS" %>
<!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>ASP.NET ComboBox Demo - Multi-column ComboBox</title>
     <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<asp:content id="Content2" contentplaceholderid="ContentPlaceHolder1" runat="Server">
     <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
          <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="Button1">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="Label1" />
                    </UpdatedControls>
               </telerik:AjaxSetting>
          </AjaxSettings>
     </telerik:RadAjaxManager>
     <div class="qsf-demo-canvas">
          <telerik:RadComboBox runat="server" ID="RadComboBox1" Height="190px" Width="420px"
               MarkFirstMatch="true" DataSourceID="SessionDataSource1" EnableLoadOnDemand="true"
               HighlightTemplatedItems="true" OnClientItemsRequested="UpdateItemCountField"
               OnDataBound="RadComboBox1_DataBound" OnItemDataBound="RadComboBox1_ItemDataBound"
               OnItemsRequested="RadComboBox1_ItemsRequested" Label="Grid-like multi-column:">
               <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>
          <asp:button runat="server" id="Button1" text="Select" onclick="Button1_Click" />
          <telerik:RadComboBox ID="RadComboBox2" runat="server" Height="190px" Width="450px"
               DropDownCssClass="multipleRowsColumns" DropDownWidth="460px" Label="Multiple rows and columns:" />
          <asp:label runat="server" id="Label1" />
     </div>
     <sds:SessionDataSource ID="SessionDataSource1" runat="server" PrimaryKeyFields="CustomerID"
          DisplayWarning="False" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
          ClearSessionOnInitialLoad="True" SelectCommand="SELECT * FROM [Customers]" SessionKey="System.Web.UI.Page_DataSource1">
     </sds:SessionDataSource>
     <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>
</asp:content>
Telerik UI for ASP.NET AJAX Q3'14 Release is here