Angular 4 Data is not loading from Server response in treegrid

[svedavyaParticipant]

Hello Team ,

I am working on a requirement where I fetch the data from Server side (Grails) using observable pattern through my angular service and then i have subscribe method in my Module controller which will invoke data from angular service and do some business logic. Then i assigned this value to localdata to display in JQXTreegrid but it keep says data not found. localdata is not loaded into treegrid due to async issue. Kindly guide mt to solve this issue asap

Below is my code

// Component HTML
<div class=”app-body”>
<main class=”main”>
<!– Main content here –>
<header class=”app-header navbar” style=’margin-top: 15px; position: relative;margin-top: 0px;’>
<div class=”nav navbar-nav”>
<jqxCheckBox (onChange)=”checkBoxChange($event)” style=’margin-left: 10px; float: left; color: #20a8d8;’
[width]=” [height]=” [checked]=’false’>
<span style=”color: #20a8d8″>Hide Booking Actuals</span>
</jqxCheckBox>
</div>
<button (click)=”btnClick()”>Click Me</button>
</header>
<div>
<jqxTreeGrid
(onRowSelect)=”rowSelect($event)”
(onRowUnselect)=”rowUnselect($event)”
(onRowEndEdit)=”rowEndEdit($event)”
(onRowBeginEdit)=”rowBeginEdit($event)”
[width]=”‘100%'”
[height]=”‘650px'”
[columnsHeight]=”’50′”
[source]=”dataAdapter”
[editable]=”true”
[showToolbar]=”true”
[toolbarHeight]=”40″
[renderToolbar]=”renderToolbar”
[altRows]=”true”
[columns]=”columns”
[theme]='”bootstrap”‘
[pageable]=”true”
[pagerMode]=”‘advanced'”
[pageSizeOptions]=”[’50’, ‘100’, ‘150’,’200′]”
[pageSize]=”50″
[ready]=”ready”
[autoRowHeight]=”true”
#TreeGrid>
</jqxTreeGrid>
</div>

</main>
</div>

import {Component, ViewChild, OnInit} from ‘@angular/core’;
import {jqxTreeGridComponent} from ‘jqwidgets-framework/jqwidgets-ts/angular_jqxtreegrid’;
import {DashboardService} from ‘./dashboard.service’
import * as _ from ‘underscore’;
declare var jquery: any;
declare var $: any;
import {environment} from ‘../../environments/environment’;

@Component({
selector: ‘app-dashboard’,
templateUrl: ‘./dashboard.component.html’,
styleUrls: [‘./dashboard.component.css’]
})
export class DashboardComponent implements OnInit {

_dashboardData: any;

constructor(private dashboardService: DashboardService) {
}

ngOnInit(): void {
}

@ViewChild(‘TreeGrid’) treeGrid: jqxTreeGridComponent;
result: any = this.fetchDashboardData();

source: any =
{
localdata: this.fetchDashboardData();,
datatype: ‘json’,
dataFields: [

{name: ‘aggregatedCustomer’, columnType: ‘string’},
{name: ‘salesRegion’, columnType: ‘string’},
{name: ‘subBusinessEntity’, columnType: ‘string’},

{name: ‘finBookingsActuals’, columnType: ‘number’},
{name: ‘sfdcCommit’, columnType: ‘number’},
{name: ‘sfdcWeekByWeekActuals’, columnType: ‘number’},
{name: ‘sfdcActualsPlusCommit’, columnType: ‘number’},
{name: ‘sfdcUpside’, columnType: ‘number’},

],
hierarchy: {
// keyDataField: { name: ‘salesRegion’ },
// parentDataField: { name: ‘salesRegion’ }
},
//id: ‘salesRegion’,

addRow: (rowID, rowData, position, parentID, commit) => {
// synchronize with the server – send insert command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
this.newRowID = rowID;
commit(true);
},
updateRow: (rowID, rowData, commit) => {
commit(true);
},
deleteRow: (rowID, commit) => {
// synchronize with the server – send delete command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
}
};

//dataAdapter: any = new jqx.dataAdapter(this.source);

columns: any[] =
[
// Customer Section Columns
{
text: ‘Customer’,
dataField: ‘aggregatedCustomer’,
width: 120,
editable: false,
//columnType: ‘none’,
cellsalign: ‘center’, align: ‘center’,
pinned: false
},
{
text: ‘Sales Region’,
dataField: ‘salesRegion’,
width: 120,
editable: false,
//columnType: ‘none’,
cellsalign: ‘center’, align: ‘center’,
pinned: false
},
{
text: ‘Sub Business Entity’,
dataField: ‘subBusinessEntity’,
width: 140,
editable: false,
//columnType: ‘none’,
cellsalign: ‘center’, align: ‘center’,
pinned: false
},

// SFDC Section Columns
{
text: ‘SFDC Wk Actuals’,
dataField: ‘finBookingsActuals’,
width: 120,
editable: false,
cellsalign: ‘center’,
align: ‘center’,
columnType: ‘none’,
},
{
text: ‘SFDC Wk Commit’,
dataField: ‘sfdcCommit’,
width: 120,
editable: false,
cellsalign: ‘center’,
align: ‘center’,
columnType: ‘none’,
},
{
text: ‘Wk/ Wk Commit’,
dataField: ‘sfdcWeekByWeekActuals’,
width: 120,
editable: false,
columnType: ‘none’,
cellsalign: ‘center’, align: ‘center’,
},
{
text: ‘SFDC Wk Act + Commit’,
dataField: ‘sfdcActualsPlusCommit’,
width: 140,
editable: false,
columnType: ‘none’,
cellsalign: ‘center’, align: ‘center’,
},
{
text: ‘SFDC Wk Upside’, dataField: ‘sfdcUpside’, width: 120, editable: false,
columnType: ‘none’, cellsalign: ‘center’, align: ‘center’
},

// Actuals and Forecast Section Columns
{
text: ‘Bookings Q1-FY16 A’,
dataField: ‘q1LastFYActuals’,
width: 120,
columnType: ‘none’,
editable: false,
cellsAlign: ‘center’,
align: ‘center’
},
{
text: ‘Bookings Q2-FY16 A’,
dataField: ‘q2LastFYActuals’,
columnType: ‘none’,
width: 120, cellsalign: ‘center’, align: ‘center’,
editable: false,

}
];
ready: any = () => {
//this.treeGrid.expandRow(2);
console.log(“already loaded”);
};

checkBoxChange(event: any): void {
this.showHideColumns(event);
}

private showHideColumns(event: any) {
this.treeGrid.beginUpdate();
if (event.args.checked) {
this.treeGrid.hideColumn(‘q1LastFYActuals’)
this.treeGrid.hideColumn(‘q2LastFYActuals’)
this.treeGrid.hideColumn(‘q3LastFYActuals’)
this.treeGrid.hideColumn(‘q4LastFYActuals’)
this.treeGrid.hideColumn(‘q1CurrentFYActuals’)
this.treeGrid.hideColumn(‘q2CurrentFYActuals’)
this.treeGrid.hideColumn(‘q3CurrentFYActuals’)
this.treeGrid.hideColumn(‘q4CurrentFYActuals’)
}
else {
this.treeGrid.showColumn(‘q1LastFYActuals’)
this.treeGrid.showColumn(‘q2LastFYActuals’)
this.treeGrid.showColumn(‘q3LastFYActuals’)
this.treeGrid.showColumn(‘q4LastFYActuals’)
this.treeGrid.showColumn(‘q1CurrentFYActuals’)
this.treeGrid.showColumn(‘q2CurrentFYActuals’)
this.treeGrid.showColumn(‘q3CurrentFYActuals’)
this.treeGrid.showColumn(‘q4CurrentFYActuals’)
}
this.treeGrid.endUpdate();
}

newRowID = null;
theme: string = ”;
buttonsObject: any = null;

updateButtons(action: string, buttons: any): void {
switch (action) {
case ‘Select’:
//buttons.addButton.jqxButton({ disabled: false });
//buttons.deleteButton.jqxButton({ disabled: false });
buttons.editButton.jqxButton({disabled: false});
buttons.cancelButton.jqxButton({disabled: true});
buttons.updateButton.jqxButton({disabled: true});
break;
case ‘Unselect’:
// buttons.addButton.jqxButton({ disabled: true });
// buttons.deleteButton.jqxButton({ disabled: true });
buttons.editButton.jqxButton({disabled: true});
buttons.cancelButton.jqxButton({disabled: true});
buttons.updateButton.jqxButton({disabled: true});
break;
case ‘Edit’:
// buttons.addButton.jqxButton({ disabled: true });
// buttons.deleteButton.jqxButton({ disabled: true });
buttons.editButton.jqxButton({disabled: true});
buttons.cancelButton.jqxButton({disabled: false});
buttons.updateButton.jqxButton({disabled: false});
break;
case ‘End Edit’:
// buttons.addButton.jqxButton({ disabled: false });
// buttons.deleteButton.jqxButton({ disabled: false });
buttons.editButton.jqxButton({disabled: false});
buttons.cancelButton.jqxButton({disabled: true});
buttons.updateButton.jqxButton({disabled: true});
break;
}
}

renderToolbar = (toolBar) => {
let toTheme = (className) => {
if (this.theme == ”) return className;
return className + ‘ ‘ + className + ‘-‘ + this.theme;
}
// appends buttons to the status bar.
let container: any = $(‘<div class=”btn-toolbar” style=”background: #ffffff;”><div class=”btn-toolbar” style=”padding: 3px; overflow: hidden; position: relative; height: 100%; width: 100%;border:0px solid #cfd8dc”></div></div>’);
let buttonTemplate: any = ‘<div class=” btn-group mr-1″ style=”float: right;margin: 2px;”><div style=”margin: 4px;”></div></div>’;

//let addButton: any = $(buttonTemplate);
let editButton: any = $(buttonTemplate);
//let deleteButton: any = $(buttonTemplate);
let cancelButton: any = $(buttonTemplate);
let updateButton: any = $(buttonTemplate);
//container.append(addButton);
container.append(editButton);
//container.append(deleteButton);
container.append(updateButton);
container.append(cancelButton);

toolBar.append(container);
//addButton.jqxButton({ enableDefault: false, disabled: false, height: 30, width: 30 });
//addButton.find(‘div:first’).text(‘Save’).addClass(‘btn btn-success’);

editButton.jqxButton({cursor: ‘pointer’, disabled: true, enableDefault: false});
editButton.text(‘Edit’).addClass(‘btn btn-info’);

updateButton.jqxButton({cursor: ‘pointer’, disabled: true, enableDefault: true});
updateButton.text(‘Save’).addClass(‘btn btn-success’);

// deleteButton.jqxButton({ cursor: ‘pointer’, disabled: true, enableDefault: false, height: 25, width: 25 });
// deleteButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-delete’));

cancelButton.jqxButton({cursor: ‘pointer’, disabled: true, enableDefault: false});
cancelButton.text(‘Reset’).addClass(‘btn btn-danger’);

this.buttonsObject = {
//addButton: addButton,
editButton: editButton,
//deleteButton: deleteButton,
cancelButton: cancelButton,
updateButton: updateButton,
};

// addButton.click((event) => {
// if (!addButton.jqxButton(‘disabled’)) {
// this.treeGrid.expandRow(this.rowKey);
// // add new empty row.
// this.treeGrid.addRow(null, {}, ‘first’, this.rowKey);
// // select the first row and clear the selection.
// this.treeGrid.clearSelection();
// this.treeGrid.selectRow(this.newRowID);
// // edit the new row.
// this.treeGrid.beginRowEdit(this.newRowID);
// this.updateButtons(‘add’, this.buttonsObject);
// }
// });

editButton.click(() => {
if (!editButton.jqxButton(‘disabled’)) {
this.treeGrid.beginRowEdit(this.rowKey);
this.updateButtons(‘edit’, this.buttonsObject);
}
});
updateButton.click((event) => {
if (!updateButton.jqxButton(‘disabled’)) {
console.log(this.rowKey);
console.log(this.treeGrid.getRow(this.rowKey));
this.treeGrid.endRowEdit(this.rowKey, false);

}
});

cancelButton.click((event) => {
if (!cancelButton.jqxButton(‘disabled’)) {
// cancel changes.
this.treeGrid.endRowEdit(this.rowKey, true);
}
});

// deleteButton.click(() => {
// if (!deleteButton.jqxButton(‘disabled’)) {
// let selection = this.treeGrid.getSelection();
// if (selection.length > 1) {
// for (let i = 0; i < selection.length; i++) {
// let key = this.treeGrid.getKey(selection[i]);
// this.treeGrid.deleteRow(key);
// }
// }
// else {
// this.treeGrid.deleteRow(this.rowKey);
// }
// this.updateButtons(‘delete’, this.buttonsObject);
// }
// });
};
rowKey = null;

rowSelect(event: any): void {
let args = event.args;
this.rowKey = args.key;
this.updateButtons(‘Select’, this.buttonsObject);
};

rowUnselect(event: any): void {
this.updateButtons(‘Unselect’, this.buttonsObject);
};

rowEndEdit(event: any): void {
this.updateButtons(‘End Edit’, this.buttonsObject);
};

rowBeginEdit(event: any): void {
this.updateButtons(‘Edit’, this.buttonsObject);
};

fetchDashboardData(): any {

this.dashboardService.getDashboardData().subscribe(res => {
this._dashboardData = res

var responseData = this._dashboardData;
/// Some business logic to process data and return
return responseData;
});
}
}

Service to fetch data from backend

import {Injectable} from ‘@angular/core’;
import {Http, Response} from ‘@angular/http’;
import ‘rxjs/add/operator/publishReplay’;
import ‘rxjs/add/operator/map’;
import {environment} from ‘../../environments/environment’;
import {Observable} from ‘rxjs/Observable’;

@Injectable()
export class DashboardService {

_dashBoardData: Observable<any>;

constructor(private http: Http) {
}

getDashboardData(): Observable<any> {
return this._dashBoardData = this.http.get(environment.serverUrl + ‘application’).map((res: Response) => res.json())
.publishReplay()
.refCount();
}
}

[Ivo ZhulevParticipant]

Hi Sandeep,

The problem is that the data comes after the widget is created. So you must create the widget after the data comes. One suggestion I can give is to create the widget with lazy-load(using createComponent method) when the subscribe call is executed.
So create a function that creates your widget and execute it inside this.dashboardService.getDashboardData().subscribe(res => { HERE }.
In this way, you create the widget after you receive the data you need.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[svedavyaParticipant]

Hi Ivo Zhulev,

Thank you so much for your quick reply. Is there any document which I can refer for createComponent in angular 4.? Kindly provide the link.

Yes, I got your other suggestion to create a method and call it after my subscribe method to render the data.

Appreciate your support.

Sandeep

[Ivo ZhulevParticipant]

Hi Sandeep,

Go to the our Angular Documentation,
then scroll down to IV. app.component.ts and read all till Events Methods & Properties. There you will find the two ways you can use to create our widgets with Angular.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts