grid numeric format
by VadimMalkov
HTML
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
<div id='form'>
<button data-role='button' data-bind='click:log'>
ok
</button>
</div>
<script id='mapItemTmp' type='text/x-kendo-template'>
<span data-bind='text: this'></span>
</script>
<div id="spreadsheet" style="width: 100%;"></div>
JavaScript
function create(map_obj) {
if (!map_obj.dlg) {
map_obj.model = kendo.observable({
value: "",
src: new kendo.data.DataSource({
data: map_obj.context.validation.from_value.data[0]
}),
selChange: function(e) {
map_obj.model.value = e.sender.dataSource.view()[e.sender.select().index()];
}
});
var el = $("<div data-visible='true' data-role='popup' data-origin='bottom left' data-position='top left' data-collision='fit'>" +
" <select id='mapListSel' data-role='listbox' style='width:300px' data-bind='source:src, events:{change:selChange}' data-template='mapItemTmp'></select>" +
"</div>");
kendo.bind(el, map_obj.model);
map_obj.dlg = el.getKendoPopup();
map_obj.dlg.bind("close", function(e) {
map_obj.model.src.filter(null);
});
$(".k-spreadsheet-cell-editor.k-spreadsheet-formula-input").keyup((e) => {
var txt = $(".k-spreadsheet-cell-editor.k-spreadsheet-formula-input").text();
map_obj.model.src.filter({
operator: "contains",
value: txt
});
});
}
}
function open(map_obj) {
create(map_obj);
map_obj.model.src.data(map_obj.context.validation.from_value.data[0]);
map_obj.dlg.setOptions({
anchor: $(".k-spreadsheet-editor-button")
});
map_obj.dlg.open();
map_obj.dlg.wrapper.click((e) => {
map_obj.context.callback(map_obj.model.value);
});
var value = map_obj.context.range.value();
if (value != null) {
map_obj.model.set("value", value);
var listBox = $("#mapListSel").data("kendoListBox");
var op = listBox.items().find(":contains('" + value + "')").parent();
listBox.select(op);
var pDiv = $('#mapListSel').prev(".k-list-scroller.k-selectable");
var iLi = pDiv.find(".k-reset.k-list");
pDiv.scrollTop(pDiv.scrollTop() + op.position().top);
}
}
kendo.spreadsheet.registerEditor("map",...