Kendo UI Grid incell editing
Kendo UI Grid incell editing with 'values' column
HTML
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<!--Add Markup for the AutoComplete Widget-->
<p>Savings:
<div id="list"></div>
</p>
CSS
td {
white-space: nowrap;
}
JavaScript
function onDataBound(event) {
$("#list").on("input", "td", function (event){
$("input").on("keydown", function (event) {
if (e.keyCode == 32 && e.shiftKey) {
var cell = $(e.currentTarget);
var cellIndex = cell[0].cellIndex;
var grid = $("#list").data("kendoGrid");
var column = grid.columns[cellIndex];
var dataItem = grid.dataItem(cell.closest("tr"));
alert("Selected value " + dataItem[column.field]);
}
});
});
}
var savings = [{
month: "January",
saving: "$200",
kind: 1
}, {
month: "March",
saving: "$100",
kind: 1
}, {
month: "March sdjhf as dfjh;as",
saving: "$100",
kind: 1
}, {
month: "March",
saving: "$100",
kind: 1
}, {
month: "March",
saving: "$10000",
kind: 1
}, {
month: "December",
saving: "$100",
kind: 1
}, {
month: "March",
saving: "$100",
kind: 1
}, {
month: "March",
saving: "$100",
kind: 2
}, {
month: "March",
saving: "$100",
kind: 3
}, {
month: "March",
saving: "$100",
kind: 1
}];
var savingsDataSource = new kendo.data.DataSource({
data: savings
});
var grid = $("#list").kendoGrid({
dataSource: savingsDataSource,
navigatable: true,
pageable: true,
height: 400,
selectable: "cell",
toolbar: ["create", "save", "cancel"],
columns: [{
field: "month",
title: "Month"
}, {
field: "saving",
template: "#=saving# <span class='k-icon k-i-lock' id='temp' style='float: right; ;' onclick='test()'></span>" ,
}, {
field: "kind",
values: [{
value: 1,
text: "Kind1"
}, {
value: 2,
text: "Kind2"
}, {
value: 3,
text: "Kind3"
}]
}],
editable: true,
dataBound:...