MultiSelect values not being removed after filtering

6 posts, 0 answers
  1. Ryan
    Ryan avatar
    7 posts
    Member since:
    Jan 2016

    Posted 21 Apr Link to this post

    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

     

     

     

     

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 25 Apr Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Ryan
    Ryan avatar
    7 posts
    Member since:
    Jan 2016

    Posted 25 Apr in reply to Boyan Dimitrov Link to this post

    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

  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 27 Apr Link to this post

    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!
     
  6. Kurtis
    Kurtis avatar
    3 posts
    Member since:
    Oct 2015

    Posted 28 Nov Link to this post

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

        }

     

  7. Ryan
    Ryan avatar
    7 posts
    Member since:
    Jan 2016

    Posted 28 Nov in reply to Kurtis Link to this post

    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.

Back to Top
Kendo UI is VS 2017 Ready