如何在 Kendo UI MultiSelect 中对客户端的项目进行分组？

Question

我正在尝试在客户端对多选项目进行分组。为此，我正在关注 this 教程。

内容如下：

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

但我想在客户端对其进行分组。这是我的代码：

  $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" }
            }
        };

但这并没有给出正确的分组。见下图：

我有什么地方做得不对吗？

Answer 1

问题是由于 parent 是 JavaScript 中的保留字引起的。似乎 Kendo 的数据源对象试图从您的 "parent" 列中获取数据的方式导致它获得对其实际父对象的引用。

如果您将列名称更改为 "parentgroup" 或其他名称，它应该可以正常工作。

如何在 Kendo UI MultiSelect 中对客户端的项目进行分组？

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

telerik

kendo-ui

kendo-ui-angular2