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 .

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 .

• javascript
• c#
• jquery
• asp.net-mvc
• telerik

• What should I do when someone answers my question? – Drag and Drop Commented Jan 17, 2017 at 8:21
• @PierreLebon vote it up! – redwards510 Commented Jan 31, 2017 at 19:21
• @redwards510, are they worthy ? – Drag and Drop Commented Jan 31, 2017 at 21:42
• @PierreLebon actually, I'm going to post an answer that builds on the others in just a second, you should vote that one up ;) – redwards510 Commented Jan 31, 2017 at 23:13
• @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! – redwards510 Commented Jan 31, 2017 at 23:53

6 Answers 6

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]);
}

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"]

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.

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

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

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