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
15
Moving columns that are generated dynamically
posted

Hi,

I a trying to move some columns programatically but for some reason I can't see any effect when I execute the .move.

I have a grid that is generating the columns dinamically based on a property on the component:

    <igx-grid
      #grid
      width="100%"
      height="400px"
      id="lovListgrid"
      [autoGenerate]="false"
      [allowFiltering]="true"
      [displayDensity]="'compact'"
      [data]="(results | async) ?? []"
      [isLoading]="(loadingResults | async) ?? false"
      [pagingMode]="gridMode"
      [page]="(selectedPage | async) ?? 0"
      [totalRecords]="(totalRecords | async) ?? 0"
      (selected)="handleSelect($event)"
      (columnInit)="onColumnInit($event)"
    >
      <igx-paginator
        #paginator
        [(page)]="grid.page"
        [totalRecords]="grid.totalRecords"
        [perPage]="(perPage | async) ?? 0"
        [displayDensity]="grid.displayDensity"
        (pagingDone)="handlePageChange($event.current)"
      >
        <igx-paginator-content>
          <igx-page-nav></igx-page-nav>
        </igx-paginator-content>
      </igx-paginator>
      <igx-grid-toolbar>
        <igx-grid-toolbar-title>LOV Results</igx-grid-toolbar-title>
        <igx-grid-toolbar-actions>
          <igx-grid-toolbar-hiding title="Column Hiding"></igx-grid-toolbar-hiding>
        </igx-grid-toolbar-actions>
      </igx-grid-toolbar>
      <igx-column
        *ngFor="let c of columns ?? []"
        [sortable]="true"
        [filterable]="true"
        [field]="c.field"
        [header]="c.header"
        [dataType]="c.type"
      >
      </igx-column>
    </igx-grid>

I tried to move the columns in the aftercontentinit as well as using the columnInit event but none of them worked for me.

In ngAfterContentInit (after the columns property has been set up)

        let id = this.grid.getColumnByName('id');
        id.move(0);
        let abbreviation = this.grid.getColumnByName('abbreviation');
        abbreviation.move(1);
In columnInit:
  public onColumnInit(columnIgxColumnComponent) {
    if (column.field === 'id') {
      column.movable = true;
      column.move(0);
    }
    if (column.field === 'abbreviation') {
      column.movable = true;
      column.move(1);
    }

I am missing something? 

Thnaks for the support + best regards

Parents Reply Children
No Data