Kendo UI Grid incell editing

Kendo UI Grid incell editing with 'values' column

by siliconsoul

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/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", editor: mixedEditor },
            { field: "kind", values: [{ value: 1, text: "Kind1" }, { value: 2, text: "Kind2" }, { value: 3, text: "Kind3"}] }
            ],
                editable: true
            });
        });



        function mixedEditor(container, options) {
            var s = $('<span style="width:100%" ><input type="text" /><button type="button" onclick="alert(\'test\');" >test button</button></span>').appendTo(container);
            container.find("button").mousedown(function(e){                   
                   e.preventDefault();
            });
        }