Kendo UI Grid Incell Editing Context Menu

by LeeMellinger

HTML

<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">
<script src="https://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
<!--Add Markup for the AutoComplete Widget-->
<div>
    <ul id="menu">
        <li>Item 1
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
                <li>Sub Item 3</li>
            </ul>
        </li>
        <li>Item 2
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
                <li>Sub Item 3</li>
            </ul>
        </li>
    </ul>
</div>


  <div id="list">
  </div>

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({    
          filterable: {
              mode: "row",
              extra: false,
              showOperators: false
          },
					dataSource: savingsDataSource,
          columns:[
            { field: "month", title: "Month" },
            { field: "saving" },
            { field: "kind", values: [{value:1, text:"Kind1"},{value:2, text:"Kind2"},{value:3, text:"Kind3"}] }
            ],        
        navigatable: true,
        editable: true
        //edit: edit
    });
});

// var specialKeys = [kendo.keys.UP, kendo.keys.DOWN];

function edit(e) {
    var ddl = e.container.find(".k-dropdown").focus();
    ddl.keydown(function(e) {
        
        if ($.inArray(e.keyCode, specialKeys) > 0) {
            e.stopImmediatePropagation();
        }
    });
}



var ds = [
    {
        text: "Europe"
    },
    {
        text: "Asia"
    }
];

$("#menu").kendoContextMenu({ dataSource: ds, target: '#list'} );