Dropdown Button

[Shannon]

Is it possible to add a divider/header within the data array?  

Something like.

Item1

-----------------

Header Title

Item2

[Hetali]

Hi Shannon,

Currently, we do not have this feature with the Kendo DropDownButton. However, the example can be achieved by using the Kendo DropDownList component in the following two ways:

1. By Grouping the items, as seen below:

app.component.html:

<kendo-dropdownlist
  [data]="groupedData"
  [textField]="'name'"
  [valueField]="'name'">
</kendo-dropdownlist>

app.component.ts:

public data: Array<any> = [
  { name: "Item 1", subcategory: "Header 1" },
  { name: "Item 2", subcategory: "Header 2" }
];

public groupedData: GroupResult[] = groupBy(this.data, [{field: "subcategory"}]);

OR

2. By adding '---------------' (the divider) in the array of items, and then disable the divider, so it cannot be selected. For example:

app.component.html:

<kendo-dropdownlist
  [data]="listItems"
  [itemDisabled]="itemDisabled"
  [textField]="'text'"
  [valueField]="'value'">
</kendo-dropdownlist>

app.component.ts:

public listItems: Array<{ text: string, value: number, disabled: boolean }> = [
  { text: "Header Title", value: 1, disabled: true },
  { text: "Item 1", value: 2, disabled: false },
  { text: "------------------", value: 3, disabled: true },
  { text: "Header Title", value: 4, disabled: true },
  { text: "Item 2", value: 5, disabled: false }
];

public itemDisabled(itemArgs: { dataItem: any, index: number }) {
  return itemArgs.dataItem.disabled;
}

In order to make it look like a button, the arrow icon can also be removed by adding the following CSS snippet:

.k-dropdown-wrap .k-select{
  display: none;
}

Please take a look at this StackBlitz sample with two DropDownLists, each demonstrating the above mentioned options, and displaying the example pattern.

I hope this helps. Please let me know if you have any further questions pertaining to this case.

Regards,
Hetali
Progress Telerik