New to Kendo UI for jQuery? Download free 30-day trial

Move Group Labels on Top of DropDownList Items


Product Progress® Kendo UI® DropDownList for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


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?


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" />
      $(document).ready(function() {
          dataTextField: "ContactName",
          dataValueField: "CustomerID",
          fixedGroupTemplate: "LEFT ALIGNED, FULL ROW #=data#",
          groupTemplate: "FULL LINE ABOVE ROW: #: data #",
          height: 400,
          dataSource: {
            type: "odata",
            transport: {
              read: ""
            group: { field: "Country" }
      .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;

See Also

In this article