New to Kendo UI for jQuery? Start a free 30-day trial
Making MultiSelect Work as a Custom Grid Editor Component
Environment
Product |
Progress® Kendo UI® Grid, Progress® Kendo UI® MultiSelect |
Version | 2025.2.520 |
Description
I need to use the Kendo UI MultiSelect as a custom editor for a field in the Kendo UI Grid. The field should store multiple selected values and display them appropriately.
This knowledge base article also answers the following questions:
- How can I use MultiSelect for editing array data in Grid cells?
- How do I configure a MultiSelect as a custom editor in Kendo UI Grid?
- How to display multi-selected values in Kendo UI Grid?
Solution
To configure the Kendo UI MultiSelect as a custom editor for a field in the Kendo UI Grid, follow these steps:
- Define a custom editor function for the Grid column.
- Bind the MultiSelect to the appropriate data source and configure the
value
property andchange
events to synchronize the selected values.
Here is an example implementation:
javascript
{
field: "countries",
editor: function (container, options) {
var values = (options.model.countries || "")
.map((s) => s.trim())
.filter((s) => s.length > 0);
$("<select multiple='multiple'/>")
.appendTo(container)
.kendoMultiSelect({
suggest: true,
dataSource: options.values,
valuePrimitive: true,
value: values,
change: function (_) {
var selected = this.value();
options.model.set("countries", selected);
},
});
},
values: vm.countries, // custom property with array of values
template: function() { , // template: how to display text in grid
return item.countries.join(", ");
}
}
Key Points:
- Custom Editor: The
editor
function defines the MultiSelect and binds it to the field values. - Data Source: Replace
window.employees
with the actual array or data source for the MultiSelect. - Value Formatting: Use
.split(",")
and.join(", ")
to handle comma-separated values in the field. - Template: Customize the
template
to display the values correctly.
For a full demonstration of this approach please refer to the next example.
<div id="main">
<div id="grid" data-bind="source: dataSource"></div>
</div>
<script>
(function () {
var multiSelectEditor = function (container, options) {
$('<select data-bind="multiValue:' + options.field + '"/>')
.appendTo(container)
.kendoMultiSelect({
suggest: true,
dataSource: options.values,
valuePrimitive: true
});
};
var singleSelectEditor = function (container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
suggest: true,
dataSource: ['Canada', 'Mexico', 'United States']
});
};
var numericEditor = function (container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
decimals: 2,
min: 0,
format: 'c2'
});
};
var multiSelectArrayToString = function (item) {
return item.countries.join(', ');
};
var vm = kendo.observable({
countries: ['Canada', 'Mexico', 'United States'],
dataSource: new kendo.data.DataSource({
data: [{
id: 1,
product: 'X002',
countries: ['Mexico', 'Canada'],
country: 'Mexico',
price: 0.98
}, {
id: 2,
product: 'X036',
countries: ['United States'],
country: 'Mexico',
price: 2.96
}, {
id: 3,
product: 'X098',
countries: [],
country: '',
price: 45.90
} ],
schema: {
model: {
id: 'id',
fields: {
'id': {
type: 'number'
},
'product': {
type: 'string'
},
'country': {
type: 'string'
},
'countries': {},
'price': {
type: 'number'
}
}
}
}
}),
});
$('#grid').kendoGrid({
columns: [{
field: 'product'
}, {
field: 'countries',
editor: function (container, options) {
var values = (options.model.countries || "").map((s) => s.trim()).filter((s) => s.length > 0);
$("<select multiple='multiple'/>")
.appendTo(container)
.kendoMultiSelect({
suggest: true,
dataSource: options.values,
valuePrimitive: true,
value: values,
change: function (_) {
var selected = this.value();
options.model.set("countries", selected);
}
});
},
values: vm.countries, // custom property with array of values
template: multiSelectArrayToString // template: how to display text in grid
}, {
field: 'country',
editor: singleSelectEditor // function that generates the multiSelect control
}, {
field: 'price',
editor: numericEditor,
format: '{0:c}'
}],
editable: 'incell',
save: function(e){
console.log("save it", e);
}
});
kendo.bind('#main', vm);
})()
</script>