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.
For using MultiSelect
in Grids there are a couple o questions to consider:
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.template
for serializing it to a string
in order to display values received from the server.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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With