Does Kendo UI DropDownList support grouping?

Question

I'm using Kendo UI DropDownList but cannot find a way to group values in it. is this feature available?

saw the following post from early 2013 which says that this was on the roadmap, but not sure if it was implemented or not.

http://www.telerik.com/forums/option-group-for-datasource-in-dropdownlist

Answer 1

Grouping is not supported by the Kendo DropDownList widget.

Answer 2

As of the Q1 2015 release, this is supported on the datasource. It doesn't look like you can do this when binding to local data though.

• UserVoice Item
• Demo

Answer 3

Grouping actually is supported now, in conjunction with the datasource. Here is a code snippet that will create a dropdown list using Kendo UI 2015.3.1111 and jQuery 1.9.1, grouping by team colors. The datasource, candidates, is a local array of data items. The dropdown list will replace an HTML element on the page, <input id="victim"/>.

var candidates = [
    { "id": 1, "name": "Alice", "team": "Red" },
    { "id": 2, "name": "Bob", "team": "Red" },
    { "id": 3, "name": "Charlie", "team": "Blue" },
    { "id": 4, "name": "Dorothy", "team": "Blue" },
    { "id": 5, "name": "Ed", "team": "Green" },
    { "id": 6, "name": "Frances", "team": "Green" },
    { "id": 7, "name": "George", "team": "Purple" },
    { "id": 8, "name": "Helen", "team": "Purple" },
];

$("#victim").kendoDropDownList({
    "dataTextField": "name",
    "dataValueField": "id",
    "dataSource": { "data": candidates, "group": "team" },
    "index": 0
});

This is what the dropdown looks like with stock styling in FireFox:

I hadn't noticed before, but the widget also orders the groups.