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

Move Group Labels on Top of Items

The DropDownList provides an option for grouping its list items by certain criteria and showing 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-state-hover.k-first {
        padding-top: calc(2em - 1px);

      .k-list > .k-item.k-first > .k-group {
        height: 2em;
        left: 0;

      .k-list > .k-state-hover.k-first > .k-group {
        top: -1px;
        left: -1px;

See Also

For more runnable examples on the Kendo UI DropDownList, browse its How To documentation folder.

In this article
Not finding the help you need? Improve this article