Get data and columns from a service and add columns dynamically on the template

[Gonzalo]

Hi,

I'm using ejs-grid into an Angular component. The component uses asyncPipe and get the data from a service, that returns an Observable with data and columns for the grid.

I want to show the data and columns on the grid and also add two custom columns to grid, but when the data arrives the custom columns isn't show. 

This is an example of the template:

<ng-container *ngIf="data$ | async as tableData">

  <ejs-grid  #table

    [dataSource]="tableData.data"

    [columns]="tableData.columns">

<e-columns>

      <e-column type='checkbox' width='50' [showInColumnChooser]='false'></e-column>

      <e-column *ngFor="let column of tableData.columns"

        [field]='column.field' [headerText]='column.headerText'>

      </e-column>

      <e-column   headerText='Acciones'   width='150' textAlign='Right'>

        <ng-template #template let-data>

           <button class="table-action" >Editar </button>

          <button class="table-action" > Eliminar </button>

        </ng-template>

      </e-column>

    </e-columns>

</ejs-grid>

</ng-container>

This is an example of the component: 

...

@Component({ ... })

export class MyComponent implements OnInit {

  @ViewChild('table') public table: GridComponent;

  data$: Observable<TableData>

  constructor(private tableService: TableService) { }

  ngOnInit(): void {

    this.data$ = this.tableService.getData();

  }

}

...

The method getData() returns an Observable with data with this shape, for example:

export interface TableData{

  data: any[];

  columns: any[];

}

I have seen on this link: documentation, that the Observable should be an object with properties result and count, that it is not my case at the moment. If I pass the data with this properties, how I pass the column info dinamically? in another property of the component? 

My objective is get data and column definition from a service, pass this data to the ejs-grid, and also define custom columns to add to the grid on the template.

How can I get my objective with ejs-grid?

Thanks

[Praveenkumar Gajendiran]

HI Gonzalo,

Greetings from Syncfusion support.

We checked your query and provided code example. In that we infer that the reported issue is occurs due to you are using strongly type for field and headerText property in your Grid column definition.  

Please give those property like below, 

<e-column *ngFor="let column of tableData.columns" field='column.field' headerText='column.headerText'> 

      </e-column> 

If you still face the same issue, please get back to us with the below details that will be helpful for us to proceed further.  

1)                 What is your exact issue scenario? .  

2)                 Is the Grid rendered or not ? or specific dynamic column is not displayed ?  

3)                 Explain your issue scenario with video demonstration . 

Regards,
Praveenkumar G 

[Gonzalo]

Hi Praveenkumar G and thank you for your answer. 

If I change those properties I see column.field and column.headerText as text into the columns.

The details:

1) What is your exact issue scenario? 
2) Is the grid render or not? or specific dynamic column is not displayed?

I have a component with the ejs-grid. The data and columns definition arrives from a service and I use it on the template with the async pipe, as I explained on the previous post. 

The grid render well on the first time, show data and columns definition, also show the two columns that I define on the template: checkbox column to select row, and the actions column.

When I navigate to another page, and I go back to the page that have the component with the grid, the two custom columns dissapear. It seems that when I get the data and column definition again from service, the columns definition on the template not works.

3) Explain your issue scenario with video demonstration

I can't make a video to demonstrate this at the moment.

Thank you for your help

[Praveenkumar Gajendiran]

HI Gonzalo,

Thanks for your update.

By default in EJ2-Grid, when you navigate from one page to another page, the Grid will start re-rendering from the initial process. Please check the below sample for this for your reference.

Sample: https://stackblitz.com/edit/angular-yknppm-5phaed?file=app.component.html

So please ensure that you have got all the columns and data which you have return from the server at the time of re-rendering.  

Please share the screenshot of the columns that you have received from the server at the time of the initial and at the time the page was navigated. Also, please confirm if you have used any Route Reuse Strategy in your sample.

Regards,
Praveenkumar G 

[Gonzalo]

Hi Praveenkumar G, thank you again for your answer.

I had a mistake on the management of the state that the component needs, in this case the data and columns for the grid. I have done some changes and it works right now. I think that the changes of this state triggered some kind of error with the grid.

If I find any problem, I will write for help.

Thank you once again.

[Praveenkumar Gajendiran]

Hi Gonzalo,  

  

Thanks for your update. We are glad that you have resolved the reported problem at your end. 

Please get back to us if you need further assistance.  

  

Regards, 
Praveenkumar G