How to programmatically create a new line and put this line in edit mode in the Kendo grid

Question

In my Kendo grid, I am trying to put the "create new item" button in the header (header) of a command column instead of a toolbar. Here is part of my grid definition:

var grid = $("#grid").kendoGrid({ columns: [{ command: { name: "edit", title: "Edit", text: { edit: "", cancel: "", update: "" } }, headerTemplate: "<a onclick ='NewItemClick()' 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>"}, 

My question is: how to create a new line and put this line in edit mode in 'NewItemClick ()'

Answer 1

When trying to bind the click event in the template definition itself, there are some problems with problems.

Instead, it’s easier to assign an ID link and then bind the click event later. Notice that I gave 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 the document, I’ll attach 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, manipulating the data source. Then it treats the new line as the "edit" line. The action for creating a new line was taken from OnaBai's answer here .

Jsfiddle works here , hope this helps.

Answer 2

I would like to finish the gisitgo answer. If your data source needs some time to update when page(...) called, then updating the grid cancels the editor pop-up window. This is prevented by attaching a call to editRow to the "change" event:

 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.one("change", function () { grid.editRow(grid.tbody.children().last()); }); dataSource.page(dataSource.totalPages()); } 

Note. This approach will lead to problems if your grid is sorted because the new line will not necessarily be at the end

Answer 3

I found that problems may occur if you have several pages, for example, the inserted row does not open for editing. Here is some code based on the current index of the copied string.

We also edit the string based on the UID for greater accuracy.

 function cloneRow(e) { var grid = $("#grid").data("kendoGrid"); var row = grid.select(); if (row && row.length == 1) { var data = grid.dataItem(row); var indexInArray = $.map(grid.dataSource._data, function (obj, index) { if (obj.uid == data.uid) { return index; } }); var newRowDataItem = grid.dataSource.insert(indexInArray, { CustomerId: 0, CustomerName: null, dirty: true }); var newGridRow = grid.tbody.find("tr[data-uid='" + newRowDataItem.uid + "']"); grid.select(newGridRow); grid.editRow(newGridRow); //grid.editRow($("table[role='grid'] tbody tr:eq(0)")); } else { alert("Please select a row"); } return false; }