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.

Can you include your editor code in your OP? It seems to me that the problem is with the editor and the multiselect definition not updating the model. — OnaBai
Just had a thought... could it be anything to do with the model definition? What should the field type be for a MultiSelect -- I'm using string is that right? — Mat
Internally it is an array of strings but when displayed (the input) is a serialization of the array and then a string. You can use map in transport.create / transport.update for converting it to whatever you need in the server (you might also do it in parameterMap (check DataSource documentation) — OnaBai
Thanks for the tip. I've tried to see what's passed to the model on save by simply adding: console.dir(e.model.items) into the Grid's save function. It just displays [object Object] with no properties. I've tried adding data.items = kendo.stringify(data.items); into the transport.update, but that doesn't work either -- just returns "[object Object]". Any suggestions greatly appreciated. — Mat
What would you prefer to send to the server: a string of options separated by comma or an array of options? — OnaBai

OnaBai OnaBai · Accepted Answer · 2013-07-16T10:30:27

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

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.
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.
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/

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

1 Answers