Open an AutoComplete Custom Editor on a Cell Click in Spreadsheet
Environment
| Product | Progress® Kendo UI® Spreadsheet for jQuery | Progress® Kendo UI® AutoComplete for jQuery |
Description
How can I: 1. Register a custom editor for a cell within the Spreadsheet so that the editor is activated when the user clicks the respective cell? 1. The cell does not show custom icons? 1. The editor deactivates when the user clicks any element outside the popup of the editor?
Solution
The following example demonstrates how to implement the desired scenario.
<div id="spreadsheet" style="width: 100%;"></div>
<div data-visible='true' data-role='window' data-modal='true' data-resizable='false' data-title='Select color' id='editWindow' style='display:none'>
<input id='autocomplete' style='width: 100%;' data-bind='value: value' />
<div style='margin-top: 1em; text-align: right; display:none'>
<button style='width: 6em' class='k-button' data-bind='click: ok'>OK</button>
<button style='width: 6em' class='k-button' data-bind='click: cancel'>Cancel</button>
</div>
</div>
<script>
kendo.spreadsheet.registerEditor("color", function(){
var context, dlg, picker, model;
function create() {
if (!dlg) {
model = kendo.observable({
value: "",
ok: function() {
model.value = $(dlg.element).find("input").val();
context.callback(model.value);
dlg.close();
},
cancel: function() {
dlg.close();
}
});
var el = $("#editWindow");
kendo.bind(el, model);
dlg = el.getKendoWindow();
}
}
function open() {
create();
dlg.open();
dlg.center();
var value = context.range.value();
if (value != null) {
model.set("value", value);
}
}
return {
edit: function(options) {
context = options;
open();
}
}
});
$(function() {
$("#autocomplete").kendoAutoComplete({
dataSource: ["red","blue","yellow", "purple", "orange", "green", "gray", "black", "brown"],
filter: "startswith",
highlightFirst: true,
select: function(e){
$(this.element).val(e.item.text());
$(this.element).closest("div[data-role=window]").find("button:first").click();
}
});
$("#spreadsheet").kendoSpreadsheet({
select: function(e) {
var selectedRange = e.range;
if (selectedRange.values().length === 1 &&
selectedRange.editor() === 'color') {
var sender = e.sender;
setTimeout(function() {
sender._view.openCustomEditor();
$('.k-overlay').on('click', function() {
$("div[data-role=window]").find("button:first").click();
});
}, 0);
}
},
columns: 5,
rows: 10,
sheetsbar: false,
toolbar: true,
sheets: [{
columns: [{
width: 100
},{
width: 100
}],
rows: [{
cells: [
{ value: "Select color:", bold: true },
{ background: "#fef0cd", editor: "color" }
]
}]
}]
});
});
</script>
<style type="text/css">
.k-spreadsheet-action-bar {
display:none !important;
}
.k-spreadsheet-editor-button {
visibility: hidden;
}
</style>