How to group items on client side in Kendo UI MultiSelect?

Question

I am trying to group items in multiselect on client side. For this I am following this tutorial.

It says following:

To enable the grouping functionality in a ComboBox, use the remote transport and a grouped data source.

But I want to group it on the client side. Here is my code:

  $scope.data = [{ "id": "1", "paramname": "Name", "parent": "Driving License" }, { "id": "2", "paramname": "Address", "parent": "Driving License" }, { "id": "3", "paramname": "SSN", "parent": "Driving License" }, { "id": "4", "paramname": "Name", "parent": "Voter Id" }, { "id": "5", "paramname": "Address", "parent": "Voter Id" }, { "id": "6", "paramname": "State", "parent": "Voter Id" }]

        $scope.selectOptions = {
            placeholder: "Select products...",
            dataTextField: "paramname",
            dataValueField: "id",
             valuePrimitive: true,
            autoBind: false,
            dataSource: {
                data: $scope.data,
                serverGrouping: false,
                group: { field: "parent" }
            }
        };

But this doesn't give proper grouping. See below image:

Is there anything I am not doing correctly?

Answer 1

The problem is caused by parent being a reserved word in JavaScript. It seems that the way Kendo's datasource object is trying to fetch data from your "parent" column is resulting in it getting a reference to its actual parent object.

If you change the column name to "parentgroup" or something else, it should work fine.