CODEWITHSUNDEEP
javascriptjqueryasp.net-mvckendo-uimulti-select
hallordylo
hallordylo

Reputation: 53

Get selected data array from kendo multiselect

I am trying to get an array of the selected items from my Kendo multiselect, which is in the editor template of a kendo grid.

The multiselect code:

@(Html.Kendo().MultiSelect()
        .Name("Staff")
        .DataValueField("ID")
        .DataTextField("FullName")
        .BindTo((System.Collections.IEnumerable)ViewData["Staff"])
        .Events(events => events
            .Change("onChange")
        )
        .HtmlAttributes(new { @class = "col-md-7 details-editor" })
    )

I want to extract the selected items using JQuery - specifically, I want the DataValueField, which is an integer. I have tried several things, but have been unable to get the appropriate integers, rather than the index of the item in the ViewData collection. Some of the approaches I have tried. 

var data = $("#Staff").data("kendoMultiSelect").dataItems();
var data = $("#Staff").data("kendoMultiSelect").value();

I don't really know what to do from here, how to use one of the above or a different route to obtain the correct int array.

Thanks for any help!

Upvotes: 1

Views: 4389

Answers (3)

lincstar182
lincstar182

Reputation: 59

The answer is simpler than you would think.

$('#Staff').val();

That will return a comma delimited list of whatever is in your .DataValueField. In your case, a comma delimted list of 'ID'.

Upvotes: 2

Vijai
Vijai

Reputation: 2509

Add a .Select("onSelect") event to the Multiselect and append the Value to hidden element every time when user selects the items using:

function onSelect(e) {
                 var item = e.item;
                var text = item.text();
                  var $data = $('#myHidden');
                  $data.val($data.val() + text);
            };

Upvotes: 0

Ben Smith
Ben Smith

Reputation: 20230

To get the IDs of the selected items, you can write your onChange method as follows:

var onChange = function(e) {
 var arrayOfNames = this.value();
 // Do other stuff here...
};

Documentation for the change event which gets fired can be found here.

I've also written a working example here.

Upvotes: 0

Related Questions