Grid Mixing Popup and Inline

by OnaBai

HTML

<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<link rel="stylesheet" href="    http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="    http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<script src="    http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.web.min.js"></script>
<div id="grid"></div>

CSS

#grid {
    width : 600px;
}

JavaScript

var ds = {
    data: createRandomData(20),
    pageSize: 4,
    schema: {
        model: {
            fields: {
                Id: { type: 'number' },
                FirstName: { type: 'string' },
                LastName: { type: 'string' },
                City: { type: 'string' }
            }
        }
    }
};

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    toolbar: [ { text : "Add new record", name: "popup", iconClass: "k-icon k-add"} ],
    editable: "inline",
    pageable: true,
    columns: [
        { field: "FirstName", width: 100, title: "First Name" },
        { field: "LastName", width: 100, title: "Last Name" },
        { field: "City", width: 100 },
        { command: [ "edit", "destroy" ]}
    ]
}).data("kendoGrid");

$(".k-grid-popup", grid.element).on("click", function () {
    grid.options.editable = "popup";
    grid.addRow();
    grid.options.editable = "inline";
});