Kendo UI Grid incell editing

Kendo UI Grid incell editing with 'values' column

by karthick Chandran

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(e) {

     $("#list").on("focus", "td", function (e) {         
         $("input").on("keydown", function (event) {
             if (event.keyCode == 13) {
                 setTimeout(function () {
                     var curCell = $("#list").find(".k-state-selected")
                     var eCell = $("#list").find(".k-edit-cell")

                     curCell.removeClass("k-state-selected");
                     curCell.removeClass("k-state-focused");
                     curCell.removeAttr("data-role");
                     curCell.next().addClass("k-state-selected");
                     curCell.next().addClass("k-state-focused");
                     try {                         $('#list').data('kendoGrid').closeCell(eCell);
                     } catch (ex) {
                     }
                     $('#list').data('kendoGrid').select();                     $('#list').data('kendoGrid').editCell(curCell.next());

                 }, 50);

             }
         });
     });
 }

 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:...