Igniteui-angular: IgxGrid: Columns won't move when templates are used for either headers or cells or the both and the grid has a column group.

[norikois]

Description

IgxGrid: Columns won't move when templates are used for headers and cells and the grid has a column group.

• igniteui-angular version: 9.1.15, 10.1.4
• browser: Chrome, IE11

Steps to reproduce

1. Run and open the attached sample in a browser.
2. Try moving the "name" column.
3. Try moving the "misc" column group.

Result

Neither the "name" nor the "misc" moves.

Expected result

The columns and column groups move.

Attachments

cas33340-app5.zip

[norikois]

Thank you for the cooperation!
Could you tell me whether this issue is also fixed for IE11?
The customer uses IE11 as well and wants to get fix for IE11 too.

[hanastasov]

Hi @norikois,

I've carefully examined the code that handles column moving in the igx-grid. It properly does all calculations and columns are moved to new positions as expected. However, what happens is that after column moving is finished, the very first change detection cycle in Angular detects a change in the grid columnList collection, which resets the collection back to the original order of columns.

(It is interesting to note that if you move the column through the column move method, then you see the result of the column being moved (because the API move method did nothing more than working with the column collection internally and does not trigger a change detection cycle). Then, mouse over the grid will trigger the change detection cycle and same thing happens - columnList change is detected.)

After further digging into it, I suspect issues has something to do with this issue. In general, the column collection is retrieved from a content children query, but it can't be resolved for a tag/component which is not declared inside the parent content (the issue with the templates being declared in an outside ng-container).

Considering the above, the issue is decided to be resoved as not-to-fix and use the cheap and easy alternative - declare the template inside the column tag itself, not in an <ng-container> outside of it.

[rkaraivanov]

@norikois
I just want to add that the column object exposes setters for its templates, thus you can pass them outside of the declaration of the column tags and it works. In this instance I think the "bug" is just the weird way Angular resolves child queries (especially content based ones) and templates.

Here is the updated template that works:

<div class="grid-wrapper">
  <igx-grid #grid1 [data]="data" height="400px" width="100%" [autoGenerate]="false">
    <ng-container *ngFor="let column of columns">
      <ng-container *ngIf="!column.isGroupHeader">
        <igx-column [field]="column.fieldKey" [header]="column.headerText" [dataType]="column.dataType"
          [headerTemplate]="headerTemplate" [cellTemplate]="cellTemplate" [movable]="column.movable"
          [pinned]="column.pinned">
        </igx-column>
      </ng-container>
      <ng-container *ngIf="column.isGroupHeader">
        <igx-column-group [header]="column.headerText" [movable]="column.movable" [pinned]="column.pinned">
          <igx-column *ngFor="let c of column.columns" [field]="c.fieldKey" [dataType]="c.dataType"
            [header]="c.headerText" [headerTemplate]="headerTemplate" [cellTemplate]="cellTemplate"
            [movable]="c.movable" [pinned]="c.pinned">
          </igx-column>
        </igx-column-group>
      </ng-container>
    </ng-container>
  </igx-grid>
</div>

<ng-template let-column #headerTemplate>
  <div>{{ column.header }}</div>
</ng-template>
<ng-template let-value #cellTemplate>
  <div>{{ value }}</div>
</ng-template>