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

Customizing Templates

Search for Customers

Click the MultiSelect to see the customized appearance.

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>
<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