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

WebForms MultiColumnComboBox Overview

About RadMultiColumnComboBox for ASP.NET AJAX

RadMultiColumnComboBox is a server-side WebForms wrapper over the MultiColumnComboBox for Kendo UI for jQuery. It operates on the client and provides functionality similar to a regular dropdown, but with highly simplified approach for creating columns in the dropdown.

RadMultiColumnComboBox and 120+ other controls are part of Telerik UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Renders and operates on the client-side
  • Built-in accessibility, WAI-ARIA and RTL support
  • Ability to cascade from another MultiColumnComboBox
  • Templates for all components in the dropdown
  • Built-in grouping of the data
  • Virtualization
  • Client or server filtering
  • Integration with both client-side and server-side data sources
  • Rich client-side API and events
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page CodeFile="DefaultVB.aspx.vb" Language="vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.MultiColumnComboBox.Overview.DefaultVB"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
        <div class="demo-container size-thin" runat="server">

            <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" DataSourceID="SqlDataSource1"
                DropDownWidth="600px" Height="400px" Width="100%"
                Filter="contains" FilterFields="ContactName, ContactTitle, CompanyName"
                DataTextField="ContactName" DataValueField="CustomerID"
                Placeholder="select from the dropdown or type">
                <ColumnsCollection>
                    <telerik:MultiColumnComboBoxColumn Field="ContactName" Title="Name" Width="200px">
                        <Template>
                       <div class='customer-photo'
                            style='background-image: url(../../img/northwind/Customers/thumbs/#:data.CustomerID#.jpg);'></div>
                            <span class='customer-name'>#: ContactName #</span>
                        </Template>
                    </telerik:MultiColumnComboBoxColumn>
                    <telerik:MultiColumnComboBoxColumn Field="ContactTitle" Title="Title" Width="200px" />
                    <telerik:MultiColumnComboBoxColumn Field="CompanyName" Title="Company" Width="200px" />
                </ColumnsCollection>
                <ClientEvents OnSelect="OnSelectHandler" />
            </telerik:RadMultiColumnComboBox>

            <div class="buttonWrapper">
                <telerik:RadPushButton runat="server" ID="RadPushButton1" Text="Get Selection in the Server" OnClick="RadPushButton1_Click"></telerik:RadPushButton>
            </div>

            <asp:Panel ClientIDMode="Static" ID="result" runat="server" />

            <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient"
                SelectCommand="SELECT Top 20 [CustomerID], [ContactName], [ContactTitle], [CompanyName] FROM [Customers]"></asp:SqlDataSource>

        </div>
    </telerik:RadAjaxPanel>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance