When dynamically update the grid columns, the column headers will not be refreshed if the numbers of columns are still the same after update.

[wills]

HI，

When dynamically update the grid columns, the column headers will not be refreshed if the numbers of columns are still the same after update.

First, Add three Col for Grid

Second, Click [Convert], Remove the old Col and Add three new Col.

The Col's header text not change

Third，Click [Convert] again, The Header is refreshed

Example：https://stackblitz.com/edit/angular-5jmw38?file=src%2Fapp.component.html,src%2Fapp.component.ts

[Santhosh Iruthayaraj]

Hi Wills,

Greetings from Syncfusion support.

Upon reviewing your query, we found that the header texts not being updated properly when updating the column values is due to the refresh method being called before the header text values are updated to the Grid. To help resolve this issue, we recommend calling the refresh method inside the setTimeout method. This will ensure that the refresh method is called after the values are updated.

We have provided a code snippet for your reference:

[app.component.ts]

 

  onConvert() {

    .  .  .  .  .

    setTimeout(() => this.grid.refresh())

  }

  onRestore() {

    .  .  .  .  .

    setTimeout(() => this.grid.refresh())

  }

 

We have also updated the sample with the above code snippet for your reference.

Sample: https://stackblitz.com/edit/angular-5jmw38-26xgux?file=src%2Fapp.component.ts

Please let us know if you have any further questions or concerns.

Regards,

Santhosh I

[wills]

HI ,

When the columns used 'template', click [Convert] or [Restore], the Data can't display!

Example：https://stackblitz.com/edit/angular-5jmw38?file=src%2Fapp.component.html,src%2Fapp.component.ts

[Santhosh Iruthayaraj]

Hi Wills,

Based on your query, we have properly rendered the column template when changed the columns dynamically, by re-rendering the entire component. We have prepared a code snippet that will help you achieve the requirement.

You can find the code snippet below.

[app.component.html]

 

<ng-container #outlet></ng-container>

<ng-template #content>

    <ejs-grid #grid [dataSource]="data" height="350" enablePersistence="true">

      .  .  .  .  .

    </ejs-grid>

</ng-template>

<button (click)="onConvert()">Convert</button>

<button (click)="onRestore()">Restore</button>

 

[app.component.ts]

 

import {

  ChangeDetectorRef,

  Component,

  TemplateRef,

  ViewChild,

  ViewContainerRef

} from '@angular/core';

.  .  .  .  .

 

export class AppComponent {

  public data: Object[] = [];

  public visibleShowColumns: any[] = [];

  @ViewChild('grid') grid: any;

 

  @ViewChild('outlet', { read: ViewContainerRef }) outletRef: ViewContainerRef;

  @ViewChild('content', { read: TemplateRef }) contentRef: TemplateRef<any>;

 

  constructor(private cdref: ChangeDetectorRef) {}

 

   .  .  .  .  .

 

  ngAfterViewInit() {

    this.outletRef.createEmbeddedView(this.contentRef);

    this.cdref.detectChanges();

  }

 

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

  private rerender() {

    this.outletRef.clear();

    this.outletRef.createEmbeddedView(this.contentRef);

  }

  onConvert() {

    this.visibleShowColumns.splice(0, 3);

    this.visibleShowColumns.push({

        .  .  .  .  .     

    });

    this.rerender();

  }

  onRestore() {

    this.visibleShowColumns.splice(0, 3);

    this.visibleShowColumns.push({

        .  .  .  .  .      

    });

    this.rerender();

  }

}

 

We have also modified your sample using the above code snippet for your reference.

Sample: https://stackblitz.com/edit/angular-5jmw38-8fqgvi?file=src%2Fapp.component.html,src%2Fapp.component.ts

Please let us know if you have further queries.

Regards,

Santhosh I

[wills]

HI，

The screen flickers when I click the button! How to fix it?

Attachment: flickers_94dbe810.rar

[Santhosh Iruthayaraj]

Hi Wills,

Please note that the flickering occurs because the entire component has to be re-rendered when a change is made. This is how re-rendering works in Angular, we can’t prevent it. However, we have a solution that can help you avoid the flickering when changing columns. You can simply hide and show columns based on the button click using the column.visible property of the Grid, as shown in the code snippet below:

[app.component.html]

 

<e-column

[field]="column.field"

[headerText]="column.name"

[format]="column.format"

[visible]='column.visible'

width="120"

textAlign="Right"

> 

 

[app.component.ts]

 

export class AppComponent {

  .  .  .  .  .

  ngOnInit(): void {

    this.data = orderDetails;

    this.visibleShowColumns.push({

      field: 'OrderID',

      name: 'Order ID',

      format: '',

      visible: true

    });

    this.visibleShowColumns.push({

      field: 'CustomerName',

      name: 'Customer Name',

      format: '',

      visible: true

    });

    this.visibleShowColumns.push({

      field: 'OrderDate',

      name: 'Order Date',

      format: 'yyyy/MM/dd',

      visible: true

    });

    this.visibleShowColumns.push({

      field: 'Freight',

      name: 'Freight',

      format: '',

      visible: false

    });

    this.visibleShowColumns.push({

      field: 'ShipCountry',

      name: 'Ship Country',

      format: '',

      visible: false

    });

    this.visibleShowColumns.push({

      field: 'ShippedDate',

      name: 'Shipped Date',

      format: 'yyyy/MM/dd',

      visible: false

    });

  }

  onConvert() {

    this.switchColumn(true)

  }

  onRestore() {

    this.switchColumn(false)

  }

  switchColumn(key: boolean) {

    this.grid.getColumnByField('OrderID').visible = !key

    this.grid.getColumnByField('CustomerName').visible = !key

    this.grid.getColumnByField('OrderDate').visible = !key

    this.grid.getColumnByField('Freight').visible = key

    this.grid.getColumnByField('ShipCountry').visible = key

    this.grid.getColumnByField('ShippedDate').visible = key

    this.grid.refresh();

  }

}

 

Sample: https://stackblitz.com/edit/angular-5jmw38-4zntku

We hope this solution helps you. Please let us know if you have further queries.

Regards,

Santhosh I