We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

130958 Jun 13,2017 09:58 AM Jun 15,2017 09:05 AM Angular 3
loading
Tags: ejGrid
Nikhil
Asked On June 13, 2017 09:58 AM

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 [Syncfusion]
Replied On June 14, 2017 09:12 AM

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. 


            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,  


Regards, 

Jayaprakash K. 


Nikhil
Replied On June 14, 2017 09:36 AM

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. 


            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,  


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 [Syncfusion]
Replied On June 15, 2017 09:05 AM

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

 


Regards, 

Jayaprakash K. 
  
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;