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

Templates

Open the MultiColumnComboBox to see the customized appearance.

Customers

RadMultiColumnComboBox provides templates so you can fully control the appearance of the dropdown:

  • Column Template
  • Column Header Template
  • Header Template
  • Footer Template
  • No Data Template
  • Group Template
  • Fixed Group Template

The template and the header-template can be defined for each of the columns available in the widget. The rest of the templates are defined for the entire popup of the widget. The templates in the MultiColumnComboBox are rendered by using Kendo UI templates.

By default the DataItem for an item contains the DataTextField, DataValueField and the DataFields declared in the Columns. If more fields from the server-side DataItems are needed, the properties can be added to the DataKeyNames collection, separated by a comma.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ 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 href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <qsf:MessageBox ID="InformationBox1" runat="server" Type="Info" Icon="Info">
        Open the MultiColumnComboBox to see the customized appearance.
    </qsf:MessageBox>
    <div class="demo-container size-thin">
        <h3>Customers</h3>
        <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" Width="100%" Height="400px" CssClass="testMultiClass"
            DataTextField="ContactName" DataValueField="CustomerID" DataSourceID="SqlDataSource1" DataKeyNames="CompanyName"
            Filter="StartsWith" FilterFields="CustomerID, ContactName">
            <ColumnsCollection>
                <telerik:MultiColumnComboBoxColumn Width="80" Field="ContactName" Title="ContactName">
                    <Template>
                        <span class="photo" style="background-image: url('https://demos.telerik.com/kendo-ui/content/web/Customers/#:data.CustomerID#.jpg')"></span>
                    </Template>
                    <HeaderTemplate>
                        <span class="dropdown-header">Photo</span>
                    </HeaderTemplate>
                </telerik:MultiColumnComboBoxColumn>

                <telerik:MultiColumnComboBoxColumn Field="CustomerID" Title="CustomerID">
                    <Template>
                        <h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p>
                    </Template>
                    <HeaderTemplate>
                        <span class="dropdown-header">Contact info</span>
                    </HeaderTemplate>
                </telerik:MultiColumnComboBoxColumn>
            </ColumnsCollection>
            <FooterTemplate>
                Total #: instance.dataSource.total() # items found
            </FooterTemplate>
            <NoDataTemplate>No Data</NoDataTemplate>
            <PopupSettings />
        </telerik:RadMultiColumnComboBox>
    </div>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>

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

Support & Learning Resources

Find Assistance