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.
I have been looking into your question and аs I mentioned at the beginning the correct way in this case to use the igx-select component as a template for a given column to edit the cells of the grid is by using the igxCellEditor template and two way data binding [(ngModel)]="cell.editValue", to be able to edit a given cell. If the igxCell template is used and [(ngModel)]="cell.value" then the cell will not be edited, only the value of the igx-select component will be changed and you will experience the same described behavior as in the beginning.
To take advantage of editing the cell with batch editing and reverting previous changes with the button's undo function you need to use the igxCellEditor template and [(ngModel)]="cell.editValue".
By default on single click only cell selection function is performed, but you can handle the cellClick event of the igx-grid component and when the event fires check if the given cell is editable and an additional check can be whether the cell is from a given column, for example, Department, and if it is you can set the editMode of the cell to true to start editing.
<igx-grid #grid [data]="data" [primaryKey]="'Name'" [batchEditing]="true" [autoGenerate]="false" (cellClick)="cellClick($event)"> </igx-grid>
public cellClick(event) { if (event.cell.editable && event.cell.column.field === "Departament") { event.cell.editMode = true; } }
In addition, I have modified previous sample to illustrate this behavior which could be found here. Please test it on your side and let me know how it behaves.
If you require any further assistance on the matter, please let me know.
Regards,
Okay, as I understand, it is not possible to use the igxCellEditor template and [(ngModel)]="cell.editValue" and to show the igx-select like this (s. screenshot below), so that I can change the value with only one click.
Yes, what you note and what we talked about in our conversation is how cell editing is done with the igx-select component template. The screenshot shows the use of igx-select as a representation of the value of the cell, not as a component to edit the value itself. That's why the templates described above and two way data bindig with batch editing and primary key on the grid are used.
I noticed that there is another forum thread where we have again talked about the templating of a given column with the igx-select component and as you can see in the given correspondence and the provided sample the igxCellEditor template is again used together with [(ngModel)]="cell .editValue" as expected.
Hello Georgi, I have another question. Is it possible to make the igx-select editable so the users can add their own text if they can't find a matching item in the dropdown? The field is editable, but the users can now only select an item from the igx-select and cannot write their own text.I hope you can help me. Thank you.
I have been looking into your question and the igx-select component allows a single selection from a predefined list of items, placed in a dropdown. It selects one of several options provided by the dropdown list and by design does not offer the possibility to write and add your own text in the igx-select component. A new item could be added to the item list, but this will also affect all other selects in the other cells of the igx-grid component, so it will simply add new item to the igx-select component.
What I could suggest as an additional approach is to add a new option to the list of the igx-select component, which should have the value "Other". After that, the selectionChanging event of the igx-select will be handled and when the given new option with value "Other" is selected, an igx-dialog component will be opened.
public handleSelection(event){ if(event.newSelection.value === "Other"){ this.dialog.open(); } }
In this igx-dialog component we will create a form with a label and an input where the user can type the given value, and this value with two way data binding will be taken for further processing according to your custom logic.
<igx-dialog #dialog> <form class="signInForm"> <igx-input-group> <igx-prefix> <igx-icon>person</igx-icon> </igx-prefix> <label igxLabel for="departament">Departament</label> <input igxInput type="text" [(ngModel)]="departament" name="departament"/> </igx-input-group> </form> <div igxDialogActions> <button igxButton="raised" (click)="getDepartament()">OK</button> </div> </igx-dialog>
The described scenario could 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.