Save and Update Grid state in localstorage with data fetched from an Rest API

[Fernando Pestillo]

We created a DTO to only save the Width, Visibility and the TextAlign in the format of an Array for each column.
But we're stuck trying to update the columns saved in local storage with the data fetched from the API

THE ARRAY WITH API DATA:

THE DATA WE'RE BEING USING (grid.columns)

SUMMARY: We're trying save and update the grid state with data fetched from the API, but we're only using textAlign, visible and width for that.

[Pavithra Subramaniyam]

Hi Fernando Pestillo,

Thanks for contacting Syncfusion support.

From your query, we understood that you want to set the width, visibility and text align properties which are obtained from an API request to the Grid columns while it is rendering. If yes, you can achieve your requirement by setting the columns with the new properties using the “changeDataSource” method which provides an option to made changes to the Grid columns.

https://ej2.syncfusion.com/angular/documentation/api/grid/#changedatasource

public ColValueFromAPI: object[] = [

  ['30%', true, 'Center'],

  ['80%', true, ''],

  ['80%', true, ''],

  ['80%', true, ''],

  ['80%', true, 'Center'],

];

 

 

created(args) {

  if (this.isInitial) {

    this.isInitial = false;

    var newColumns = this.grid.columns;

    newColumns.filter((e: any, i: number) => {

      e.width = this.ColValueFromAPI[i][0];

      e.visible = this.ColValueFromAPI[i][1];

      e.textAlign = this.ColValueFromAPI[i][2];

    });

    this.grid.changeDataSource(null, newColumns);

  }

}

 

Sample: https://stackblitz.com/edit/angular-myg5at?file=src%2Fapp.component.ts

If this is not your requirement, please share the Grid code example and a video of explaining your current behavior and expected result which will be helpful for us to provide a better solution as early as possible.

Regards,

Pavithra S