This is a migrated thread and some comments may be shown as answers.

MultiSelect values not being removed after filtering

6 Answers 2151 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 21 Apr 2016, 08:34 PM

I have three components that work together to filter a KendoGrid and filter each other.  Basically when DropDownA gets changed, it should clear any selected values of the MultiSelect, then filter the MultiSelect's dataSource.  It works fine on the very first change event of DropDownA, but after that it clears the values from the MultiSelect (calling .value() on it returns []), but does not update the UI--any previously selected values will still be there.  The Kendo Components do use server filtering.  I've tried clearing the filter before setting the value, as well as setting the value to null, "", and []--all produce the same or similar behavior.

function onChange() {
    stationDropDown.select(-1);
    hydrantGroupMultiSelect.value(null);
 
    stationDropDown.dataSource.filter({}, {
        branchGroupId: value
    });
 
    hydrantGroupMultiSelect.dataSource.filter({}, {
        branchId: "",
        branchGroupId: value
    });
}

Above is the change event of DropDownA, and my multiSelects config:

$('#' + options.thisId).kendoMultiSelect({
    value: "None Selected",
    dataSource: // A Backbone DataSource wrapper we use,
    dataTextField: "id",
    dataValueField: "description",
    filter: "contains",
    placeholder: "None Selected",
    change: _.bind(function (e) {
        // Some Change Event code unrelated to this problem
    }, this)
});

Digging through the Kendo library code to see how the behavior changes between the two (first change event and subsequent change events) is that around line 31258 in kendo.all.js, listView.isFiltered() is set to false on first change event, and set to true on subsequent change events, which causes different behavior.  If I remove the filtering on the multiSelect in the change event, the component behaves properly.

 

Any ideas?

 

Thanks

 

 

 

 

 

6 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 25 Apr 2016, 03:17 PM

Hello Ryan,

When I call the Kendo UI MultiSelect widget's value method with empty array as parameters clears the selected value as expected. 

$("#multiSelect").data().kendoMultiSelect.value([]);

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ryan
Top achievements
Rank 1
answered on 25 Apr 2016, 04:24 PM

Boyan,

That's not the problem, as I stated in my original post the value of the component is being set properly; the problem is the UI of the component is not reflecting that after the first change event

0
Boyan Dimitrov
Telerik team
answered on 27 Apr 2016, 10:45 AM

Hello Ryan,

I am afraid that I am not able to replicate any unexpected behavior with such scenario. Please refer to http://dojo.telerik.com/uRIqO example. When an item is selected from the Kendo UI DropDownList the current selection of the MultiSelect is cleared. This can be done more than once and it works fine. 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Kurtis
Top achievements
Rank 1
answered on 28 Nov 2016, 04:22 PM

I understand your problem Ryan, as I'm having the same issue.  We are not asking how we can clear the values, which you are correct, can be cleared with .value([]).

 

The problem is that once selections are made, the multi-select is holding unto the initial value.  So no matter what, the first selected value will also be present in the values list.

Below if my function to initiation multi-select and I have not found a good solution to get the value to clear when there are no real selected values.

   function initMultiSelects() {
        var multiSelectUrl = '@Url.Action("GetDropDownList", "Data")';

        var lsMultSelect = $("#lifeStyleMultiSelect").kendoMultiSelect({
            placeholder: "Select LifeStyles...",
            dataTextField: "Text",
            dataValueField: "Text",
            autoBind: false,
            dataSource: {
                transport: {
                    read: {
                        url: multiSelectUrl,
                        dataType: 'json',
                        type: "GET",
                        data: { field: "ls" }
                    }
                }
            },
            value: "Text",
            change: function (e) {
                var filter_ = { logic: "or", filters: [ ] };
                var values = this.value();
                $.each(values, function (i, v) {
                    filter_.filters.push({ field: "LifeStyle", operator: "eq", value: v });
                });
                grid.dataSource.query({ filter: filter_ });
                
            }
        }).data("kendoMultiSelect");

    }

 

0
Ryan
Top achievements
Rank 1
answered on 28 Nov 2016, 04:31 PM

Hi Kurtis,

This was a long time ago that I made this post, but I believe this is how I resolved the issue:

multiSelect.value([]);

multiSelect.refresh();

multiSelect._placeholder(true); //Resets the placeholder

Let me know if that fixes it, if not, I'll dig into that piece of code real quick and see if I can jog my memory exactly how I resolved this problem.

0
iConect Developer - Mike
Top achievements
Rank 1
answered on 20 Dec 2017, 10:14 PM
I was having the same issue. i found that i was able to fix it by clearing the filter before set the value to and empty array

multiSelect.dataSource.filter({});

multiSelect.value([]);
Tags
MultiSelect
Asked by
Ryan
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Ryan
Top achievements
Rank 1
Kurtis
Top achievements
Rank 1
iConect Developer - Mike
Top achievements
Rank 1
Share this question
or