How to programmatically create a new row and put that row in edit mode in Kendo grid

kendo-grid, kendo-ui

Solution

There are some troublesome scope issues when you try to bind the click event in the template definition itself.

Instead, it is easier to assign the link an ID, and then bind the click event later. Notice that I've given it id=`create`.

headerTemplate: "<a id='create' class='k-button k-button-icontext k-create-alert' id='new-item-button' title='Click to add a new item'><div>New Item</div></a>"

Then in document ready, I bind the click event:

$("#create").click(function () {
    var grid = $("#grid").data("kendoGrid");
    if (grid) {
        //this logic creates a new item in the datasource/datagrid
        var dataSource = grid.dataSource;
        var total = dataSource.data().length;
        dataSource.insert(total, {});
        dataSource.page(dataSource.totalPages());
        grid.editRow(grid.tbody.children().last());
    }
});

The above function creates a new row at the bottom of the grid by manipulating the datasource. Then it treats the new row as a row "edit". The action to create a new row was borrowed from OnaBai's answer here.

Here is a working jsfiddle, hope it helps.

Problem

Original source