How to get selected values of Kendo Multi Select?

Question

I'm using Kendo multi select as follow but i can't get selected values

var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData= [];
var items = multiselect.value();
for (var itm in items)
{
   selectedData.push(itm);
}

but array selectedData return indices of items in multiselect not values .

Lammas

What should I do when someone answers my question? – Lowman

@PierreLebon vote it up! – Restate

@redwards510, are they worthy ? – Lowman

@PierreLebon actually, I'm going to post an answer that builds on the others in just a second, you should vote that one up ;) – Restate

@PierreLebon actually you don't necessary vote it up, you simply click the check box next to the question that helped the most. it gives YOU points too, so you want to do it! – Restate

@redwards510, "you simply click the check box next to the question" : I' am not OP. Op came here with a working piece of code searching for a mistake that he do not understand. Op get his answer in 10 minute, then denies it. And now Op is gone. There is no green check for anyone to win. And this should be close as "not a question". But imo ,you answer is good because of the check list you add at the end. Answer have some quality so I won't vote close this. But man broken copy pasta question start to buzzes me. – Lowman

see this link> #42974414 – Wrong

Answer 1

Use this other one returns indices.

var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData= [];
var items = multiselect.value();
for (var i=0;i<items.length;i++)
{
   selectedData.push(items[i]);
}

Limber

I want to return selected values not indices – Lammas

did you try this? – Limber

Answer 2

You can also assign the array, returned from the value() method, directly to the variable, e.g.:

var ms = $("#multiselect").kendoMultiSelect({
  value: ["1", "2"]
}).data('kendoMultiSelect');

var selectedItems = ms.value();
console.log(selectedItems); // ["1", "2"]

Numinous

Answer 3

Your original code doesn't look wrong. Are you sure you are getting only indices? Perhaps you should post your MultiSelect code as well. I found this question because I had the same problem and used the other answers for reference, but I found them overcomplicated. So let me answer in another complicated way :)

Here's what I've got. I know it's more code than you need, but I think it's important to see the full picture here. First let me set this up. There's a problem with the Kendo().MultiSelect.Name("SomeName") property if you are using it more than once. "Name" sets not only the html name, but the id as well, and you never want two ids with the same identifier. So in my code, I am appending a unique Id to my MultiSelect.Name property to ensure a unique id. I am putting the MultiSelect in each row of a table of people. I am showing this to make sure you are using the DataValueField property so you are able to get the selected values (not the text you see in the ui). If you are just showing a list of text values with no id behind them, perhaps that is why you are getting the wrong data?

@foreach (var cm in Model.CaseMembers)
{
<tr>
<td>
    @(Html.Kendo().MultiSelect()
      .Name("IsDelegateFor" + cm.CaseMemberId)                              
      .Placeholder("is a delegate for..")
      .DataTextField("FullName")
      .DataValueField("CaseMemberId")
      .BindTo(Model.Attorneys)
    )
</td>
</tr>
}

then, later on, in my jQuery where I attempt to extract out the DataValueField (CaseMemberId), which is the array of selected values of the MultiSelect...

var sRows = [];
$('#cmGrid tr').each(function () {
    // 'this' is a tr
    $tr = $(this);
    // create an object that will hold my array of selected values (and other stuff)
    var rec = {};   
    rec.IsADelegateFor = [];        
    // loop over all tds in current row
    $('td', $tr).each(function (colIndex, col) {
        if (colIndex === 3) {
            // make sure our MultiSelect exists in this td
            if ($(this).find("#IsDelegateFor" + rec.CaseMemberId).length) {                        
                // it exists, so grab the array of selected ids and assign to our record array
                rec.IsADelegateFor = $(this).find("#IsDelegateFor" + rec.CaseMemberId).data("kendoMultiSelect").value();                        
            }
        }
    }
    // add this tr to the collection
    sRows.push(rec);
}

so this is all a super verbose way of saying that this single line, as the other people mentioned works perfectly to grab the ids. There is no need to iterate over the .value() array and push the contents to another array!

rec.IsADelegateFor = $(this).find("#IsDelegateFor" + rec.CaseMemberId).data("kendoMultiSelect").value();  

So in your original code, there is no reason the following should not work,

var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData = [];
selectedData = multiselect.value();
console.log(selectedData);

unless

• you don't have your MultiSelect set up properly in C# with DataValueField
• you have multiple MultiSelects on the page with the exact same id and it's reading from a different one than you think.
• You don't even have value fields, just a list of text.

Restate

Answer 4

var selected = $("#multi").data("kendoMultiSelect").value();

Hierarchize

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Kautz

Answer 5

The solution given by volvox works.

Below is jquery version,

var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData= [];
var items = multiselect.value();
$.each(items ,function(i,v){
  selectedData.push(v);
});

Tribune

I think you already have the values at var items = multiselect.value(); disregard the other lines. – Carew

Answer 6

If you want to get both selected Text and Value:

    $("#SelectRoles").width(300).kendoMultiSelect({
     dataSource: {
        transport: {
            read: pg + "Controller/Roles"
          }
        },
     dataTextField: "Label",
     dataValueField: "Code"
    });
    
    var multiselect = $("#SelectRoles").getKendoMultiSelect();
    var selectedData = [];
    var items = multiselect.dataItems();
    for (var itm in items) {
        selectedData.push(itm.Label, itm.Code);
    }

Glabrous