How do I bind data to headerText in grid

Yukiko Imazu

Asked On May 31, 2019 08:48 PM UTC

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

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On June 3, 2019 10:27 AM UTC

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.

Reply | Reply with quote

Yukiko Imazu

Replied On June 3, 2019 06:36 PM UTC

Hi Thavasianand,

Thank you for your help.

We were able to achieve our requirement.

Regards,

Yukiko

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On June 4, 2019 06:23 AM UTC

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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
145005	May 31,2019 08:48 PM UTC	Jun 4,2019 06:23 AM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US