kendo ui multiselect get the names of the values already selected

Question

i have a multiselect kendo, populated by a controller in mvc.

i have a option in the dropdown that is selectAll, and when i select that option, i clear all the other's, now i want to disable the dropdown (but not the option to delete the "Select All" option.

if i do

multiselect.enable(false) //i lose the option to delete the selected "Select All"

With this code bellow: when i choose the option "Select All" i clear all the other option selected and kendo just let the Selected All option selected.

 if (sel == 'Select All') {

        var name_Controller = $(e.item).parent().attr('id');

        var name_Controller = name_Controller.substr(0, name_Controller.indexOf('_'));

        var t = "#" + name_Controller;

        var required = $(t).data("kendoMultiSelect");

        required.value(""); // to clean 

Now.. how can i disable the other option, or know the name of the option already choosed in order to do something like this:

       if(required.contains("Select All")) //dont do nothing

the required.val() doenst work because this is used in multiple dropdowns all automaticaly with diferent id's

Answer 1

There are two questions to keep in mind:

1. How to filter options from the list: You should use filter.
2. Intercept change event so you can analyze which options are selected and if "Select All" is chosen then filter every option from the list.

What you should do is something like:

var multi = $("#colors").kendoMultiSelect({
    dataSource: [
        { name: "Select All" },
        { name: "Red" },
        { name: "Green" },
        { name: "Blue" }
    ],
    dataTextField: "name",
    dataValueField: "name",
    change: function(e) {
        // Get selected options
        var values = this.value();
        if ($.inArray("Select All", values) != -1) {
            // If "Select All" is in the list
            // Remove other possibly selected options
            multi.value("Select All");
            // Remove any option from the datasource
            multi.dataSource.filter({ field : "name", operator : "eq", value : "Select All"});
        } else {
            // Clean filter
            multi.dataSource.filter({ });
        }
    }
}).data("kendoMultiSelect");

Check it here : http://jsfiddle.net/OnaBai/9nVdq/6/

EDIT: If you want to do a generic function for dealing with this "Select All" you should define the MultiSelects as:

var multi = $("#colors").kendoMultiSelect({
    dataSource: colors,
    dataTextField: "name",
    dataValueField: "name",
    change: selectAll
}).data("kendoMultiSelect");

$("#cities").kendoMultiSelect({
    dataSource: cities,
    dataTextField: "name",
    dataValueField: "name",
    change: selectAll
});

and the the function selectAll as:

function selectAll(e) {
    // Get selected options
    var values = this.value();
    if ($.inArray("Select All", values) != -1) {
        // If "Select All" is in the list
        // Remove other possibly selected options
        this.value("Select All");
        // Remove any option from the datasource
        this.dataSource.filter({ field : "name", operator : "eq", value : "Select All"});
    } else {
        // Clean filter
        this.dataSource.filter({ });
    }
}

the "trick" is that this refers to current multiselect.

See it in action here : http://jsfiddle.net/OnaBai/9nVdq/8/

Answer 2

May be its very old post, but when I was into similar situation, I found a direct solution.

$("#kendo-dropdown-id").data("kendoMultiSelect").dataItems() will get you all the items selected from the Kendo multiselect control.

Please let me know, if you have any concerns..