Column template for specific object in grid data

[Samir Modi]

Hi Team,

I have a grid datasource like this - 

data: [{

        "name": "20201130_default",

        "value": "16H",

        "userObject": {

            "OldRehypoEngineExclusion": 0.0,

            "ApacExclusions": 0.0,

            "Global_Basket_Exclusion": 0.0,

            "Bitcoin_Block": 0.0,

            "MultipleReasons": 5764300.41,

            "US_CA_RecordDate": 2.7653783E7

        }

    },

{

        "name": "20201131_default",

        "value": "16G",

        "userObject": {

            "OldRehypoEngineExclusion": 1.0,

            "ApacExclusions": 0.0,

            "Global_Basket_Exclusion": 0.0,

            "Bitcoin_Block": 0.0,

            "MultipleReasons": 34.41,

            "US_CA_RecordDate": 2.2

        }

    }]

Now i want to have a flat grid with separate e-column for each attribute. The userObject can have additional fields (dynamic). I am able to get columns for name and value but unable to display userObject columns using ng-template.

I am trying to use ngFor for these columns inside ng-template and then binding field and headerText using the object keys.

 <ejs-grid #exclusionsGrid id="exclusionsGrid" [showColumnChooser]='true' [dataSource]='data' [allowExcelExport]="true"

            (excelExportComplete)='excelExportComplete()' [allowFiltering]='true' [filterSettings]="filterOptions" [allowPaging]="true"

            [allowSorting]='true' [sortSettings]='sortOptions' (excelQueryCellInfo)='excelQueryCellInfo($event)' [pageSettings]='initialPage'

            (toolbarClick)='toolbarClick($event)' gridLines='Both' [toolbar]='toolbarOptions'

            (dataBound)='exclusionsDataBound()'>

            <e-columns>

              <e-column field='name' headerText='Test Name'></e-column>

              <e-column field='value' headerText='Total Value'></e-column>

              <ng-template #template *ngFor=let item of userObject | keyvalue">

                <e-column field="item.key"

                          headerText="item.key">

                </e-column>

            </ng-template>

            

            </e-column>

            </e-columns>

          </ejs-grid>

Can you please point me where i am doing it incorrect. Looks like it doesnt get value of userObject inside ngTemplate

[Ajith Govarthan]

Hi Samir, 

 

Thanks for contacting Syncfusion support. 

 

Based on your requirement you want to add columns dynamically for complex fields. So, based on that we have prepared sample in that we have taken the columns definition and dynamically created the columns for complex fields. For your convenience we have attached the sample so please refer the sample for your reference. 

 

Code Example: 

App.component.ts 

 

  public columns = [ 

    { 

      fieldName: "additionlDetails.PhotoPath", 

      headerName: "PhotoPath", 

      fieldType: "image" 

    }, 

    { 

      fieldName: "additionlDetails.Title", 

      headerName: "Title", 

      fieldType: "text" 

    }, 

    { 

      fieldName: "additionlDetails.HireDate", 

      headerName: "Hire Date", 

      fieldType: "text" 

    }, 

    { 

      fieldName: "additionlDetails.ReportsTo", 

      headerName: "Reports To", 

      fieldType: "text" 

    } 

  ]; 

 

App.component.html 

 

<div class="control-section e-tab-section"> 

<div class="e-sample-resize-container"> 

<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> 

<e-column field='FirstName' headerText='Name' width='120' textAlign='Right'></e-column> 

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

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

</ng-template> 

</e-columns> 

</ejs-grid> 

</div> 

</div> 

 

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

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G.