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

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
});

$(function() {
    $("#list").kendoGrid({
        dataSource: savingsDataSource,
         columns:[
            { field: "month", title: "Month" },
            { field: "saving" },
            { field: "kind", values: [{value:1, text:"Kind1"},{value:2, text:"Kind2"},{value:3, text:"Kind3"}] }
            ],
        editable: true,
        navigatable: true
    });
});