Hello,
I have an igx grid with Grid State Persistence implemented. Within a column I have two ng templates (#editCountryTemplate and #editCountryTemplateEdit). Is it possible to set the two bodyTemplates on the same column and still to use the Grid State Persistence?
Here is my igx column:
<igx-column width="350px" field="country" dataType="string" header="Country [resizable]="true" [editable]="true" [sortable]="true" [movable]="true" [cellClasses]="greenRowClass"> <ng-template #editCountryTemplate igxCellEditor let-cell="cell" let-val> <div class="countryDropDownClass"> <div [ngClass]="[cell.row.deleted?'upfont' : 'drop-down-grid']"> <igx-select #selectCountry placeholder="Select country" [overlaySettings]="overlaySettings" [ngClass]="[cell.row.deleted?'upfont' : 'drop-down-grid']" (selectionChanging)='handleCellCountrySelection($event, cell.id.rowID,cell.column.field, cell.value)'> <igx-select-item style="font-size: 12px;" *ngFor="let item of countryArray" [value]="item"> {{ item }} </igx-select-item> </igx-select> </div> </div> </ng-template> <ng-template #editCountryTemplateEdit 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)="editCountryEditDropDown(cell.id.rowID,cell.column.field, cell.value)"> <igx-icon class="action-icon">edit</igx-icon> </button> </ng-template> </igx-column>
This is the declaration of my ng-templates for the column field "country":
@ViewChild('editCountryTemplate', { static: true }) public editCountryTemplate!: TemplateRef<any>; @ViewChild('editCountryTemplateEdit', { static: true }) public editCountryTemplateEdit!: TemplateRef<any>;
In the onColumnInit() I am trying to assign the ng-templates for the column above:
public onColumnInit(column: IgxColumnComponent) { if (column.field === "country") { column.bodyTemplate = this.editCountryTemplate; column.bodyTemplate = this.editCountryTemplateEdit; column.filters = IgxNumberFilteringOperand.instance(); } }
Hello Silvia,
Thank you for posting in our community!
I have been looking into your question and after observing the provided code snippet what I could say is that the IgxColumnComponent’s bodyTemplate sets the template for the cell when it is not in edit mode, i.e., when using the igxCell directive.
However, when templating the cell editor, i.e., via the igxCellEditor directive, the IgxColumnComponent’s inlineEditorTemplate property should be used inside the columnInit handler.
public onColumnInit(column: IgxColumnComponent) { if (column.field === "country") { column.bodyTemplate = this.editCountryTemplateEdit; column.inlineEditorTemplate = this.editCountryTemplate; } }
Please test this approach on your side and let me know how if behaves.
Looking forward to your reply.
Sincerely,Riva IvanovaAssociate Software Developer
Perfect! Thank you very very much! Have a nice day. :)
I am glad that you find my suggestion helpful. :)
Thank you for using Infragistics components.
Regards,Riva IvanovaAssociate Software Developer
Hello Riva, I faced an issue. When I enter the edit mode (by double-clicking a cell from the column), the filters disappear. Am I missing something? Should I put the ID of the <ng-template> somewhere else, e.g. in the <igx-select>?
Hier is my grid:
<igx-grid igxPreventDocumentScroll #grid1 igxOverlayOutlet [height]="'97%'" width="99%" style="margin-top: 1%; margin-left: 0.5%; margin-right: 0.5%;" toolbarTitle="Toolbar title" [emptyGridMessage]="'Table is empty" [hiddenColumnsText]="'Show/Hide Text'" [pinnedColumnsText]="'pinned'" [batchEditing]="true" [autoGenerate]='false' [data]="countriesArray" [primaryKey]="'codePK'" [showToolbar]="true" [allowFiltering]="true" [columnHiding]="true" [rowHeight]="20" filterMode="excelStyleFilter" (cellEditDone)="cellEditDoneHandler($event)" (activeNodeChange)="handleChange()" [clipboardOptions]="copyOptions" [igxGridState]="stateOptions" (columnInit)="onColumnInit($event)"> COLUMN </igx-grid>
Thank you for following up!
I have been looking into your additional questions and I have prepared a small sample trying to reproduce the described behavior, however, on my side, I was not able to reproduce it and when entering edit mode, the applied filters remain.
This could be observed in the attachment below:
Here could be found my sample for your reference.
Furthermore, as I am not sure of the overall configuration of your application, it would be helpful if you could answer the following questions:
If possible, it would be highly appreciated if you could provide me with a small sample that demonstrates the behavior on your side. Having a sample that I can debug on my side will be extremely helpful in finding the root cause of this behavior and providing you with a solution as soon as possible.
Additionally, please note that the current forum thread is related to Ignite UI for Angular, however, it is posted in our Ignite UI for ASP.NET Core section. For better consistency, when having questions regarding Ignite UI for Angular, please consider posting in the appropriate section here.
Thank you for your cooperation. Looking forward to your reply.
Hello Riva,
thank you for your reply!
Here are the answers to your questions:
1. This behavior occurs only when the templated cell enters the edit mode. This means, if I just double-click on a templated cell with igx-select, then all the filters are removed and all data of the grid is shown.
2. It only occurs when I save the grid state and then reload the page. Otherwise, if I just save the grid state to local storage and don't reload the page, the igx-selector works correctly. The behavior occurs only when restoring the grid (after reloading the page).
3. Without grid persistence the igx-selects work properly.
4. I am almost sure that the problem is version related. I'm using Ignite UI version 12.1.4. Is it possible to use igx-select with Igx Grid State Persistence without updating the version?
I simplified my project (i.e. removed all columns and methods unrelated to grid-state persistence, leaving only the column with the igx-select) and it still didn't work.
Then I integrated your example into an empty component of my project: The behavior was the same as shown on the small video here:
https://www.veed.io/view/d94e7699-a162-4a63-940d-ae2e605d439e?panel=share
Here is the modified sample, that you provided to me. As mentioned, the example works perfectly in StackBlitz, but not on locahost on my project:
https://stackblitz.com/edit/angular-42e27v-hnzxzt?file=src%2Fapp%2Fgrid%2Fgrid-select%2Fgrid-select-sample.component.ts,src%2Fapp%2Fgrid%2Fgrid-select%2Fgrid-select-sample.component.html
Many thanks!
Thank you for your follow-up message!
After further investigating this matter and testing the modified sample locally, what I could say is that, on my side, I was not able to reproduce the described behavior when using Ignite UI for Angular version 15.0.x. When reloading the page and entering edit mode for the templated cell, the filters remain.
This could be observed below:
Additionally, here could be found the same sample using version 12.1.x. Similar as the previous one, when reloading the page, the filters remain.
However, in case you continue to experience this behavior, please keep in mind that according to our support policy version 12.1.4 is considered retired and is no longer eligible for Developer Support Services.
Having this in mind and that the behavior is not reproducible, both locally and in StackBlitz when using a supported version, I would suggest updating your application to any of our currently supported versions, i.e., 14.2.x and 15.0.x, in order to take advantage of all new features, functionalities, and developer support. For more information, you can refer to our official Update guide.
Additionally, in case you want to stick to Ignite UI for Angular version 12, I would suggest referring to our official documentation, which provides the option to select for which of the latest minor versions of Ignite UI for Angular to receive detailed information. Here could be found the documentation for version 12.1.x. Also, another resource is the source code along with the README file of the version, which could be found here.
I believe you will find these resources very helpful in order to investigate the root cause of the described behavior and find a workaround for it.
Let me know if you need any further assistance regarding this matter.