Kendo grid - get current editing row

8
votes

How do you get the current row that's been edited even when it's not selected? I have a batch enabled Kendo grid that is navigatable. My goal is to manually edit data in a column using the dataItem.set() method. However, when you add a row it does not get selected automatically. Hence, vm.testGrid.dataItem(vm.testGrid.select()) cannot be used.

vm.testGrid.dataSource.get(e.model.get("Id")) gets the newly added row, but if multiple rows were added before saving, it will always get the first added row ("Id" is set to auto increment and is automatically generated by the database server, therefore all newly created rows will initially have 0 before saving).

vm.onEdit = function (e) {
    $('input.k-input.k-textbox').blur(function (f) {
        //var data = vm.testGrid.dataItem(vm.testGrid.select());
        var data = vm.testGrid.dataSource.get(e.model.get("Id")); // will always get the firstly added row
        data.set("LookupCol", "1000");
    }
});

Is there a better solution to get the row that's been currently edited? Or is there a better way to edit the current row?

3
javascriptjqueryangularjskendo-gridkendo-datasource

3 Answers

7
votes

The following will give you the data item associated with the current cell:

var dataItem = grid.dataItem(grid.current().closest("tr"));

// You can then set properties as you want.
dataItem.set("field1", "foo");
dataItem.set("field2", "bar");
2
votes

I used the JQuery closest() function:

vm.onEdit = function (e) {
    $('input.k-input.k-textbox').blur(function (f) {
        var data = vm.testGrid.dataItem($(e.container).closest("tr"));
        data.set("LookupCol", "1000");
    }
});
0
votes

You can also write an extension for the grid, e.g. like this

// extend the grid
kendo.ui.Grid.fn.getCurrentDataItem = function() {
  var that = this, current = that.current(), dataItem = null;        
  if (current) {
    dataItem = that.dataItem(current.closest('tr'));
  }        
  return dataItem;
}

JSFiddle example