multi-select with grouping and virtualization event click and destroy doesn't work

[Marouan]

Hello

I'm using kendoUI multiselect, but have some issues with the event click and destroy.

I'm using Kendo UI v2017.1.118, AngularJS v1.6.4 and jquery-2.2.1

Here is my source code using the MultiSelect:

F

<div ng-controller="icpSinglePersonSelectionController as c" >
    <select kendo-multi-select id="selectusers" name="selectusers" k-ng-model="c.uids" k-value-primitive="true"
                k-options="c.selectOptions"  k-on-change="c.onMultiSelectSelected(kendoEvent)" >
    </select>
</div>

 

 

app.controller("icpSinglePersonSelectionController",
    
    ['$http', '$scope', function
        ($http, $scope) {
        var me = this;
       
        me.uids = [];
        me.AllowMultipleSelections= false
           
           me.uid="111111"
           me.pname="test"
           me.uids = [];
           me.value_url ="ContentService/" & uid & "/" & pname          
           me.possible_value_url = "ContentService/getPossiblePersonValuesForEdit?uid=" &
                                 uid & "&pname=" & pname
          var  dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: me.possible_value_url,
                    }
                },                          
                schema: {
                    data: function (data) {
                        return angular.fromJson(data);
                    }
                }
            });
            $http.get(me.value_url).then(function (renspose) {

                    var jsondata = angular.fromJson(renspose);
                    var itemData = jsondata[me.pname];
                        if (angular.isArray(itemData)) {
                            me.uids = itemData.map(function (item) { return item.uid; });
                        }
                        else {
                            me.uids = [itemData.uid];
                        }
                                 
                    me.selectOptions = {
                        dataTextField: "reference_text",
                        dataValueField: "Id",
                        footerTemplate: 'Total #: instance.dataSource.total() # items found',
                        itemTemplate: '<table><tr><td><img class="k-state-default" src="#:data.icon#" height=50px></img></td>' +
                                      '<td><span class="k-state-default"><h3>#: data.reference_text #</h3><p>#: data.department #</p></span></td></tr></table>',
                        tagTemplate: '<img class="k-state-default" src="#:data.icon#" height=20px></img><span>#:data.reference_text#</span>',
                        virtual: {
                            mapValueTo: "dataItem",
                            valueMapper: function (options) {
                                $http.post("UserService/getPersons",
                                    { uids: me.uids }
                                ).then(function (response) {
                                    options.success(response); //return the dataItems that correspond to provided values
                                });
                            },
                            itemHeight: 80
                        },
                        dataSource: dataSource,
                        pageSize: 80,
                        serverPaging: false,
                        serverFiltering: true,
                        height: 520,
                        value: me.uids,
                        autoClose: true,
                        maxSelectedItems: 1,
                        filter: "contains",
                    };

            });
            me.onMultiSelectSelected = function (e) {
                var multiselect = e.sender,
                   amountOfSelectedItems = multiselect.dataItems().length,
                   maxSelectedItems = multiselect.options.maxSelectedItems;

                if (amountOfSelectedItems >= maxSelectedItems) {
                    $('.k-input').attr('readonly', "readonly");
                }
                else {
                    $('.k-input').removeAttr('readonly');
                }

            }; 
       
        
}]);

 

Note: When I delete virtualization the events return to work and if I use virtualization without grouping it works.

[Marouan]

Hello 

I missed the grouping on the code above

Shall be

          var  dataSource = new kendo.data.DataSource({              
                transport: {
                    read: {
                  url: me.possible_value_url,


                    }
                }
                ,
               
                schema: {
                    data: function (data) {
                        return angular.fromJson(data);
                    }
                },
                group: { field: "UserFavorites" },
            });

[Ianko]

Hello ,

Here you are a working example of the MultiSelect in AngularJS with virtualization: http://dojo.telerik.com/EXigA. 

It is using the jQuery.ajax instead of the AngularJS $http.jsonp as I was unable to get that working. But this is a matter regarding the service consumed. The MultiSelect, in this scenario, works as expected.

Regards,
Ianko
Telerik by Progress

[Marouan]

Hi Again

You miss the grouping in your example( you can add for example group: { field: "ShipCity" } and check the issue . 

Regards

[Marouan]

You can check there http://dojo.telerik.com/aCIfa

Regards

[Marouan]

Hi

You can check there

http://dojo.telerik.com/aCIfa

Regards

[Dimitar]

Hello ,

The currently used services in the demo (ValueMapper and Orders) are not configured to work with grouped data and this is the reason why you are getting the JavaScript error.

I have logged a new enhancement issue in the official repository and you can start tracking the progress we make on it from here. We will update the documentation with a new article, which demonstrates how to achieve the desired as soon as possible, depending on our priority queue. 

Regards,
Dimitar
Telerik by Progress