Hello Silvia,

Thank you for following up.

On grid initialization, the undo and commit buttons are disabled. When changes are made to the grid, a given cell or row is edited, then the undo button becomes active when checking if the transaction service for batch editing of the grid can revert the change made, with canUndo accessor, as the disable property of the button is set to check [disabled]="! grid.transactions.canUndo".

<button
      igxButton
      [disabled]="!grid.transactions.canUndo"
      (click)="undo()" >
   Undo
</button>

In the same way, when editing a given cell or row, the commit button becomes active to save the changes made by checking through the transaction service for batch editing of the grid whether there have been changes made to the grid, with getAggregatedChanges method, as the disable property of the button is set to check [disabled]=" grid.transactions.getAggregatedChanges(false).length < 1".

<button
    igxButton
    [disabled]="grid.transactions.getAggregatedChanges(false).length < 1"
    (click)="commit()">
      Commit
    </button>

When you make a change on the cell that is the template with the igx-select component, you can see that the undo and commit buttons become active as described in the scenarios and it is possible to perform the given action as you can see here:

I reviewed and tested the sample I provided and the undo and commit buttons become active when editing a cell and everything works as expected. Please test it again on your side and let me know how it behaves. If you experience the described behavior again please provide more information and steps to reproduce it for further investigation.

In conclusion, please, test the above suggestions and let me know of any other questions on the matter.

Best regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

Hello Silvia,

I have been looking into your question and the described scenarios is because when filtering the column that contains the igx-select component and then selecting a given value in the select component, the value is not assigned to another row, but the row on which the new value is selected disappears by default, because once there is a new selected value, it does not enter the applied filter from the first value. After that the selected value from the igx-select component remains for the next row, this is because in the provided code and sample it is seen that the igx-select you use [(ngModel)]="cell.value", this is not the correct way in this case because the value itself is not changed for the given cell, only the selected value of the igx-select component is changed. In addition to Batch Editing by design you need to set the primary key of the given grid, as well as use the commit function of the transaction service to save the changes. This way it will be possible to use the undo function, and everything will work as expected.

What I could suggest as an approach is to set the field of a given column to the primaryKey property of the igx-grid component and add a button to commit the changes using the commit function of the transaction service to save the changes to save the changes you made since you have a batch editing.

<igx-grid
    #grid
    [data]="data"
    [primaryKey]="'Name'"
    [allowFiltering]="true"
    [filterMode]="'excelStyleFilter'"
    [batchEditing]="true"
    [autoGenerate]="false">
</igx-grid>

<button igxButton [disabled]="!grid.transactions.canUndo" (click)="comit()">Comit</button>

public comit(){
    this.grid.transactions.commit(this.data);
}

After which the given column that is templated with igx-select component will be templated with igxCellEditor directive and will be used instead of [(ngModel)]="cell.value", two way data binding with [(ngModel)]="cell.editValue " to change the value of the given cell and not just change the value of the igx-select component.

<ng-template igxCellEditor let-cell="cell" let-value>
        <igx-select #selectDepartment [(ngModel)]="cell.editValue" [igxFocus]="true">
          <igx-select-item *ngFor="let item of dropDownpDepartmentAdmin" [value]="item">{{ item }}</igx-select-item>
        </igx-select>
      </ng-template>

The described scenarios can be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

More information on how to use an igx-select component as a template for editing a cell in an igx-grid component can be found in this topic of our documentation. You could also find more information about Batch Editing in this documentation topic.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

Hello again,

I created a simple example. Maybe it can be helpful to understand what I mean.

https://stackblitz.com/edit/angular-krxqtm?file=src/app/data/nwindData.ts

What I did:
1) I filtered the first column (Product Name) to "FN"
2) I changed the Product name of the row with Quantity per Unit "10 boxes x 20 bags" to "IT"

- the "IT" is not assigned to the row with Quantity per Unit "10 boxes x 20 bags", but is assigned to the next row of the filtered list (the row with Quantity per Unit "24 - 12 oz bottles").