How do I bind data to headerText in grid

[Yukiko Imazu]

Hello,

I'm working on angular with syncfusion.  I'm using ejs-grid.  I want to set headerText from data from json file in assets instead of directly setting string,

Is it possible to do that?

Instead setting like headerText='Scenario', I want to bind data using {{}} like below.

Regards,

Yukiko

[Thavasianand Sankaranarayanan]

Hi Yukiko, 

Greetings from Syncfusion support. 

We have prepared a sample and we have bound column’s headerText from JSON value from ts file. Please refer the below code example. 

[app.component.html] 

<ejs-grid class="sortingenabled" [dataSource]='data' allowPaging='true'> 

    <e-columns> 

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

            <e-column [field]="column.field" 

                      [headerText]="column.headerText" 

                      [allowEditing]="column.allowEditing" 

                      [isPrimaryKey]="column.isPrimaryKey != null ? column.isPrimaryKey : null" 

                      [width]="column.width"> 

            </e-column> 

        </ng-template> 

    </e-columns> 

</ejs-grid> 

 

--------------------------------------------------------------------------------- 

[app.component.ts] 

export class AppComponent { 

    public data: Object[]; 

    public columns: any; 

    public jsonHeaderText: object[]; 

    constructor( ) { 

 

    } 

 

    public ngOnInit(): void { 

 

        this.data = data.slice(0,50); 

 

        this.jsonHeaderText = [{"OrderID":"Ordering Detail", 

      "CustomerName":"Customer Name Detail","ShipCountry":"Shipping Country", 

      "OrderDate":"Ordering Date"}]; 

 

        this.columns = [{ field: 'OrderID', headerText: this.jsonHeaderText[0]["OrderID"] , isPrimaryKey: true, width: 120, textAlign: 'Right' }, 

    { field: 'Freight', width: 125, format: 'C2' }, 

    { field: 'CustomerID', headerText: 'Customer ID', width: 130 }, 

    { field: 'ShipName', headerText: 'Ship Name', width: 180 }]; 

 

    } 

} 

We have prepared a sample in the following stackblitz link. 

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

Regards, 

Thavasianand S. 

[Yukiko Imazu]

Hi Thavasianand,

Thank you for your help.

We were able to achieve our requirement.

Regards,

Yukiko

[Thavasianand Sankaranarayanan]

Hi Yukiko, 

 

We are happy that the problem has been solved. 

 

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

                          

Regards, 

Thavasianand S.