Iam facing an issue with the dynamic "HeaderText" and "field" in ej grid syncfusion angular2

[Nikhil]

Hi Syncfusion team,

Iam facing an issue with the dynamic "HeaderText" and "field",.

here is my ts file,here iam getting the data from json file using angular2 services and after getting the response iam passing that response to the datagrid as an datasource.

my tsfile:

ngOnInit(){

this.outputopsService.getAll().subscribe(c => {


this.headers=c['Headers'];

this.trends=c['DataArr'];



for (var j = 0; j < this.headers.length; j++) {


this.headers[j]={field:this.headers[j],headerText:this.headers[j]
};


}

});

}


and iam passing whatever getting response as a datasource to the ej-grid and sinppet is


HTML













My actual Json Response (or) json file looks like this:

"Headers":["name","Sep 2015","Oct 2015","Nov 2015","Dec 2015","Jan 2016","Feb 2016","Mar 2016","Apr 2016","May 2016",
"Jun 2016","Jul 2016","Aug 2016","Sep 2016"],

"DataArr":[
{
"name": "Malaysia","Sep 2015": 38,"Oct 2015": 35,"Nov 2015": 29,"Dec 2015": 26,"Jan 2016": 49,
"Feb 2016": 43,"Mar 2016": 52,"Apr 2016": 59,"May 2016": 33,"Jun 2016": 35,"Jul 2016": 26,"Aug 2016": 27,
"Sep 2016": 60
}]
(from above json file i want headers as header text and dataarr as fields)


Output expected : I want the headers to be change dynamically and there corresponding data should display.
Important Note: Headers should change dynamically and there corresponding data should display that to they are coming from the external json file.

Please donot hardcode the headers text and fields i want it from the external json file because the headers are going to change dynamically.



my html file looks like

[allowPaging]="true" [allowSearching]="true" [editSettings]="edit"
[allowFiltering]="true"
[filterSettings]="filterType"
[allowSorting]="true" [pageSettings]="pageSettings"
[columns]="gridcolumns"
[toolbarSettings.toolbarItems]="['search','excelExport', 'pdfExport', 'wordExport']"
[toolbarSettings.showToolbar]="true" (toolbarClick)="ontoolItemClick($event)">








and my ts file:

import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import { DatatableService } from '../datatable.service';
import { Output } from './outputops';
import { EJComponents } from 'ej-angular2';
import { GridComponent } from 'ej-angular2';
@Component({
selector: 'app-datatable',
templateUrl: './datatable.component.html',
styleUrls: ['./datatable.component.css'] //give the path file for Grid control html file.
})
export class DatatableComponent implements OnInit {
public gridData;
public filterType;
public pageSettings;
public Outputops: Output[];
public indexvalue;
public no_of_rows;
public value;
public dataarray;
public headerdata;

public dialog: GridComponent;
public toolbarSettings;



constructor(private datatableservice: DatatableService, http: Http) {
}
ngOnInit() {
this.filterType = { filterType: "excel", maxFilterChoices: "4" };
this.pageSettings = { pageSize: "4" };
this.datatableservice.periodIdFetch().subscribe(c => {
this.Outputops = c;
this.gridData = this.Outputops;
console.log("grid data aafter ",this.gridData);
this.headerdata = this.gridData['Headers'];
console.log("header data",this.headerdata);
this.dataarray = this.gridData['DataArr'];
console.log("dataarray",this.dataarray);

});
}
test(goto) {
console.log("index from test", this.indexvalue);
console.log("gotopage", goto);
this.dialog.widget.gotoPage(goto);
console.log("values", this.value);
}

CellStyleColor(field: number) {
return field > 1 ? 'red' : 'black';
}

ontoolItemClick(e: any) {
if (e.itemName == "Excel Export") {
this.dialog.widget.export('http://js.syncfusion.com/demos/ejServices/api/grid/ExcelExport');
e.cancel = true;
}
else if (e.itemName == "Word Export") {
this.dialog.widget.export('http://localhost:4200/WordExport')
e.cancel = true;
}
else if (e.itemName == "PDF Export") {
this.dialog.widget.export('http://js.syncfusion.com/demos/ejServices/api/grid/PdfExport')
e.cancel = true;
}

}






}


Thanks and regards
Nikhil

[Jayaprakash Kamaraj]

Hi Nikhil, 

Thank you for contacting Syncfusion support. 

We suggest you to use columns method of ejGrid to add/remove/update the columns dynamically in Grid. Please refer to the below help document, code example. 

https://help.syncfusion.com/api/angular2/grid#methods:columns 

            export class AppComponent { 

 

            ngAfterViewInit(){ 

 

                this.Grid.widget.columns("OrderID", "remove");    // remove grid column 

                this.Grid.widget.columns("OrderID", "add");      // Add new column into grid or modified already existing column in the grid. 

 

            } 

 

    @ViewChild('grid') Grid: EJComponents<any, any> 

            ;   // Create grid instance. 

 

        } 

Also, we have already discussed same in the following knowledge base document,  

https://www.syncfusion.com/kb/7483/how-to-add-columns-with-stacked-headers-dynamically 

Regards, 

Jayaprakash K. 

[Nikhil]

Hi Nikhil, 

Thank you for contacting Syncfusion support. 

We suggest you to use columns method of ejGrid to add/remove/update the columns dynamically in Grid. Please refer to the below help document, code example. 

https://help.syncfusion.com/api/angular2/grid#methods:columns 

            export class AppComponent { 

 

            ngAfterViewInit(){ 

 

                this.Grid.widget.columns("OrderID", "remove");    // remove grid column 

                this.Grid.widget.columns("OrderID", "add");      // Add new column into grid or modified already existing column in the grid. 

 

            } 

 

    @ViewChild('grid') Grid: EJComponents<any, any> 

            ;   // Create grid instance. 

 

        } 

Also, we have already discussed same in the following knowledge base document,  

https://www.syncfusion.com/kb/7483/how-to-add-columns-with-stacked-headers-dynamically 

Regards, 

Jayaprakash K. 

Thank you for your  response sir, 

but we want all the headers and fields from external json file.

Note: headers and fields are dynamically changing and  both should come from external json only we donot want headers and fields harcode in ts file. 

my json like below:

"Headers":["name","Sep 2015","Oct 2015","Nov 2015","Dec 2015","Jan 2016","Feb 2016","Mar 2016","Apr 2016","May 2016","Jun 2016","Jul 2016","Aug 2016","Sep 2016"],

"DataArr":[{"name": "Malaysia","Sep 2015": 38,"Oct 2015": 35,"Nov 2015": 29,"Dec 2015": 26,"Jan 2016": 49,"Feb 2016": 43,"Mar 2016": 52,"Apr 2016": 59,"May 2016": 33,"Jun 2016": 35,"Jul 2016": 26,"Aug 2016": 27,"Sep 2016": 60}] 

with above json 

We want headers to be display as headers and data array values as field values.

please send the solution as early as possible 

Thanks and regards    

Nikhil

[Jayaprakash Kamaraj]

Hi Nikhil, 

We suspect that you want to bind data array in Grid and also found that in your external json headers and field names are same. So we suggest you use auto generated columns of Grid. Please refer to the below code example, screenshot and sample. 

    <ej-grid [allowPaging]="true" [pageSettings.pageSize]="pagesize" [dataSource]="gridData"> 

</ej-grid> 

 

export class GridComponent { 

    public gridData: any; 

    public pagesize: number; 

    constructor() { 

        this.gridData = [{"name": "Malaysia","Sep 2015": 38,"Oct 2015": 35,"Nov 2015": 29,"Dec 2015": 26,"Jan 2016": 49,"Feb 2016": 43,"Mar 2016": 52,"Apr 2016": 59,"May 2016": 33,"Jun 2016": 35,"Jul 2016": 26,"Aug 2016": 27,"Sep 2016": 60}]; 

        this.pagesize = 5; 

    } 

} 

 

Sample: http://www.syncfusion.com/downloads/support/forum/130958/ze/angular2-seeds29962767853463090 

Regards, 

Jayaprakash K.