Hello, I have an igx grid with Excel filtering and batch editing active. One of the columns contains an igx-select from which the user can select a value.
When I filter this column (that contains an igx-select element), then change a value from the shown filtered list, and then undo those changes, the new value I selected from the igx-select list is not reverted, but assigned to a different row. And I only want to undo the changes.When I edit a value of another column (that does not have a igx-select) the value is set up correctly. and the undo action also works fine. So I assume the problem is in the igx-select. Is it possible to use the igx-select on a filtered list and to undo the changed value correctly?
Here are my redo and undo buttons
<div class="buttons-wrapper"> <button igxButton style="margin-top: 40px; margin-left: 0px;" [disabled]="!grid1.transactions.canUndo" (click)="undo()"> <igx-icon>undo</igx-icon> </button> <button igxButton style="margin-left: 0px;" [disabled]="!grid1.transactions.canRedo" (click)="redo()"> <igx-icon>redo</igx-icon> </button> </div>
This is my igx-grid:
<igx-grid igxPreventDocumentScroll #grid1 igxOverlayOutlet [height]="'97%'" width="99%" [pinnedColumnsText]="'pinned'" [batchEditing]="true" [autoGenerate]='false' [data]="sqlData" [primaryKey]="'lot'" [showToolbar]="true" [allowFiltering]="true" [columnHiding]="true" [rowHeight]="20" filterMode="excelStyleFilter" (cellEditDone)="cellEditDoneHandler($event)" (activeNodeChange)="handleChange()" [clipboardOptions]="copyOptions"> <igx-column width="120px" field="department" dataType="string" header="Department" [resizable]="true" [editable]="false" [sortable]="true" [movable]="true" [cellClasses]="greenRowLotClass"> <ng-template igxCell let-cell="cell" let-val> <div [ngClass]="[cell.row.deleted?'upfont' : 'drop-down-grid']"> <igx-select #selectDepartment placeholder="Wähle Abteilung" [overlaySettings]="overlaySettings" [ngClass]="[cell.row.deleted?'upfont' : 'drop-down-grid']" [(ngModel)]="cell.value"> <igx-select-item style="font-size: 12px;" *ngFor="let item of dropDownDepartmentAdmin" [value]="item"> {{ item }} </igx-select-item> </igx-select> </div> </ng-template> <ng-template igxCell let-cell="cell"> <div [ngClass]="[cell.row.deleted?'upfont' : 'text-cell']">{{cell.value}}</div> <button class="action-button" [ngClass]="[cell.row.deleted?'grey-button-deleted-row' : 'black-button-edit-cell']" igxButton="icon" [disabled]="cell.row.deleted" (click)="editSelectedData(cell.id.rowID,cell.column.field, cell.value)"> <igx-icon class="action-icon">edit</igx-icon> </button> </ng-template> </igx-column> </igx-grid>
And here are my undo and redo functions in the .ts file:
public undo() { this.grid1.endEdit(true); this.grid1.transactions.undo(); } public redo() { this.grid1.endEdit(true); this.grid1.transactions.redo(); }
I hope you can help me. Thank you.
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
Amazing! Thank you. I have one more question: is it possible to show the igx-select directly in the cell. Now I need to click two times on the cel: the first time to activate the edit function and the second time to select a value from the drop down list. I want to enable direct selection from the drop down list. I tried to change igxCellEditor with the igxCell in the <ng-template ...> but it did not work.