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

7 posts, 0 answers
  1. Marouan
    Marouan avatar
    6 posts
    Member since:
    Apr 2017

    Posted 09 May 2017 Link to this post

    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.
  2. Marouan
    Marouan avatar
    6 posts
    Member since:
    Apr 2017

    Posted 09 May 2017 in reply to Marouan Link to this post

    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" },
                });

  3. Ianko
    Admin
    Ianko avatar
    1940 posts

    Posted 11 May 2017 Link to this post

    Hello Marouan,

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Marouan
    Marouan avatar
    6 posts
    Member since:
    Apr 2017

    Posted 23 May 2017 in reply to Ianko Link to this post

    Hi Again

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

    Regards

  5. Marouan
    Marouan avatar
    6 posts
    Member since:
    Apr 2017

    Posted 23 May 2017 in reply to Marouan Link to this post

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

    Regards

  6. Marouan
    Marouan avatar
    6 posts
    Member since:
    Apr 2017

    Posted 23 May 2017 in reply to Marouan Link to this post

    Hi

    You can check there

    http://dojo.telerik.com/aCIfa

    Regards

  7. Dimitar
    Admin
    Dimitar avatar
    801 posts

    Posted 25 May 2017 Link to this post

    Hello Marouan,

    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 behavior as soon as possible, depending on our priority queue. 

    Regards,
    Dimitar
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top