Getting Started with the MultiSelect
This guide demonstrates how to get up and running with the Kendo UI for jQuery MultiSelect.
After the completion of this guide, you will be able to achieve the following end result:
<select id="customers"></select>
<script>
$("#customers").kendoMultiSelect({
dataTextField: "ContactName",
dataValueField: "CustomerID",
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
},
label: {
content: "Customers",
floating: true
},
height: 150,
fillMode: "flat"
});
</script>
1. Create a select Element
First, create an <select> element on the page that will be used to initialize the component.
<select id="customers"></select>
2. Initialize the MultiSelect
In this step, you will Initialize the MultiSelect from an existing <select> element with defined data items.
<select id="multiselect">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
<script>
$(document).ready(function(){
$("#multiselect").kendoMultiSelect();
});
</script>
Upon its initialization, the MultiSelect wraps the <select> element with a <div> tag.
<select id="customers"></select>
<script>
// Target the select element by using jQuery and then call the kendoMultiSelect() method.
$("#customers").kendoMultiSelect({
// Add some basic configurations such as a height.
height: 150
});
</script>
2. Specify a Data Source
Here, you will specify a dataSource configuration for the component which is used to display a list of values.
<select id="customers"></select>
<script>
// Target the select element by using jQuery and then call the kendoMultiSelect() method.
$("#customers").kendoMultiSelect({
dataTextField: "ContactName", // The field of the data item that provides the text content of the list items.
dataValueField: "CustomerID", // The field of the data item that provides the value of the component.
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
},
height: 150
});
</script>
4. Apply Some Styling
The MultiSelect provides several options that enable you to modify its appearance. The following example demonstrates how to apply a flat fillMode configuration to the component.
<select id="customers"></select>
<script>
$("#customers").kendoMultiSelect({
dataTextField: "ContactName",
dataValueField: "CustomerID",
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
},
height: 150,
fillMode: "flat" // Apply a flat fillMode.
});
</script>
5. Configure the Label
The MultiSelect enables you to configure the label by using its label property.
<select id="customers"></select>
<script>
$("#customers").kendoMultiSelect({
dataTextField: "ContactName",
dataValueField: "CustomerID",
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
},
height: 150,
fillMode: "flat",
label: {
content: "Customers", // Specify the label content.
floating: true // Allow the label to float.
}
});
</script>