Grid Column Template

[Ricardo Salas]

I'm having issues when trying to use ng-template to have a custom value in my column. This is my scenario:

I have a column "failed" in my definition. This column can have one of two values: "true" or "false" (as strings, no booleans). When the value is "false" I want to display "F" in the cell. When the value is "true" I want the cell to be empty. I'm having multiple issues with this: first the template is not working, the words "false" and "true" are shown instead of "F" or empty. The second issue is that when trying to sort the columns the data in the grid disappears. I say this second issue is related to the template because when I remove the code to change the column's template the issue disappears. The third issue is that in my scenario I need to change multiple times the columns definition, they can change between each request. For whatever reason when changing the columns definition multiple times and having the code to change the column template causes the data to stop being loaded in the grid.

I've have prepared an example where these issues can be seen: 

https://stackblitz.com/edit/syncfusion-grid-test-2?file=app.component.ts

Each time you click the "Load Data" button the columns definition will alternate between 2 sets.

Based on this example can you tell me:

• How to correctly use the ng-template in a column to display either "F" or empty based on the conditions explained above?
• How to correctly use the ng-template in a column so the data doesn't disappear after sorting any column?
• How to correctly use the ng-template in a column so that I can switch multiple times the columns definition in a grid without having issues?

Thanks

[Thiyagu Subramani]

Hi Ricardo, 

Thanks for contacting Syncfusion forum. 

Based on your shared information we suspect that your reported issues may reproduced while template column doesn’t created properly (template defined after column module generated). So for your reported issue we suggest to define template before creating column module in Grid.  

Please refer to the below code and sample link. 

dataBound(): void { 

    this.grid.autoFitColumns(); 

  } 

  loadData(): void { 

    if (this.loadData1) { 

      this.colSet1[3].template = this.failedColumnTemplate; 

      this.columns = this.colSet1; 

      this.gridData = this.dataSet1; 

    } else { 

      this.colSet2[2].template = this.failedColumnTemplate; 

      this.columns = this.colSet2; 

      this.gridData = this.dataSet2; 

    } 

    this.loadData1 = !this.loadData1; 

  } 

Sample link: https://stackblitz.com/edit/syncfusion-grid-test-2-qgkrk4?file=app.component.ts 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[Ricardo Salas]

Worked perfectly, thanks.

[Thiyagu Subramani]

Hi Ricardo, 

Thanks for your update. 

We are happy to hear that the provided solution works at your end. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S