Templates
The MultiColumnComboBox uses Kendo UI templates to provide full control over the way pop-up items are rendered.
For more information on the capabilities and syntax of the templates, refer to this documentation article. For a runnable example, refer to the demo on customizing the templates in the MultiColumnComboBox.
Column Templates
You can define column templates and header column templates to customize the layout of your project.
<input id="multicolumncombobox" />
<script>
$("#multicolumncombobox").kendoMultiColumnComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Apples", value: "1" },
{ text: "Oranges", value: "2" }
],
columns: [
{ field: "text", template: "Cell Text: #:text#", headerTemplate: "<strong>Text</strong>"},
{ field: "value", template: "Cell Value: <strong>#:value#</strong>", headerTemplate: "<strong>Value</strong>"}
]
});
</script>
Header Templates
The header template manages the way the popup header of a MultiColumnComboBox is rendered.
<input id="comboBox" />
<!-- Template -->
<script id="headerTemplate" type="text/x-kendo-template">
<strong>Header</strong>
</script>
<!-- MultiColumnComboBox initialization -->
<script>
$(document).ready(function() {
$("#comboBox").kendoMultiColumnComboBox({
headerTemplate: $("#headerTemplate").html(),
dataTextField: "ContactName",
dataValueField: "CustomerID",
columns: [
{ field: "ProductName", title: "ProductName" },
{ field: "ProductID", title: "ProductID" }
],
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Customers"
}
}
}
});
});
</script>
Footer Templates
The footer template manages the way the popup footer of a MultiColumnComboBox is rendered. The footer is re-rendered on every change of the Data Source. The context of the template is the widget itself.
<input id="comboBox" />
<!-- Template -->
<script id="footerTemplate" type="text/x-kendo-template">
Total <strong>#: instance.dataSource.total() #</strong> items found
</script>
<!-- MultiColumnComboBox initialization -->
<script>
$(document).ready(function() {
$("#comboBox").kendoMultiColumnComboBox({
footerTemplate: $("#footerTemplate").html(),
dataTextField: "ContactName",
dataValueField: "CustomerID",
columns: [
{ field: "ProductName", title: "ProductName" },
{ field: "ProductID", title: "ProductID" }
],
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Customers"
}
}
}
});
});
</script>
No-Data Templates
The MultiColumnComboBox widget displays noDataTemplate in the popup when the data source is empty.
When the
noDataTemplateoption is defined, the widget always opens the popup element.
<input id="comboBox" />
<!-- Template -->
<script id="noDataTemplate" type="text/x-kendo-template">
<strong>No Data!</strong>
</script>
<!-- MultiColumnComboBox initialization -->
<script>
$(document).ready(function() {
$("#comboBox").kendoMultiColumnComboBox({
noDataTemplate: $("#noDataTemplate").html(),
dataTextField: "ContactName",
dataValueField: "CustomerID",
filter: "contains",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Customers"
}
}
}
});
});
</script>