Kendo Grid 指定位置增加记录

Question

I am trying to insert a new row via the addRow() method to the grid but I want it to be added AFTER the currently selected row on the grid OR BEFORE the currently selected row? Can anyone help with this please? At the moment all I got was:

Grid.addRow(); // 在第1行增加

$(".k-grid-edit-row").appendTo("#Grid tbody"); // 在最后1行增加（配合上面的Grid.addRow()用)

But this inserts a row at the bottom of the table. I need it to add rows at specific positions with the grid which would already have rows.

OnaBai · Accepted Answer · 2014-07-24 11:45:41Z

These are the steps: (在某行前、后插入记录步骤)

Get the selected item
Get the item corresponding to the selected item.
Get the index corresponding to the item that is selected.
Use insert method in DataSource for specifying the position where you want to insert.

Code:

var grid = $("#grid").data("kendoGrid");
// Get selected item
var sel = grid.select();
// Get the item
var item = grid.dataItem(sel);
// Get the index in the DataSource (not in current page of the grid)
var idx = grid.dataSource.indexOf(item);
// Insert element before
grid.dataSource.insert(idx, { /* Your data */ });
// Insert element after
grid.dataSourcer.insert(idx + 1, { /* Your data */ });

See it in action here: http://jsfiddle.net/OnaBai/8J4kr/

EDIT If after inserting the row you want to enter that row in edit mode, you have to remember the position inside the page where you are inserting since editRow works at DOM level:

var grid = $("#grid").data("kendoGrid");
// Get selected item
var sel = grid.select();
// Remember index of selected element at page level
var sel_idx = sel.index(); 
// Get the item
var item = grid.dataItem(sel);
// Get the index in the DataSource (not in current page of the grid)
var idx = grid.dataSource.indexOf(item);
// Insert element before (use {} if you want an empty record)
grid.dataSource.insert(idx, { LastName: "Smith", FirstName: "John", City: "Baiona" });
// Edit inserted row
grid.editRow($("#grid tr:eq(" + ( sel_idx + 1) + ")"));

For after you should do

// Insert element before (use {} if you want an empty record)
grid.dataSource.insert(idx + 1, { LastName: "Smith", FirstName: "John", City: "Baiona" });
// Edit inserted row
grid.editRow($("#grid tr:eq(" + ( sel_idx + 2) + ")"));

See it in action here: http://jsfiddle.net/OnaBai/8J4kr/1/

There is an additional question that is that you might need to move to previous or next page depending if you are inserting before the first row of a page or after the last row of a page (use page for moving between Grip pages).

Thank you for your response. However, in my case I am using inline editing, so I cant really state static data within the grid.datasource.insert(). And only one column is editable which is a dropdownlist. Is there a way of showing the row and the user selecting from the dropdownlist and then it being saved at the correct position? — Simmy Dhanda, Jul 24 '14 at 11:08
I'm not getting what does a dropdownlist have to do with programmatically add a row at a specific position. What is what you are going to insert? When is this inserted? What triggers the insertion? Can you review you original question and put there all the relevant information? — OnaBai, Jul 24 '14 at 11:13
I want to addRow() to the grid for user todo inline editing. But at the moment by default the row gets added either at the top of the grid or there is a work around and it can be added at the bottom of the grid. What I want is for the row to be added not at the bottom or at the top but after or before a selected row already on the grid. In others words once row is added at a specific position for it to be in edit mode? — Simmy Dhanda, Jul 24 '14 at 11:20

Kendo Grid 指定位置增加记录

1 Answer