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

Tag Mode

'Single' tag mode


'Multiple' tag mode

RadMultiSelect provides options for displaying the items as individual (multiple) tags and as a single, summary tag. The available modes are:

  • Single - renders only one tag that shows the number of the selected values;
  • Multiple - renders a tag for every selected value. This is the default tag mode.

Every TagMode has a specific TagTemplate value. You can control the content of the rendered tags by setting a custom a TagTemplate value.

  • DefaultCS.aspx
<%@ 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>
    <style>
        .demo-container * + h4 {
            margin-top: 2em !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            RadMultiSelect1.Value = new[] { "Anne King", "Andrew Fuller" };
        }
    </script>
    <div class="demo-container size-narrow" runat="server">
        <h4>'Single' tag mode</h4>
        <telerik:RadMultiSelect runat="server"
            DataValueField="text"
            Placeholder="Select attendees..."
            AutoClose="false"
            TagMode="Single"
            DataTextField="text"
            Width="400px"
            ID="RadMultiSelect1">
            <Items>
                <telerik:MultiSelectItem Text="Steven White"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy King"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Michael Leverling"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Callahan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Michael Suyama"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Anne King"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Laura Peacock"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Fuller"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Janet White"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy Leverling"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Margaret Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Fuller"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Anne Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Suyama"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nige Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Laura Fuller"></telerik:MultiSelectItem>
            </Items>
        </telerik:RadMultiSelect>
        <br />
        <h4>'Multiple' tag mode</h4>
        <telerik:RadMultiSelect runat="server"
            AutoClose="false"
            Placeholder="Select attendees..."
            DataTextField="text"
            DataValueField="text"
            Width="400px"
            ID="RadMultiSelect2">
            <Items>
                <telerik:MultiSelectItem Text="Steven White"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy King"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Michael Leverling"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Callahan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Michael Suyama"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Anne King"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Laura Peacock"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Fuller"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Janet White"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nancy Leverling"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Robert Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Margaret Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Fuller"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Anne Davolio"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Andrew Suyama"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Nige Buchanan"></telerik:MultiSelectItem>
                <telerik:MultiSelectItem Text="Laura Fuller"></telerik:MultiSelectItem>
            </Items>
        </telerik:RadMultiSelect>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance