JqxTreeGrid is loaded before the data is binded

[smithaParticipant]

Hello,

I’m trying to bind jqxTreeGrid using json data from a json file placed in assets folder. But the grid is loaded before the data is binded. I have tried few events for dataAdapter like loadComplete, downloadComplete nothing seems to work.

Below is my code:

import { Component, ViewChild, Inject } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
import { jqxTreeGridComponent } from ‘jqwidgets-framework/jqwidgets-ts/angular_jqxtreegrid’;
declare var $;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
@ViewChild(‘myTreeGrid’) myTreeGrid: jqxTreeGridComponent;

// dataSource: any = this.appService.getJSON().subscribe(response => {
// return response;
// });

constructor( @Inject(HttpClient)
private http: HttpClient, private appService: appServices) {
}

source: any =
{
dataType: “json”,
dataFields: [
{ name: ‘PartnerBudgetID’, type: ‘number’ },
{ name: ‘childPartnerBudgetID’, type: ‘number’ },
{ name: ‘Partner_BU_Name’, type: ‘string’ },
{ name: ‘PartnerID’, type: ‘number’ },
{ name: ‘Last_year_MGO_ROI’, type: ‘string’ },
{ name: ‘Membership_Type’, type: ‘string’ },
{ name: ‘Last_Period_Sellout’, type: ‘string’ },
{ name: ‘Sellout_Silver_Below’, type: ‘string’ },
{ name: ‘Sellout_Gold_Platinum’, type: ‘string’ },
{ name: ‘Unweighted_Sellout’, type: ‘string’ },
{ name: ‘YoY_SO’, type: ‘string’ },
{ name: ‘HOH_SO’, type: ‘string’ },
{ name: ‘Scaled_Sellout’, type: ‘string’ },
{ name: ‘Projected_Sellout’, type: ‘string’ },
{ name: ‘YOY_CY_PY’, type: ‘string’ },
{ name: ‘Recommended_MDF’, type: ‘string’ },
{ name: ‘Last_year_mdf’, type: ‘string’ },
{ name: ‘BaseLineMDF’, type: ‘string’ },
{ name: ‘Allocated_MDF_Credit’, type: ‘number’ },
{ name: ‘ReasonForVariance’, type: ‘string’ },
{ name: ‘LastYearMDFOrSellout’, type: ‘string’ },
{ name: ‘ProjectedMDFOrSellout’, type: ‘string’ },
{ name: ‘Country’, type: ‘string’ },
{ name: ‘IsEditable’, type: ‘boolean’ }
],
hierarchy:
{
keyDataField: { name: ‘PartnerBudgetID’ },
parentDataField: { name: ‘childPartnerBudgetID’ }
},
id: ‘PartnerBudgetID’,
localData: this.generatejsondata()
};

dataAdapter: any = new jqx.dataAdapter(this.source);
columns: any[] = [
{ text: ‘Partner Name’, pinned: true, dataField: ‘Partner_BU_Name’, width: 200 },
{ text: ‘PartnerID’, pinned: true, dataField: ‘PartnerID’, width: 200, editable: false },
{ text: ‘1H18 MGO ROI’, dataField: ‘Last_year_MGO_ROI’, width: 100 },
{
text: ‘Membership Type’, dataField: ‘Membership_Type’, width: 120, renderer: function (text, align, height) {
return ‘<div style=””><div>Membership</div><div>Type</div></div>’;
}
},
{ text: ‘1H18 Weighted Sellout ($)’, dataField: ‘Last_Period_Sellout’, width: 120 },
{ text: ‘1H18 Sellout to Silver & Below’, dataField: ‘Sellout_Silver_Below’, width: 250 },
{ text: ‘1H18 Sellout to Platinum & Gold’, dataField: ‘Sellout_Gold_Platinum’, width: 120 },
{ text: ‘1H18 Unweighted Sellout”‘, dataField: ‘Unweighted_Sellout’, width: 150 },
{ text: ‘YoY(1H18 vs 1H17)’, dataField: ‘YoY_SO’, width: 150 },
{ text: ‘HoH( 2H18 vs 1H18)’, dataField: ‘HOH_SO’, width: 150 },
{ text: ‘Extrapolated 2H18 Sellout’, dataField: ‘Scaled_Sellout’, width: 150 },
{ text: ‘1H19 M-POWR Projected Weighted Sellout ($)’, dataField: ‘Projected_Sellout’, width: 150 },
{ text: ‘YoY(1H19 Projected vs 1H18)’, dataField: ‘YOY_CY_PY’, width: 150 },
{ text: ‘M – POWR 1H19 Calculated MDF’, dataField: ‘Recommended_MDF’, width: 150 },
{ text: ‘Allocated 1H19 MDF Credit limit’, dataField: ‘Allocated_MDF_Credit’, width: 150 },
{ text: ‘Reason For Variance’, dataField: ‘ReasonForVariance’, width: 250,columnType: ‘template’,
createEditor:(row, cellvalue, editor, cellText, width, height)=>{
let reasonDrpDown=[‘Expand SoW at partner’,
‘Amplify focus on Strategic Priorities’,
‘Develop & incubate new markets’,
‘Offer a differentiated benefit to top HPE Partner Ready partners’,
‘Partner is divesting in HPE’,
‘Partner cannot grow HPE revenue’,
‘Other. See comment’];
editor.jqxDropDownList({ autoDropDownHeight: true, source: reasonDrpDown, width: ‘100%’, height: ‘100%’ });
},
initEditor: (row, cellvalue, editor, celltext, width, height) => {
// set the editor’s current value. The callback is called each time the editor is displayed.
editor.jqxDropDownList(‘selectItem’, cellvalue);
},
getEditorValue: (row, cellvalue, editor) => {
// return the editor’s value.
return editor.val();
},
cellsrenderer:function()
{
return ‘ ‘
}
},
{ text: ‘1H18 Baseline Approved MDF’, dataField: ‘Last_year_mdf’, width: 150 },
{ text: ‘2H18 Baseline approved MDF’, dataField: ‘BaseLineMDF’, width: 150 },
{ text: ‘1H18 MDF/1H18 Sellout’, dataField: ‘LastYearMDFOrSellout’, width: 150 },
{ text: ‘1H19 MDF/1H19 Projected Sellout’, dataField: ‘ProjectedMDFOrSellout’, width: 150 },
{ text: ‘Country’, dataField: ‘Country’, width: 150 }
];

editSettings: any =
{
saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true,
cancelOnEsc: true, saveOnEnter: true, editSingleCell: true, editOnDoubleClick: true, editOnF2: false
};

treeGridOnRowClick(event: any): void {
let args = event.args;
// row’s data.
let rowData = args.row;
// column’s data field.
let columnDataField = args.dataField;

if (rowData.IsEditable == true && (columnDataField == ‘Allocated_MDF_Credit’ || columnDataField == ‘ReasonForVariance’)) {
this.myTreeGrid.setColumnProperty(columnDataField, ‘editable’, true);
}
else {
this.myTreeGrid.setColumnProperty(columnDataField, ‘editable’, false);
}
}
generatejsondata() {
this.http.get(“./assets/testData.json”)
.toPromise()
.then(response => {
return response;
})
}

}

Thank you.

[smithaParticipant]

I also tried what is mentioned in the post #98491, but still no hope.
Appreciate the help !

[HristoParticipant]

Hello smitha,

It happens async. I think at the moment when you make a request to get this data it is not ready.
You could try to set your data when everything is ready. You could try to set the data to the this.source.localdata and after that to use .updateBoundData() method of the jqxTreeGrid.
Please, check your data that you receive to the server request.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[smithaParticipant]

I resolved the issue using this.dataAdapter = new jqx.dataAdapter(this.source); again after this.source.localData

[Author]

Posts