Igniteui-angular: Add custom change to Batch Editing (Transaction Service)

[jdk339]

Question

I want to be able to add changes to a grid without my users having to manually go in and edit each row. Essentially, I'm creating a bulk editing feature outside of the typical grid functionality/API so that users can select rows, open up a form, and apply those form values to the selected rows.

Right now, I have the changes showing up successfully with the following code:

this.grid.selectedRows().forEach((rowUniqueId: number) => {
  const selectedRow = this.dataItems.find(item => item.uniqueId === rowUniqueId);
  selectedRow.prop1 = bulkChange.prop1;
  selectedRow.prop2 = bulkChange.prop2;

  const newTransaction: Transaction = {
    id: rowUniqueId,
    type: TransactionType.UPDATE,
    newValue: selectedRow
  };
  console.log(newTransaction);
  this.grid.transactions.add(newTransaction, selectedRow);
});

However, the "Undo" and "Redo" buttons/methods do not do anything. They work for the usual changes done through row editing, just not when I manually add a transaction.

I think I'm sending the wrong value to the recordRef parameter, but the documentation does not give any example that might lead me towards using the right value.

Thanks in advance.

• igniteui-angular version: 7.2.4
• browser: Chrome 73.0.3683.103

[wnvko]

By default igxGrid uses IgxBaseTransactionService. This service does not support undo and redo. To enable undo and redo you should provide to your component where the grid is IgxTransactionService as described in "Grid batch editing".
Regarding the recordRef you are providing the correct value - this should be a reference to the value of the record in the data source related to the changed item.

[SlavUI]

@jdk339 closing this one as it seems to be answered. Reopen of needed