Selected Kendo UI grid rows to populate select menu?

Question

I have a kendo grid with multiple row selection enabled; I'm trying to populate an external select menu based on a few of the fields from the aforementioned row selection(s); I'm getting nowhere; can this be done? Fiddle examples?

I checked out this fiddle , where they were populating another kendo grid based on what was selected in the first kendo grid; I figured I'd be build select options like:

$("#selectMenu").html("<option value=''></option>");

..but I can't figure out how to get the selected data OUT of the kendo grid..

Answer 1

That code is not very good IMO since it only relies on jQuery instead of using the grid API. You can use the change event to detect row changes, get the selected rows with the select methd and the data items with the dataItem method.

So you can start with something like this:

$("#states").kendoGrid({
    selectable: "multiple",
    dataSource: {
        data: usStates
    },
    change: function() {
        var that = this;
        var html = "";
        this.select().each(function() {
            var dataItem = that.dataItem(this);
            html += "<option>" + dataItem.name +"</option>";
        });
        $("#select").html(html);
    }
});

( demo )