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

WebForms MultiSelect Overview

Invite Attendees

About RadMultiSelect for ASP.NET AJAX

RadMultiSelect is a server-side WebForms wrapper over the MultiSelect for Kendo UI for jQuery. It operates on the client, displays a list of options and allows multiple selections from this list.

RadMultiSelect 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
  • Client-side and server-side Data binding
  • Grouping
  • Server filtering
  • Virtualization
  • Summary-tag mode
  • Custom Look and Feel with Templates
  • Accessibility and RTL support
  • Multiple built-in skins
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" AutoEventWireup="true"  Inherits="Telerik.Web.Examples.MultiSelect.Overview.DefaultCS" CodeFile="DefaultCS.aspx.cs" %>

<%@ 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 label {
            display: block;
            margin: 15px 0 5px 0;
        }      
        .btn-send-invite {
            float: right;
            margin: 25px auto 0;
        }
    </style>
</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">
        <h2>Invite Attendees</h2>

        <asp:Label Text="Required" ID="Label1" AssociatedControlID="requiredMultiSelect" runat="server" />
        <telerik:RadMultiSelect runat="server" DataValueField="text" Filter="Contains" EnforceMinLength="false" Placeholder="Select attendees..."
            DataTextField="text" Width="500px" ID="requiredMultiSelect">
            <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>

        <asp:Label Text="Optional" ID="Label2" AssociatedControlID="optionalMultiSelect" runat="server" />
        <telerik:RadMultiSelect runat="server" Filter="Contains" EnforceMinLength="false" AutoClose="false" Placeholder="Select attendees..."
            DataTextField="text" Width="500px" ID="optionalMultiSelect">
            <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>
        
        <telerik:RadButton runat="server" ID="RadButton1" Text="Send Invitation" AutoPostBack="false" OnClientClicked="OnClientClicked" CssClass="btn-send-invite " />

        <script>
            function OnClientClicked(sender, args) {
                var required = $find("<%= requiredMultiSelect.ClientID %>");
                var optional = $find("<%= optionalMultiSelect.ClientID %>");

                alert("Attendees:\n\nRequired: " + required.get_value() + "\nOptional: " + optional.get_value());
            }
        </script>
    </div>

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

Support & Learning Resources

Find Assistance