CODEWITHSUNDEEP
jquerykendo-uitelerik
sir_ask
sir_ask

Reputation: 334

kendo ui multiselect get the names of the values already selected

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

Upvotes: 5

Views: 18741

Answers (3)

itb564
itb564

Reputation: 223

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..

Upvotes: 2

Chris Marisic
Chris Marisic

Reputation: 33098

A different method, instead of trying to coerce the text values out of the multiselect. Capture the databound event and grab the entire datasource and store that full array in your model.

Then you can use the selected values as a look up against the original datasource's data that you now own. This will allow you to keep a loose dependency between viewModel and page.

Upvotes: 0

OnaBai
OnaBai

Reputation: 40887

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/

Upvotes: 3

Related Questions