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,
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.
If you require any further assistance on the matter, please let me know.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
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.
Thank you for following up.
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.
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.
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.