Kendo Grid with a custom pop-up editor using MultiSelect - cannot get selected items in the model

Question

So, the name pretty much says it all. I am trying to include a new MultiSelect widget in a custom grid popup editor template.

I use the data attribute initialization method and read the dropdown options from the remote data source. All this works fine, but I cannot get the values ​​of the selected elements in the model.

When I save the string, the data array is sent to the server representing the first data item selected in MultiSelect, not a list of selected values, separated by commas.

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

thanks

Edit: Now I used a workaround, but I would be interested to know if there is a “right way” to use MultiSelects with meshes.

The workaround is to add something similar to the Grid configuration:

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

This is an important 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 don't have a select_items definition in the model definition: I use the workaround above to copy the MultiSelect value to items that is in the model. It seems to work, I just don't know why this is necessary.

Answer 1

There are several questions for using MultiSelect in grids:

• The grid editor only supports the column types string , boolean , number and date . Since you need to save the array ... let's say string , you have to get around this.
• Since you are getting an array of values ​​from the server, you will need to use template to serialize it to string in order to display the values ​​received from the server.
• KendoUI cannot guess that you want to use MultiSelect as input, so you need to provide an editor function as well.

Let's look at all these issues:

To solve the question of array of string , the simplest solution tells KendoUI nothing about what it gets.

For template , I'm going to use the JavaScript join method to pull all the values ​​together, separated by the "," character. 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 sends the host a array strings with the cities entered in the Cities field.

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