Creating conditional templates inside of a dynamic column grid

[Chris Hammond Ross]

I'm trying to create a grid with dynamic columns, which can display different data structures. I'm also trying to conditionally render markup based on the type of column that is displaying. So far I'm able to render different arrays of columns easily enough, but I'm unable to conditionally render markup based on the type of column.

Here is what I have tried so far:

<ejs-grid #grid [dataSource]="data" [allowResizing]="true" [allowPaging]="true" [allowSorting]="true" [allowFiltering]="false" [pageSettings]="pageSettings" [selectionSettings]="selectionOptions" gridLines="None" (rowSelected)="rowSelected($event)" (rowDeselecting)="rowDeselected($event)" height="100%" class="grid">

<e-columns>

<e-column type="checkbox" [allowResizing]="false" width="50"></e-column>

<ng-template #template ngFor let-col [ngForOf]="colDefs">

<e-column [field]="col.field" [headerText]="col.caption" *ngIf="col.type == 'Text'"></e-column>

<e-column [headerText]="col.caption" *ngIf="col.type == 'Image'">

<ng-template #template let-row>

<img src="{{row.imageUrl}}">

</ng-template>

</e-column>

<e-column [headerText]="col.caption" *ngIf="col.type == 'Boolean'">

<ng-template #template let-row>

<span *ngIf="row[col.field]" class="icons--CheckMark" aria-hidden="false" aria-label="Active" title="Active">&nbsp;</span>

<span *ngIf="!row[col.field]" class="icons--Inactive" aria-hidden="false" aria-label="Inactive" title="Inactive">&nbsp;</span>

</ng-template>

</e-column>

</ng-template>

</e-columns>

</ejs-grid>

Any help would be much appreciated.

[Balaji Sekar]

Hi Chris, 

 

Greetings from the Syncfusion support. 

 

Based on your query we have created a sample with bound the Grid’s column using column.type condition. 

 

We can get the column details on e-column directive using ng-For option it is looping the columns list and we can access the corresponding row details using let-data option then you will achieve your requirement using these options. 

 

Please refer the below code example and sample for more information. 

[default.html] 

  <ejs-grid #grid [dataSource]='data' [allowPaging]='true'> 

    <e-columns> 

      <ng-template #template ngFor let-column [ngForOf]="columns"> 

 

        <e-column *ngIf="column.type == 'string'" [field]="column.field" [headerText]="column.headerText"> 

          <ng-template #template let-data> 

            <span>{{data.Name}}</span> 

          </ng-template> 

        </e-column> 

        <e-column *ngIf="column.type == 'number'" [field]="column.field" [headerText]="column.headerText"> 

          <ng-template #template let-data> 

            <span>{{data.EmployeeID}}</span> 

          </ng-template> 

        </e-column> 

        <e-column *ngIf="column.type == 'boolean'" [field]="column.field" [headerText]="column.headerText"> 

          <ng-template #template let-data> 

            <span>{{data.isVerified}}</span> 

          </ng-template> 

        </e-column> 

      </ng-template> 

    </e-columns> 

  </ejs-grid> 

 

Sample link: https://stackblitz.com/edit/angular-ninkrn-usejux  

 

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

 

Regards, 

Balaji Sekar 

[Chris Hammond Ross]

Hi Balaji,

Thank you for your response.

Unfortunately I'm still having some issues. It seems as though the following doesn't render

     {{data.image.url}}

It just renders [field]="column.field" instead.

I'm also getting errors in the console:

ERROR TypeError: list.getProperties is not a function

    at ComponentBase.push../node_modules/@syncfusion/ej2-angular-base/src/component-base.js.ComponentBase.ngAfterContentChecked (component-base.js:228)

    at GridComponent.ngAfterContentChecked (ej2-angular-grids.js:528)

    at callHook (core.js:3042)

    at callHooks (core.js:3008)

    at executeCheckHooks (core.js:2941)

    at refreshView (core.js:7207)

    at refreshComponent (core.js:8326)

    at refreshChildComponents (core.js:6965)

    at refreshView (core.js:7222)

    at refreshComponent (core.js:8326)

edit: the text editor seems to be stripping the code examples in inputting :(

[Chris Hammond Ross]

I was able to fix the issues I was having by wrapping the component markup in a container with an *ngIf="gridLoaded".

gridLoaded is initially set to false, and then set to true once the grid data has finished loading.

Doing this fixed all of the problems I was having.

[Balaji Sekar]

Hi Chris, 

  

We glad that your issue has been fixed.  

  

Please get back to us if you require further other assistance from us. 

  

Regards, 

Balaji Sekar.