Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angularjs Kendo UI multiselect grouping not working

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
        };
like image 798
hamzeh.hanandeh Avatar asked Mar 25 '26 01:03

hamzeh.hanandeh


1 Answers

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>
like image 148
RodgerTheGreat Avatar answered Mar 26 '26 13:03

RodgerTheGreat



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!