Kendo Grid with custom popup editor using MultiSelect - can't get selected items in model

Question

So the title pretty much says it all. I'm trying to incorporate the new MultiSelect widget into a Grid's custom popup editor template.

I'm using the Data Attribute Initialization method and reading the dropdown options from a remote dataSource. This is all working okay, but I can't get the values of the selected items into the model.

When I save the row, an array of data is sent to the server representing the first data item selected in the MultiSelect, rather than a comma-separated list of selected values.

Any ideas how I can get the MultiSelect value (list/array of selected values) into the grid model?

Thanks

Edit: I've now used a workaround, but I'd be interested to know if there's a 'proper way' to use MultiSelects with Grids.

The workaround is to add something like this to the Grid's configuration:

save: function(e) { 
    e.model.items = $('#select_items').data("kendoMultiSelect").value();
}

This is the relevant part of the popup editor template:

<input name="select_items" id="select_items" data-value-field="id" 
data-text-field="description" data-source="itemsDataSource" 
data-role="multiselect" data-auto-bind="false" data-item-template="itemList">

I've not got select_items in the model definition: I'm using the workaround above to copy the MultiSelect's value to items which is in the model. This seems to work, I just don't know why it is necessary.

Answer 1

For using MultiSelect in Grids there are a couple o questions to consider:

1. Grid editors only support as type for columns string, boolean, number and date. Since you will want to save an array of ... let's say string you will have to work around this.
2. Since you are receiving an array of values from the server, you will have to use a template for serializing it to a string in order to display values received from the server.
3. KendoUI is not able of guessing that you want to use a MultiSelect as input so you have to provide and editor function.

Let's work around all these questions:

To solve the question of array of string the simplest solution is not saying anything to KendoUI about what is receiving.

For the template, I'm going to be using the JavaScript join method to pull all the values together separated by a ", ". Something like:

{ field: "Cities", template: "#= Cities.join(', ') #" }

Finally for the editor, I use:

{ field: "Cities", template: "#= Cities.join(', ') #", editor : citiesEditor }

function citiesEditor(container, options) {
    $("<select multiple='multiple' data-bind='value : Cities'/>").appendTo(container).kendoMultiSelect({
        dataSource: citiesDS
    });
}

Where in my case citiesDS is just an array of string with the name of valid Cities.

var citiesDS = [
    "Boston", "Kirkland", "London", "New York", "Philadelphia", "Redmond", "Seattle", "Tacoma"
];

When you update (save), it will send to the host an array of strings with the cities introduced in Cities field.

Example: here http://jsfiddle.net/OnaBai/Q2w7z/