Forums Ignite UI for ASP.NET Core
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Silvia Ivanova
220
Two ng-templates for igx column (Grid State Persistence)
posted

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();
    }
  }

Parents
  • 700
    Offline posted

    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 Ivanova
    Associate Software Developer

Reply Children