Use MultiSelect as CSV Editor
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | All |
| Browser | All |
| Browser Version | All |
Description
How can I use the Kendo UI MultiSelect as an editor for comma-separated string fields in the Kendo UI Grid widget?
Solution
The following example demonstrates how to implement custom binding and use it for the MultiSelect to edit a string field that contains a list of comma-separated values.
<div id="grid"></div>
<script>
kendo.data.binders.widget.commaseparatedvalue = kendo.data.Binder.extend({
init: function (widget, bindings, options) {
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
this.widget = widget;
this._change = $.proxy(this.change, this);
this.widget.bind("change", this._change);
},
refresh: function () {
var value = this.bindings.commaseparatedvalue.get();
var values = value ? value.split(",") : [];
this.widget.value(values);
},
change: function () {
var value = this.widget.value();
this.bindings.commaseparatedvalue.set(value.join(","));
},
destroy: function () {
this.widget.unbind("change", this._change);
}
});
var dataSource = new kendo.data.DataSource({
data: [{ID: 1, Value: "Value1,Value2"}, { ID: 2, Value: "Value2,Value3"}],
schema: {
model: {
id: "ID",
fields: {
ID: { editable: false, type: "number" },
Value: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
"ID",
{ field: "Value", editor: multiselectEditor},
{ command: ["edit"], title: " "}],
editable: "inline"
});
function multiselectEditor(container, options) {
$("<select data-bind='commaseparatedvalue: " + options.field + "'/>").appendTo(container).kendoMultiSelect({
dataSource: ["Value1", "Value2", "Value3"]
});
}
</script>