Silk skin

MultiSelect - Customizing Templates

Search for Customers

Click the MultiSelect to see the customized appearance.

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadMultiSelect provides templates so you can fully control the appearance of the dropdown and selection:

  • Tag Template
  • Item Template
  • Header Template
  • Footer Template
  • No Data Template
  • Group Template
  • Fixed Group Template

The templates in the MultiSelect are rendered by using Kendo UI templates.

If fields apart from the DataTextField and the DataValue field is needed in the template, they 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" %>

<!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 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" />
    <div class="demo-container size-narrow" runat="server">
        <h4>Search for Customers</h4>
        <p class="demo-hint">
            Click the MultiSelect to see the customized appearance.
        </p>
        <telerik:RadMultiSelect runat="server" Width="400px" ID="RadMultiSelect1"
            DataTextField="ContactName"
            DataValueField="CustomerID"
            DropDownHeight="400"
            CssClass="customers-wrapper"
            Placeholder="Select customers...">
            <HeaderTemplate>
                <div class="dropdown-header k-widget k-header"> 
                    <span>Photo</span> 
                    <span>Contact info</span>
                </div>
            </HeaderTemplate>
            <FooterTemplate>
               Total #: instance.dataSource.total() # items found
            </FooterTemplate>
            <TagTemplate>
                <span class="selected-value" style="background-image: url('https://demos.telerik.com/kendo-ui/content/web/Customers/#:data.CustomerID#.jpg')"></span><span>#:data.ContactName#</span>
            </TagTemplate>
            <ItemTemplate>
                <span class="k-state-default" style="background-image: url('https://demos.telerik.com/kendo-ui/content/web/Customers/#:data.CustomerID#.jpg')"></span>
                                  <span class="k-state-default">
                                      <h3>#: data.ContactName #</h3>
                                      <p>#: data.CompanyName #</p>
                                  </span>
            </ItemTemplate>
            <WebServiceClientDataSource>
                <WebServiceSettings ServiceType="OData">
                    <Select DataType="JSONP" Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" />
                </WebServiceSettings>
            </WebServiceClientDataSource>
        </telerik:RadMultiSelect>
    </div>

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

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?