Move Group Labels on Top of DropDownList Items
Environment
| Product | Progress® Kendo UI® DropDownList for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I group the list items of a DropDownList by certain criteria and show the group labels and grouped items within the drop-down list?
Solution
The following example demonstrates how to move the group label on top of the grouped items in a Kendo UI DropDownList. The approach is also applicable to the ComboBox and MultiSelect widgets.
<input id="customers" style="width: 400px" />
<script>
$(document).ready(function() {
$("#customers").kendoDropDownList({
dataTextField: "ContactName",
dataValueField: "CustomerID",
fixedGroupTemplate: "LEFT ALIGNED, FULL ROW #=data#",
groupTemplate: "FULL LINE ABOVE ROW: #: data #",
height: 400,
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
group: { field: "Country" }
}
});
});
</script>
<style>
.k-list > .k-item.k-first {
padding-top: 2em;
}
.k-list > .k-hover.k-first {
padding-top: calc(2em - 1px);
}
.k-list > .k-item.k-first > .k-group {
height: 2em;
left: 0;
}
.k-list > .k-hover.k-first > .k-group {
top: -1px;
left: -1px;
}
</style>