Kendo Grid Excel Emulation

Kendo Grid mocking data entry behaviour.

by c0dedrag0n

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css">
<div id="grid"></div>

JavaScript

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
            },
            schema: {
                model: {
                    fields: {
                        OrderID: {
                            type: "number"
                        },
                        Freight: {
                            type: "number"
                        },
                        ShipName: {
                            type: "string"
                        },
                        OrderDate: {
                            type: "date"
                        },
                        ShipCity: {
                            type: "string"
                        }
                    }
                }
            },
           
 
            serverFiltering: true,
            serverSorting: true
        },
        height: 430,
        filterable: true,
        sortable: true,
        pageable: true,
        navigatable: true,
        editable: "incell",
        columns: [{
            field: "OrderID",
            filterable: false
        },
            "Freight", {
            field: "OrderDate",
            title: "Order Date",
            width: 120,
            format: "{0:MM/dd/yyyy}"
        }, {
            field: "ShipName",
            title: "Ship Name",
            width: 260
        }, {
            field: "ShipCity",
            title: "Ship City",
            width: 150
        }]
    });

    var grid = $("#grid").data("kendoGrid");
    grid.table.bind("keypress", function (e) {
    		console.log("KeyPressed");
        if (e.which !== 0 && e.charCode !== 0 && !e.ctrlKey && !e.metaKey && !e.altKey) {
            
            //get currently navigated cell, this id follows user's navigation
            var activeCell = $("#grid_active_cell");
            
            //don't do anything if...