Use MultiSelect as a Custom Cell Editor in Spreadsheet
Environment
Product | Progress® Kendo UI® Spreadsheet for jQuery |
Description
I want to show a popup that contains a MultiSelect so that I can select multiple values for a cell in the Kendo UI for jQuery Spreadsheet.
Solution
The following example demonstrates how to implement this scenario.
<div id="spreadsheet" style="width: 100%;"></div>
<script>
kendo.spreadsheet.registerEditor("multiSelect", function(){
var context, dlg, model;
// Further delay the initialization of the UI until the `edit` method is
// actually called, so here just return the object with the required API.
return {
edit: function(options) {
context = options;
open();
},
icon: "k-font-icon k-i-text"
};
// This function actually creates the UI if not already there, and
// caches the dialog and the model.
function create() {
if (!dlg) {
model = kendo.observable({
value: "",
data: [
{ ProductName: "Product 1", ProductID: 1 },
{ ProductName: "Product 2", ProductID: 2 },
],
ok: function() {
var values = [];
// This is the result when OK is clicked.
// Invoke the callback with the value.
if(model.value.length !== 0){
values = model.value.map((item) => item.ProductName);
context.callback(values);
}
dlg.close();
},
cancel: function() {
dlg.close();
}
});
var el = $("<div data-visible='true' data-role='popup' data-origin='top right' data-position='top left' data-collision='fit' data-width='200'>" +
" <select data-role='multiselect' data-text-field='ProductName' data-value-field='ProductID' data-no-data-template='false' data-bind='value: value, source: data'></select>" +
" <div style='margin-top: 1em; text-align: right'>" +
" <button style='width: 5em' class='k-button' data-bind='click: ok'>OK</button>" +
" <button style='width: 5em' class='k-button' data-bind='click: cancel'>Cancel</button>" +
" </div>" +
"</div>");
kendo.bind(el, model);
// Cache the dialog.
dlg = el.getKendoPopup();
}
}
function open() {
create();
dlg.setOptions({
anchor: $(".k-spreadsheet-editor-button")
})
dlg.open();
var value = context.range.value();
if (value != null) {
model.set("value", value);
}
}
});
$(function() {
$("#spreadsheet").kendoSpreadsheet({
sheetsbar: false,
excel: {
// Required to enable Excel Export in some browsers
proxyURL: "//demos.telerik.com/kendo-ui/service/export"
},
sheets: [{
rows: [{
cells: [
{ value: "Select Items:", bold: true },
{ background: "#fef0cd",
editor: "multiSelect" }
]
}]
}]
});
});
</script>