Edit this page

MultiSelect Overview

The Kendo UI MultiSelect widget displays a list of options and allows multiple selections from this list. The widget represents a richer version of the <select> element and provides support for local and remote data binding, item and tag templates, and configurable options for controlling the list behavior.

Getting Started

Initialize the MultiSelect

The Kendo UI MultiSelect widget can be initialized in three ways:

  1. By using the <option> tag of an existing <select> element with defined data items.
  2. By binding the widget to a local data array and using the <select> element.
  3. By binding the widget to a remote data service and using the <select> element.

The MultiSelect looks and operates consistently regardless of the initialization type you choose to apply.

Important

  • As a MultiSelect must be initialized after the DOM is fully loaded, make sure you create it within a $(document).ready() statement.
  • The widget copies any styles and CSS classes from the input element to the wrapper element and visible input.

Use the <option> tag of an existing <select> element

The example below demonstrates how to initialize the MultiSelect from an existing <select> element with defined data items.

Example
<select id="multiselect">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
</select>

<script>
    $(document).ready(function(){
        $("#multiselect").kendoMultiSelect();
    });
</script>

Bind to a local data array

Bind the MultiSelect to local data arrays through the DataSource component—an abstraction for local and remote data.

Local arrays are appropriate for limited value options.

The example below demonstrates how to initialize the MultiSelect by binding it to local data arrays.

Example
<select id="multiselect"></select>

<script>
  $(document).ready(function(){
    $("#multiselect").kendoMultiSelect({
      dataTextField: "text",
      dataValueField: "value",
      dataSource: [
        { text: "Item1", value: "1" },
        { text: "Item2", value: "2" }
      ]
    });
  });
</script>

Bind to a remote data service

Bind the MultiSelect to remote data arrays through the DataSource component—an abstraction for local and remote data.

Remote data binding is appropriate for larger data sets, so that items are loaded on-demand, when displayed. The DataSource can be used to serve data from a variety of data services, such as XML, JSON, and JSONP.

The example below demonstrates how to initialize the MultiSelect by binding it to a remote data service.

Example
<select id="multiselect" multiple></select>

<script>
$(document).ready(function() {
    $("#multiselect").kendoMultiSelect({
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        dataSource: {
            transport: {
                read: {
                    dataType: "jsonp",
                    url: "http://demos.telerik.com/kendo-ui/service/Products"
                }
            }
        }
    });
});
</script>

Templates

The MultiSelect uses Kendo UI templates to provide full control over the way an item, a tag, or a header is rendered.

Item Templates

The example below demonstrates how to define an item template.

Example
<select id="multiselect" multiple></select>
<!-- Item Template -->
<script id="itemTemplate" type="text/x-kendo-template">
    ContactName: #:data.ContactName#, CustomerID: #:data.CustomerID#
</script>

<!-- MultiSelect initialization -->
<script>
    $(document).ready(function() {
        $("#multiselect").kendoMultiSelect({
            itemTemplate: $("#itemTemplate").html(),
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "http://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
</script>

Tag Templates

The example below demonstrates how to define a tag template.

Example
<select id="multiselect" multiple></select>
<!-- Item Template -->
<script id="tagTemplate" type="text/x-kendo-template">
    ContactName: #:data.ContactName#
</script>

<!-- MultiSelect initialization -->
<script>
    $(document).ready(function() {
        $("#multiselect").kendoMultiSelect({
            tagTemplate: $("#tagTemplate").html(),
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "http://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
</script>

Header Templates

The MultiSelect allows you to render a pop-up header.

The example below demonstrates how to define a header template.

Example
<select id="multiselect" />
<!-- Template -->
<script id="headerTemplate" type="text/x-kendo-template">
    <strong>Header</strong>
</script>

<!-- MultiSelect initialization -->
<script>
    $(document).ready(function() {
        $("#multiselect").kendoMultiSelect({
            headerTemplate: $("#headerTemplate").html(),
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "http://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
</script>

Configuration

Drop-Down List

Customize the width of a drop-down list and change its dimensions by using the jQuery width() method.

Example
<select id="multiselect"></select>

<script>
    var multiselect = $("#multiselect").data("kendoMultiSelect");

    // set width of the drop-down list
    multiselect.list.width(400);
</script>

Pre-Selected Values

When the autoBind option is set to false you need to specify a list of data items instead of just list of strings. This functionality is supported in 2013 Q1 SP1 release and later versions of Kendo UI.

The example below demonstrates how to pre-select values on initial loading.

Example
<select id="multiselect"></select>
<!-- MultiSelect initialization -->
<script>
    $(document).ready(function() {
        $("#multiselect").kendoMultiSelect({
            autoBind: false,
            dataTextField: "Name",
            dataValueField: "Id",
            dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                    read: {
                        url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                    }
                }
            },
            value: [
                { ProductName: "Chang", ProductID: 2 },
                { ProductName: "Uncle Bob's Organic Dried Pears", ProductID: 7 }
            ]
        });
    });
</script>

Scrollable Content

By design, when adding items that do not fit in the existing free space, the MultiSelect expands vertically. To achieve limited expansion and scrolling, use CSS and JavaScript code. The example in the Dojo demonstrates how to do this.

Support for label Element

Because of its complex rendering, focusing the widget by using a label element requires additional implementation. For more information about how to do it, check this Kendo UI Dojo snippet.

See Also

Other articles on the Kendo UI MultiSelect:

Articles on the Kendo UI ComboBox:

Articles on the Kendo UI DropDownList:

Articles on the Kendo UI AutoComplete: