We help IT Professionals succeed at work.

Page with multiple Kendo Multiselect clears out the data

Sandy V
Sandy V asked
on
High Priority
96 Views
Last Modified: 2019-10-18
I have 2 kendo Multiselect fields in my html page. After i select items from 1st multiselect & go pick items from second multiselect, 1st multiselect field becomes empty(meaning all the elements i select for first multiselect are removed). How do we resolve this issue??

Here is the angularJS Code

 $scope.select1Options = {
            placeholder: "Search Par...",
            noDataTemplate: 'No Partner's found',
            dataTextField: "Name",
            dataValueField: "Id",
            valuePrimitive: false,
            autoBind: false,
            //filter: "contains",
            //animation: {
            //    close: {
            //        effects: "fadeOut zoom:out",
            //        duration: 300
            //    },
            //    open: {
            //        effects: "fadeIn zoom:in",
            //        duration: 300
            //    }
            //},
            minLength: 3,
            dataSource: {
                //type: "odata",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 10,
                filtering: function (e) {
                    var filter = e.filter;

                    if (!filter.value) {
                        //prevent filtering if the filter does not value
                        e.preventDefault();
                    }
                },
                transport: {

                    read: {
                        url: "/Partner/Configuration/GetPartners",
                        type: 'GET',
                        dataType: 'json'
                    }, 
                    parameterMap: function (options, type) {
                        if (type === "read") {
                            var paramMap = kendo.data.transports.odata.parameterMap(options);
                            delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
                            delete paramMap.$format; // <-- remove format parameter.
                            return { searchCriteria: options.filter.filters[0].value };
                        }
                    },
                    schema: {
                        data: function (data) {
                            return data; // <-- The result is just the data, it doesn't need to be unpacked.
                        },
                        total: function (data) {
                            return data.length; // <-- The total items count is the data length, there is no .Count to unpack.
                        }
                    }
                }


            },
            select: function(e) {

                $('select[name="multi_select1[]"]').change(function() {
                    $scope.partner = $(this).val();
                });
            }
        };

        $scope.select2Options = {
            placeholder: "Search Emp...",
            noDataTemplate: 'No Employers&apos;s found',
            dataTextField: "Name",
            dataValueField: "EmpId",
            valuePrimitive: false,
            autoBind: false,
            //filter: "contains",
            //animation: {
            //    close: {
            //        effects: "fadeOut zoom:out",
            //        duration: 300
            //    },
            //    open: {
            //        effects: "fadeIn zoom:in",
            //        duration: 300
            //    }
            //},
            minLength: 3,
            dataSource: {
                //type: "odata",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 10,
                filtering: function (e) {
                    var filter = e.filter;

                    if (!filter.value) {
                        //prevent filtering if the filter does not value
                        e.preventDefault();
                    }
                },
                transport: {

                    read: {
                        url: "/Partner/Configuration/GetEmployers",
                        type: 'GET',
                        dataType: 'json'
                    },
                    parameterMap: function (options, type) {
                        if (type === "read") {
                            var paramMap = kendo.data.transports.odata.parameterMap(options);
                            delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
                            delete paramMap.$format; // <-- remove format parameter.
                            return { searchText: options.filter.filters[0].value };
                        }
                    },
                    schema: {
                        data: function (data) {
                            return data; // <-- The result is just the data, it doesn't need to be unpacked.
                        },
                        total: function (data) {
                            return data.length; // <-- The total items count is the data length, there is no .Count to unpack.
                        }
                    }
                }


            },
            select: function (e) {

                $('select[name="multi_select2[]"]').change(function () {
                    $scope.employer = $(this).val();
                });
            }
        };

Open in new window


Here is html code

<select kendo-multi-select k-options="select1Options" k-ng-model="configuration" k-min-length="3" name="multi_select1[]" class="form-control" ></select>

 <select kendo-multi-select k-options="select2Options" k-ng-model="configuration" k-min-length="3" name="multi_select2[]" class="form-control" ></select>

Open in new window


This is what i figured until now,  I think if the k-options are same (both have select1Options variable or select2Options) the data selected on 2nd autocomplete field doesn't clear out data on the first field. Does that mean 2 autocomplete fields cannot have different data source??
Comment
Watch Question

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
why Angular here?
Sandy VDeveloper

Author

Commented:
Because of the current architecture. An MVC page is built to display all the records in  database  & when user clicks edit button a modal will be displayed. Modal is a HTML page & kendo autocomplete is on this page. HTML page interacts with the DB(calling API's) using angularJS
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
I asking this because maybe it because Angular change something on the field here
Sandy VDeveloper

Author

Commented:
I figured out the problem, it's because both the kendo autocomplete instances have same k-ng-model attribute. Unfortunately in my case both needs to point to same ng-model but the datatext fields within them are different. How do we solve this problem??
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
why do they need to share the same model.
i understand, they must share the same data, but why model (almost mean state) ?
Developer
Commented:
I modified  ViewModel to have 2 different datatextfields for the respective Kendo autocomplete