Dynamic columns inside grid based on the columns metadata with template and conditions.

[Kamlesh]

Hi, 

Currently we are using Kendo for all our controls. We have now bought a SyncFusion and trying to move all the controls to ejs.. 

I am facing issues with implementing the grid. Please see below how the Kendo grid is currently developed in my solution. Please note that i have several reports which uses grid control and the below provided Kendo grid is a custom solution for me so that i dont have to implement multiple grid with all the settings.

Issue: I am facing issue with template where i need to loop through each columnsMetadata and generate columns. 

                 once i am inside columnsMetaData, I need to generate each cell and format the values based on the information stored in the object

 

     <kendo-grid [loading]="loading" [data]="gridResults$ | async" [pageSize]="state.take" [resizable]="true"

                  [sortable]="{ mode: 'multiple' }" [sort]="state.sort" [filterable]="menu" [filter]="state.filter" [height]="650"

                  class="font-style" style="width: 100%;" (dataStateChange)="dataStateChange($event)"

                  (scrollBottom)="loadGridData()">

        <ng-container *ngFor="let item of columnsMetadata; let _i = index">

          <kendo-grid-column field="{{item.ColumnName}}" title="{{item.DisplayColumnName}}" [locked]="item.IsLocked"

                             filter="item.DataType" [width]="(_i == 0) ? '250' : '150'">

            <ng-template kendoGridCellTemplate let-dataItem>

              {{

                item.DataType == 'text'

              ? (dataItem[item.ColumnName] | titlecase)

              : item.DataType == 'numeric'

                ? (dataItem[item.ColumnName] | currency :'USD':'symbol':'1.2-2')

                : item.DataType == 'number'

                  ? (dataItem[item.ColumnName] | number)

                  : item.DataType == 'date'

                    ? (dataItem[item.ColumnName] | date)

                    : item.DataType == 'percent'

                      ? (dataItem[item.ColumnName] / 100 | percent:'2.0-3')

                       : item.DataType == 'decimal'

                        ? (dataItem[item.ColumnName] | number:'1.2-2')

                        : (dataItem[item.ColumnName])

              }}

            </ng-template>

          </kendo-grid-column>

        </ng-container>

        <ng-template kendoGridToolbarTemplate>

          <div class="row">

            <kendo-grid-column-chooser></kendo-grid-column-chooser>

            <button mat-raised-button kendoGridExcelCommand color="accent" (click)="exportToExcel()">

              Export to Excel

            </button>

            <span class="

                    k-pager-info

                    k-label">

              Total Items: <b> {{totalResultCount | number}}</b>

            </span>

          </div>

        </ng-template>

        <kendo-grid-excel fileName="temp.xlsx" [fetchData]="exportAllData">

        </kendo-grid-excel>

      </kendo-grid>

======================================================================================================================

This is what i have implemented so far.

 <ejs-grid [dataSource]="reportDataResult.ResultDataTable"

                allowExcelExport="true"

                allowPdfExport="true"

                allowResizing="allowColumnReSizing"

                allowFiltering="true"

                [filterSettings]="filterSettings"

                height="height"

                [allowSorting]="true"

                [allowPaging]="true"

                [pageSettings]="pageSettings"

                [gridLines]="lines"

                [toolbar]="toolbar"

                [contextMenuItems]="contextMenuItems">

        <e-columns>

          <ng-container *ngFor="let item of reportDataResult.ColumnsMetaData; index as i">

            <e-column *ngIf="i == 0;else Show" [field]="item.ColumnName">

            </e-column>

            <ng-template #Show>

              <e-column [field]="item.ColumnName" [width]="400">

              </e-column>

            </ng-template>

          </ng-container>

        </e-columns>

      </ejs-grid>

Attachment: test_f3a53946.7z

[Ajith Govarthan]

Hi Kamlesh, 

Greetings from Syncfusion. 

Based on the attached code example we have prepared sample and in that sample we have dynamically iterated the columns & we also used all the mentioned features in the code examples.  

For your convenience we have attached the sample so please refer the sample for your reference. 

Code example: 

app.component.html 

<ejs-grid #grid [dataSource]='data' id='Grid' [allowExcelExport]="true" [allowPdfExport]="true" 

[allowResizing]="allowColumnReSizing" [allowSorting]="true" [allowPaging]="true" [pageSettings]="pageSettings" 

[gridLines]="lines" [toolbar]="toolbar" [contextMenuItems]="contextMenuItems" [allowFiltering]="true" 

[filterSettings]='filterSettings'> 

<e-columns> 

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

<e-column *ngIf="column.fieldType === 'text'" [field]="column.fieldName" 

[headerText]="column.headerName" [width]="80"></e-column> 

<e-column *ngIf="column.fieldType === 'link'" [headerText]="column.headerName" [width]="80"> 

<ng-template #template let-data> 

{{data.EmployeeID}} 

</ng-template> 

</e-column> 

</ng-template> 

</e-columns> 

</ejs-grid> 

Sample Link: https://stackblitz.com/edit/angular-263829-toggle-grid-view-in-card-h3rnxm?file=app.component.html 

If the above solution doesn’t meet your requirement then please share the below details to validate further on your requirement. 

1. Have you faced any script error while rendering the grid? If yes, share the screenshot of an issue 

2. Share the Syncfusion package version. 

Regards, 

Ajith G.