Question

我使用带有Angular-Kendo指令的Kendo multiselect和远程数据源。我试图将结果分组为：this Demo，但分组不起作用？

    <select kendo-multi-select k-options="selectCataloguesOptions" k-ng-model="selectedCataloguesIds">
</select>
<p ng-show="selectedCataloguesIds.length" style="padding-top: 1em;">Selected: {{ selectedCataloguesIds }}</p>

$scope.CataloguesDataSource = new kendo.data.DataSource({            
            transport: {
                read: {
                    url: BaseURL + 'api/Catalogue/Get',
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8'
                },
            },
            group: { field: "RootCatalogueName" }        
        });

        $scope.selectCataloguesOptions = {
            placeholder: "Select Catalogues...",
            dataTextField: "ItemsCatalogueName",
            dataValueField: "ItemsCatalogueId",
            dataSource: $scope.CataloguesDataSource
        };

Answer 1

你的代码很好。您在小提琴中引用的kendo版本不支持此功能。我把小提琴here分叉并更新到2015.2.805。以下是更新后的链接：

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>

Angularjs Kendo UI多选组分组不起作用

1 个答案: