I´m using Kendo multiselect with Angular-Kendo directives and with remote datasource. I´m trying to grouping result like: this Demo, but grouping is not working?
<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
};
Your code is fine. The version of kendo you are referencing in the fiddle did not support this functionality. I forked the fiddle here and updated to 2015.2.805. Here are the updated links:
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With