Getting Started with the MultiColumnComboBox
This guide demonstrates how to get up and running with the Kendo UI for jQuery MultiColumnComboBox .
After the completion of this guide, you will achieve the following end result:
<input id="comboBox" />
<script>
$(document).ready(function() {
$("#comboBox").kendoMultiColumnComboBox({
index: 0,
dataTextField: "ProductName",
dataValueField: "ProductID",
columns: [
{ field: "ProductName", title: "ProductName" },
{ field: "ProductID", title: "ProductID" }
],
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Products"
}
}
}
});
});
</script>
1. Create an Input Element
First, create an <input> element on the page that will be used to initialize the component. The content of the <input> will be used as content for the MultiColumnComboBox.
<input id="comboBox" />
2. Initialize the MultiColumnComboBox
In this step, you will initialize the MultiColumnComboBox from the <input> element.
<input id="comboBox" />
<script>
$(document).ready(function() {
$("#comboBox").kendoMultiColumnComboBox();
</script>
3. Specify the Data Source
Here, you will specify a dataSource instance and fetch the remote data.
<input id="comboBox" />
<script>
$(document).ready(function() {
$("#comboBox").kendoMultiColumnComboBox({
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Products"
}
}
}
});
});
</script>
4. Define the Columns Rendered in the Table
In this step you will define the columns rendered in the table of the MultiColumnComboBox.
<input id="comboBox" />
<script>
$(document).ready(function() {
$("#comboBox").kendoMultiColumnComboBox({
columns: [
{ field: "ProductName", title: "ProductName" },
{ field: "ProductID", title: "ProductID" }
],
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Products"
}
}
}
});
});
</script>
5. Define the Data Value Field and the Data Text Field
The dataValueField specifies the field of the data item that provides the value for the component and the dataTextField sets the field of the data item that provides the text content of the list items.
<input id="comboBox" />
<script>
$(document).ready(function() {
$("#comboBox").kendoMultiColumnComboBox({
index: 0, // the index of the initially selected item
dataTextField: "ProductName",
dataValueField: "ProductID",
columns: [
{ field: "ProductName", title: "ProductName" },
{ field: "ProductID", title: "ProductID" }
],
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Products"
}
}
}
});
});
</script>