ERROR TypeError: Cannot read property 'host' of null on treegrid createComponent

[svedavyaParticipant]

Hi Team,

I am creating treeGird after I receive ajax response from backend, and I also have a requirement to change the data on server side filter for this to test the functionality i have added a rehresh button to check if everything works fine recreating the grid with fewer records but on button click event if i call the same method i am calling from constructor i am getting this error as ERROR TypeError: Cannot read property ‘host’ of null and looking at code i identified the host is becoming as null at line in my console this.widgetObject = jqwidgets.createInstance(this.host, ‘jqxTreeGrid’, options); // this.host is becoming null. Below is my code kindly check and let me know what mistake am doing here please , Appreciate your kind help.

// template code
<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 Bookings Actuals</span>
</jqxCheckBox>
</div>
<div class=”nav navbar-nav btn-group mr-1″ style=”float: left; margin-left: 20px;”>
<jqxButton class=” btn btn-primary”#jsonExport (onClick)=”jsonExportClick()”>Export</jqxButton>
</div>
<div class=”nav navbar-nav btn-group mr-1″ style=”float: left; margin-left: 20px;”>
<jqxButton class=” btn btn-primary”#jsonExport (onClick)=”refreshGrid()”>RefreshData</jqxButton>
</div>
<div class=”nav navbar-nav ml-auto”>
<span class=”alert” [ngClass]=”{‘alert-success’: successMessage , ‘alert-danger’:errorMessage} ” role=”alert”style=” margin-right: 50px;font-size: 13px;font-weight: bold”>{{message}}</span>
</div>
</header>
<div>
<jqxTreeGrid #treeGridReference [auto-create]=”false”
(onRowSelect)=”rowSelect($event)”
(onRowUnselect)=”rowUnselect($event)”
(onRowEndEdit)=”rowEndEdit($event)”
(onRowBeginEdit)=”rowBeginEdit($event)”
[width]=”‘100%'”
[filterable]=”true”
[height]=”‘660px'”
[columnsHeight]=”’50′”
[editable]=”true”
[showToolbar]=”true”
[toolbarHeight]=”60″
[renderToolbar]=”renderToolbar”
[altRows]=”true”
[theme]='”metro”‘
[pageable]=”true”
[pagerMode]=”‘advanced'”
[pageSize]=”15″
[pageSizeMode]=”‘root'”
[autoRowHeight]=”true”>
</jqxTreeGrid>
</div>
<div>
<jqxLoader #jqxLoader
[imagePosition]=”‘top'”
[width]=”100″
[height]=”60″>
</jqxLoader>
</div>

</main>
</div>

//Component code — added inline comments
import {Component, ViewChild, OnInit, AfterViewInit} from ‘@angular/core’;
import {jqxTreeGridComponent} from ‘jqwidgets-framework/jqwidgets-ts/angular_jqxtreegrid’;
import {jqxLoaderComponent} from ‘jqwidgets-framework/jqwidgets-ts/angular_jqxloader’;
import {DashboardService} from ‘./dashboard.service’
import * as _ from ‘underscore’;
declare var jquery: any;
declare var $: any;
import {CsvService} from “angular2-json2csv”;
@Component({
selector: ‘app-dashboard’,
templateUrl: ‘./dashboard.component.html’,
styleUrls: [‘./dashboard.component.css’]
})
export class DashboardComponent implements AfterViewInit {

constructor(private dashboardService: DashboardService, private _csvService: CsvService) {
}

@ViewChild(‘treeGridReference’) treeGrid: jqxTreeGridComponent;
@ViewChild(‘jqxLoader’) jqxLoader: jqxLoaderComponent;
pagtiationParams: any = {}
currentRow: any = {}
hierarchialDataList: any = {}
productFamilyList: any = []
filteredPFBySBE: any = []
userRoles: any = {}
message: any;
exportData: any;
successMessage: boolean = false;
errorMessage:boolean = false
ngAfterViewInit(): void {
this.jqxLoader.open();
this.pagtiationParams = {offset: 0, limit: 20}
this.fetchGridData(this.pagtiationParams,false);
this.getHierarchicalData();
this.getProductFamilyList();
}

private getProductFamilyList() {
this.dashboardService.getProductFamilies()
.subscribe(
result => {
this.productFamilyList = result.productFamilies;
}
//error => this.errorMessage = <any>error
);
}

_lockedRows: any [];
newRowID = null;
theme: string = ”;
buttonsObject: any = null;
currentDFTObject: any = {}

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

private showHideColumns(event: any) {
this.treeGrid.beginUpdate();
if (event.args.checked) {
this.treeGrid.hideColumn(‘fy11’)
this.treeGrid.hideColumn(‘fy12’)
this.treeGrid.hideColumn(‘fy13’)
this.treeGrid.hideColumn(‘fy14’)
this.treeGrid.hideColumn(‘fy21’)
this.treeGrid.hideColumn(‘fy22’)
this.treeGrid.hideColumn(‘fy23’)
this.treeGrid.hideColumn(‘fy24’)
}
else {
this.treeGrid.showColumn(‘fy11’)
this.treeGrid.showColumn(‘fy12’)
this.treeGrid.showColumn(‘fy13’)
this.treeGrid.showColumn(‘fy14’)
this.treeGrid.showColumn(‘fy21’)
this.treeGrid.showColumn(‘fy22’)
this.treeGrid.showColumn(‘fy23’)
this.treeGrid.showColumn(‘fy24’)
}
this.treeGrid.endUpdate();
}

fetchGridData(paginationParams: any,refreshGrid:any): void {
this.dashboardService.getDashboardData(paginationParams).subscribe(res => {

var responseData = res.data;
this.userRoles = res.userAccessRoles;
var parentRows: any [] = [];
var uniqCustSrRecords = _.where(responseData,{isOpportunity:true});

_.each(uniqCustSrRecords, function (uniqCustSrRecord) {
// fetch customer records
var customerRecords: any[] = _.where(responseData, {‘aggregatedCustomer’: uniqCustSrRecord.aggregatedCustomer,’salesRegion’:uniqCustSrRecord.salesRegion});

//iterate and assign the parentId
var parentId: any;
_.each(customerRecords, function (customer: any) {
if (customer.aggregatedCustomer !== null && customer.subBusinessEntity !== null && customer.productFamily !== null) {
parentId = _.filter(customerRecords, function (customerRecord) {
if (!customerRecord.productFamily && customerRecord.subBusinessEntity == customer.subBusinessEntity)
return customerRecord
})[0].id
customer[“parentId”] = parentId;
parentRows.push(parentId);
} else if (customer.aggregatedCustomer !== null && customer.subBusinessEntity !== null) {
if (customer.productFamily == null) {
parentId = _.filter(customerRecords, function (customerRecord) {
if (!customerRecord.productFamily && !customerRecord.subBusinessEntity)
return customerRecord
})[0].id
customer[“parentId”] = parentId;
parentRows.push(parentId);
parentRows.push(customer.id)
}
}
else {
customer[“parentId”] = null
}
});
});
this.createAndLoadGrid(responseData, res.fiscalYearMapping, parentRows,refreshGrid);
});
}

private createAndLoadGrid(responseData: any, columnNames: any, parentRows: any[],refreshGrid:any) {
console.log(“Response Data is as below”);
console.log(responseData);

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

let exportSettings: any =
{
columnsHeader: true,
hiddenColumns: false,
//serverURL: null,
characterSet: null,
collapsedRecords: true,
recordsInView: true,
fileName: null
}

let source: any =
{
dataType: ‘array’,
dataFields: [
{name: ‘id’, type: ‘number’},
{name: ‘parentId’, type: ‘number’},
{name: ‘pfId’, type: ‘number’},
{name: ‘sbeId’, type: ‘number’},
{name: ‘isOpportunity’, type: ‘boolean’},
{name: ‘userDefined’, type: ‘boolean’},

// Customer Section Data fields
{name: ‘aggregatedCustomer’, type: ‘string’},
{name: ‘salesRegion’, type: ‘string’},
{name: ‘subBusinessEntity’, type: ‘string’},

// SFDC Section Data fields
{name: ‘finBookingsActuals’, type: ‘number’},
{name: ‘sfdcCommit’, type: ‘number’},
{name: ‘sfdcWeekByWeekActuals’, type: ‘number’},
{name: ‘sfdcActualsPlusCommit’, type: ‘number’},
{name: ‘sfdcUpside’, type: ‘number’},

// Forecast and actuals Section Data fields

{name: ‘fy11’, type: ‘number’},
{name: ‘fy12’, type: ‘number’},
{name: ‘fy13’, type: ‘number’},
{name: ‘fy14’, type: ‘number’},
{name: ‘fy21’, type: ‘number’},
{name: ‘fy22’, type: ‘number’},
{name: ‘fy23’, type: ‘number’},
{name: ‘fy24’, type: ‘number’},

// Product family Section Data fields
{name: ‘productManager’, type: ‘string’},
{name: ‘productFamily’, type: ‘string’},
{name: ‘pmBottomsUp’, type: ‘number’},
{name: ‘pmRisk’, type: ‘number’},
{name: ‘pmUpside’, type: ‘number’},
{name: ‘pmProbability’, type: ‘number’},
{name: ‘pmEstimatedQ1FyForecast’, type: ‘number’},
{name: ‘pmEstimatedQ2FyForecast’, type: ‘number’},
{name: ‘pmEstimatedQ3FyForecast’, type: ‘number’},
{name: ‘pmEstimatedQ4FyForecast’, type: ‘number’},
{name: ‘pmComments’, type: ‘string’},
{name: ‘pmTimeStamp’, type: ‘string’},

// Business Analyst Section Data fields

{name: ‘baCurrentSalesForecast’, type: ‘number’},
{name: ‘baBottomsUp’, type: ‘number’},
{name: ‘baRisk’, type: ‘number’},
{name: ‘baUpside’, type: ‘number’},
{name: ‘baProbability’, type: ‘number’},
{name: ‘criticalDeal’, type: ‘string’},
{name: ‘baStatus’, type: ‘string’},
{name: ‘baComments’, type: ‘string’},
{name: ‘baExecutiveSummary’, type: ‘string’}
],

hierarchy: {
keyDataField: {name: ‘id’},
parentDataField: {name: ‘parentId’}
},
id: ‘id’,
addRow: (rowID, rowData, position, parentID, commit) => {
this.currentDFTObject = {}
this.newRowID = rowID;
commit(true);
},
updateRow: (rowID, rowData, commit) => {
rowData[‘parent’] = null;
if (rowData[‘pfId’] == null) {
rowData[‘pfId’] = this.currentDFTObject.pfId;
}
if (rowData[‘sbeId’] == null && rowData[‘isOpportunity’] == true) {
rowData[‘sbeId’] = this.currentDFTObject.sbeId;
rowData[‘userDefined’] = this.currentDFTObject.userDefined;
}
console.log(rowData);

this.dashboardService.updateDft(rowData)
.subscribe(
result => {
console.log(result);
this.currentDFTObject.pfId = result.pfId;
this.currentDFTObject.sbeId = result.sbeId
this.currentDFTObject.userDefined = result.userDefined
this.successMessage = true;
this.message = “Row has been updated successfully!”;
commit(true);
if(result.sbeId) {
this.treeGrid.updateBoundData();
}
},
error => {
commit(false);
//this.errorMessage = <any>error;
}
);
},
deleteRow: (rowID, commit) => {
let deleteObject = this.treeGrid.getRow(rowID);
deleteObject[‘parent’] = null;
if (deleteObject[‘pfId’] == null) {
deleteObject[‘pfId’] = this.currentDFTObject.pfId;
}
if (deleteObject[‘sbeId’] == null && deleteObject[‘isOpportunity’] == true) {
deleteObject[‘sbeId’] = this.currentDFTObject.sbeId;
deleteObject[‘userDefined’] = this.currentDFTObject.userDefined;
}
this.dashboardService.deleteDft(deleteObject)
.subscribe(
result => {
this.currentDFTObject = {}
this.errorMessage = true;
this.message = “Row has been deleted successfully!”;
commit(true);
//this.treeGrid.updateBoundData();
},
error => {
commit(false)
//this.errorMessage = <any>error;
}
);
//commit(true);
}
};
source.localData = responseData;
let dataAdapter: any = new jqx.dataAdapter(source);

let treeGridSettings: jqwidgets.TreeGridOptions =
{
height: “auto”,
width: ‘100%’,
source: dataAdapter,
editable: true,
filterable: true,
pageSize: 200,
exportSettings:exportSettings,
editSettings:editSettings,
//pageable: true,
//columnsResize: true,
ready: (): void => {
this.setBusinessRules();
},
columns: [
//Customer Section Columns
{
text: ‘Customer’,
dataField: ‘aggregatedCustomer’,
width: 275,
editable: false,
columnType: ‘none’,
cellsalign: ‘left’,
align: ‘center’,
pinned: true,
createEditor: (row, cellvalue, editor, cellText, width, height) => {
//construct the editor.
let source = this.hierarchialDataList.aggregatedCustomer;
editor.jqxComboBox({
promptText: “Please Choose:”,
autoDropDownHeight: true,
source: source,
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.jqxComboBox(‘selectItem’, cellvalue);
},
getEditorValue: (row, cellvalue, editor) => {
// return the editor’s value.
return editor.val();
}
},
{
text: ‘Sales Region’,
dataField: ‘salesRegion’,
width: 140,
editable: false,
columnType: ‘none’,
cellsalign: ‘left’,
align: ‘center’,
pinned: true,
createEditor: (row, cellvalue, editor, cellText, width, height) => {
//construct the editor.
let source = this.hierarchialDataList.salesRegion;
editor.jqxDropDownList({
autoDropDownHeight: true,
source: source,
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();
}
},
{
text: ‘Sub Business Entity’,
dataField: ‘subBusinessEntity’,
width: 220,
editable: false,
columnType: ‘none’,
cellsalign: ‘left’,
align: ‘center’,
pinned: true,
createEditor: (row, cellvalue, editor, cellText, width, height) => {
//construct the editor.
let source = this.hierarchialDataList.subBusinessEntity;
editor.jqxDropDownList({
autoDropDownHeight: true,
source: source,
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();
}
},
// SFDC Section Columns
{
text: ‘SFDC Wk Actuals’,
dataField: ‘finBookingsActuals’,
width: 120,
editable: false,
cellsalign: ‘right’,
align: ‘center’,
columnType: ‘none’,
cellsFormat: ‘c’,
},
{
text: ‘SFDC Wk Commit’,
dataField: ‘sfdcCommit’,
width: 120,
editable: false,
cellsalign: ‘right’,
align: ‘center’,
columnType: ‘none’,
cellsFormat: ‘c’,
},
{
text: ‘Wk/ Wk Commit’,
dataField: ‘sfdcWeekByWeekActuals’,
width: 120,
editable: false,
columnType: ‘none’,
cellsalign: ‘right’, align: ‘center’,
cellsFormat: ‘c’,
},
{
text: ‘SFDC Wk Act + Commit’,
dataField: ‘sfdcActualsPlusCommit’,
width: 140,
editable: false,
columnType: ‘none’,
cellsalign: ‘right’, align: ‘center’,
cellsFormat: ‘c’,
},
{
text: ‘SFDC Wk Upside’, dataField: ‘sfdcUpside’, width: 120, editable: false,
columnType: ‘none’, cellsalign: ‘right’, align: ‘center’, cellsFormat: ‘c’,
},

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

},
{
text: ‘Bookings Q3-FY16 A’,
dataField: ‘fy13’,
columnType: ‘none’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false,
cellsFormat: ‘c’,
},
{
text: ‘Bookings Q4-FY16 A’,
dataField: ‘fy14’,
columnType: ‘none’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false,
cellsFormat: ‘c’,
},
{
text: ‘Bookings Q1-FY17 A’,
dataField: ‘fy21’,
columnType: ‘none’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false, cellsFormat: ‘c’,
},
{
text: ‘Bookings Q2-FY17 A’,
dataField: ‘fy22’,
columnType: ‘none’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false, cellsFormat: ‘c’,
},
{
text: ‘Bookings Q3-FY17 A’,
dataField: ‘fy23’,
columnType: ‘none’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false, cellsFormat: ‘c’
},
{
text: ‘Bookings Q4-FY17 A’,
dataField: ‘fy24’,
columnType: ‘none’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false, cellsFormat: ‘c’,
},

// Product Manager Section Columns
{
text: ‘Product Manager’,
dataField: ‘productManager’,
columnType: ‘none’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false,
},
{
text: ‘Product Family’,
dataField: ‘productFamily’,
width: 210,
columnType: ‘none’,
cellsalign: ‘right’,
align: ‘center’,
editable: false,
createEditor: (row, cellvalue, editor, cellText, width, height) => {
//construct the editor.
let source = this.dynamicallyFilterPFList();
editor.jqxDropDownList({
autoDropDownHeight: true,
source: source,
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.
// let source = this.dynamicallyFilterPFList();
// editor.jqxDropDownList({source:source});
editor.jqxDropDownList(‘selectItem’, cellvalue);
},
getEditorValue: (row, cellvalue, editor) => {
// return the editor’s value.
return editor.val();
}
},
{
text: ‘PM Bottoms Up’,
cellsFormat: ‘c’,
dataField: ‘pmBottomsUp’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false,
validation: (cell, value) => {
if (parseInt(value) < 0 ) {
return { message: ‘Value should be an integer > 0’, result: false };
}
return true;
}
},
{
text: ‘PM Risk’,
dataField: ‘pmRisk’,
editable: false,
cellsAlign: ‘center’,
width: 120,
cellsFormat: ‘c’,
},
{
text: ‘PM Upside’,
dataField: ‘pmUpside’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false, cellsFormat: ‘c’,
},
{
text: ‘PM Probability’,
dataField: ‘pmProbability’,
width: 150,
columnType: ‘none’,
cellsalign: ‘center’,
align: ‘center’,
editable: false,
createEditor: (row, cellvalue, editor, cellText, width, height) => {
// construct the editor.
let source = [‘10%’, ‘25%’, ‘50%’, ‘75%’, ‘100%’];
editor.jqxDropDownList({
autoDropDownHeight: true,
filterable: true,
source: source,
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();
}
},
{
text: ‘PM Est. Q1FY18 F’,
dataField: ‘pmEstimatedQ1FyForecast’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false, cellsFormat: ‘c’,
},
{
text: ‘PM Est. Q2FY18 F’,
dataField: ‘pmEstimatedQ2FyForecast’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false, cellsFormat: ‘c’,
},
{
text: ‘PM Est. Q3FY18 F’,
dataField: ‘pmEstimatedQ3FyForecast’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false, cellsFormat: ‘c’,
},
{
text: ‘PM Est. Q4FY18 F’,
dataField: ‘pmEstimatedQ4FyForecast’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false, cellsFormat: ‘c’,
},
{
text: ‘PM Comments’,
dataField: ‘pmComments’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false,
},
{
text: ‘Timestamp’,
dataField: ‘pmTimeStamp’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false
},

// Business Analyst Section Columns

{
text: ‘Current Sales Forecast’,
dataField: ‘baCurrentSalesForecast’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false, cellsFormat: ‘c’,
},
{
text: ‘BA Bottoms up’,
dataField: ‘baBottomsUp’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false, cellsFormat: ‘c’,
},
{
text: ‘BA Risk’,
dataField: ‘baRisk’,
width: 120,
cellsalign: ‘right’,
align: ‘center’,
editable: false, cellsFormat: ‘c’,
},
{
text: ‘BA Upside’,
dataField: ‘baUpside’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: false, cellsFormat: ‘c’,
},
{
text: ‘BA Probability’,
dataField: ‘baProbability’,
width: 150,
columnType: ‘none’,
cellsalign: ‘right’,
align: ‘center’,
editable: false,
createEditor: (row, cellvalue, editor, cellText, width, height) => {
// construct the editor.
let source = [‘10%’, ‘25%’, ‘50%’, ‘75%’, ‘100%’];
editor.jqxDropDownList({
autoDropDownHeight: true,
source: source,
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();
}
},
{
text: ‘Critical Deal’,
dataField: ‘criticalDeal’,
width: 100,
columnType: ‘none’,
cellsalign: ‘center’,
align: ‘center’,
editable: false,
createEditor: (row, cellvalue, editor, cellText, width, height) => {
// construct the editor.
let source = [‘Yes’, ‘No’];
editor.jqxDropDownList({
autoDropDownHeight: true,
source: source,
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();
}
},
{
text: ‘BA Status’,
dataField: ‘status’,
width: 150,
columnType: ‘none’,
cellsalign: ‘left’,
align: ‘center’,
editable: false,
createEditor: (row, cellvalue, editor, cellText, width, height) => {
// construct the editor.
let source = [‘OPPORTUNITY’, ‘POC’, ‘WON’, ‘LOST’];
editor.jqxDropDownList({
autoDropDownHeight: true,
source: source,
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();
}
},
{
text: ‘BA Comments’,
dataField: ‘baComments’,
width: 300, cellsalign: ‘left’, align: ‘center’,
editable: false
},
{
text: ‘BA Executive Summary’,
dataField: ‘baExecutiveSummary’,
width: 300, cellsalign: ‘center’, align: ‘center’,
editable: false
}
],
};
this._lockedRows = _.uniq(parentRows);
this.jqxLoader.close();
this.treeGird.createComponent(treeGridSettings); // ############# ERROR LINE — This is causing issue
this.treeGrid.setColumnProperty(‘fy11’, ‘text’, columnNames.fy11);
this.treeGrid.setColumnProperty(‘fy12’, ‘text’, columnNames.fy12);
this.treeGrid.setColumnProperty(‘fy13’, ‘text’, columnNames.fy13);
this.treeGrid.setColumnProperty(‘fy14’, ‘text’, columnNames.fy14);
this.treeGrid.setColumnProperty(‘fy21’, ‘text’, columnNames.fy21);
this.treeGrid.setColumnProperty(‘fy22’, ‘text’, columnNames.fy22);
this.treeGrid.setColumnProperty(‘fy23’, ‘text’, columnNames.fy22);
this.treeGrid.setColumnProperty(‘fy24’, ‘text’, columnNames.fy23);
}

private setBusinessRules() {
var grid: any = this.treeGrid;
_.each(this._lockedRows, function (lockedRow) {
grid.lockRow(lockedRow);
});
console.log(this.userRoles);
console.log(this.userRoles[‘productManager’]);
if (this.userRoles[‘productManager’]) {
this.treeGrid.setColumnProperty(‘productFamily’, ‘columnType’, ‘template’);
this.treeGrid.setColumnProperty(‘productFamily’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘pmBottomsUp’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘pmRisk’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘pmUpside’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘pmProbability’, ‘columnType’, ‘template’);
this.treeGrid.setColumnProperty(‘pmProbability’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘pmEstimatedQ1FyForecast’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘pmEstimatedQ2FyForecast’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘pmEstimatedQ3FyForecast’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘pmEstimatedQ4FyForecast’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘pmComments’, ‘editable’, true);
}
if (this.userRoles[‘businessAnalyst’]) {
this.treeGrid.setColumnProperty(‘baCurrentSalesForecast’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘baBottomsUp’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘baRisk’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘baUpside’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘baProbability’, ‘columnType’, ‘template’);
this.treeGrid.setColumnProperty(‘baProbability’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘criticalDeal’, ‘columnType’, ‘template’);
this.treeGrid.setColumnProperty(‘criticalDeal’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘baStatus’, ‘columnType’, ‘template’);
this.treeGrid.setColumnProperty(‘baStatus’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘baComments’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘baExecutiveSummary’, ‘editable’, true);
}
}

updateButtons(action: string, rowData: any, buttons: any): void {
switch (action) {
case ‘Select’:
if (rowData[‘productFamily’] == null && rowData[‘subBusinessEntity’] == null) {
console.log(“inside customer”);
buttons.addOpportunityButton.jqxButton({disabled: false});
}
if (rowData[‘productFamily’] == null && rowData[‘subBusinessEntity’] != null) {
console.log(“inside sbe”);
buttons.addPFButton.jqxButton({disabled: false});
buttons.addOpportunityButton.jqxButton({disabled: true});
if (rowData[‘userDefined’] == true) {
console.log(“inside user defined sbe”);
buttons.editButton.jqxButton({disabled: false});
buttons.deleteButton.jqxButton({disabled: false});
buttons.cancelButton.jqxButton({disabled: true});
buttons.updateButton.jqxButton({disabled: true});
}
}
if (rowData[‘productFamily’] != null) {
console.log(“inside pf”);
buttons.addPFButton.jqxButton({disabled: true});
buttons.addOpportunityButton.jqxButton({disabled: true});
buttons.editButton.jqxButton({disabled: false});
buttons.deleteButton.jqxButton({disabled: false});
buttons.cancelButton.jqxButton({disabled: true});
buttons.updateButton.jqxButton({disabled: true});
}
break;
case ‘Unselect’:
buttons.addPFButton.jqxButton({disabled: true});
buttons.deleteButton.jqxButton({disabled: true});
buttons.addOpportunityButton.jqxButton({disabled: true});
buttons.editButton.jqxButton({disabled: true});
buttons.cancelButton.jqxButton({disabled: true});
buttons.updateButton.jqxButton({disabled: true});
break;
case ‘Edit’:
buttons.addPFButton.jqxButton({disabled: true});
buttons.deleteButton.jqxButton({disabled: true});
buttons.addOpportunityButton.jqxButton({disabled: true});
buttons.editButton.jqxButton({disabled: true});
buttons.cancelButton.jqxButton({disabled: false});
buttons.updateButton.jqxButton({disabled: false});
break;
case ‘End Edit’:
buttons.addPFButton.jqxButton({disabled: true});
buttons.deleteButton.jqxButton({disabled: false});
buttons.addOpportunityButton.jqxButton({disabled: true});
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 addPFButton: any = $(buttonTemplate)
let deleteButton: any = $(buttonTemplate);
let addOpportunityButton: any = $(buttonTemplate)
let editButton: any = $(buttonTemplate);
let cancelButton: any = $(buttonTemplate);
let updateButton: any = $(buttonTemplate);
if (!($(‘.btn-toolbar’).length > 0)) {
container.append(addPFButton);
container.append(addOpportunityButton);
container.append(deleteButton);
container.append(editButton);
container.append(updateButton);
container.append(cancelButton);
toolBar.append(container);
}

addPFButton.jqxButton({cursor: ‘pointer’, disabled: true, enableDefault: false});
addPFButton.text(‘Add PF’).addClass(‘btn btn-primary’);

addOpportunityButton.jqxButton({cursor: ‘pointer’, disabled: true, enableDefault: false});
addOpportunityButton.text(‘Add Opportunity’).addClass(‘btn btn-primary’);

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

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

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

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

this.buttonsObject = {
addPFButton: addPFButton,
deleteButton: deleteButton,
addOpportunityButton: addOpportunityButton,
editButton: editButton,
cancelButton: cancelButton,
updateButton: updateButton,
};
addPFButton.click((event) => {
if (!addPFButton.jqxButton(‘disabled’)) {
this.treeGrid.expandRow(this.rowKey);
let currentRow = this.treeGrid.getRow(this.rowKey);
let newProductFamily = this.formDealForecastingObject();
newProductFamily[‘aggregatedCustomer’] = currentRow[‘aggregatedCustomer’];
newProductFamily[‘salesRegion’] = currentRow[‘salesRegion’];
newProductFamily[‘subBusinessEntity’] = currentRow[‘subBusinessEntity’];
newProductFamily[‘isOpportunity’] = currentRow[‘isOpportunity’];
//this.currentDFTObject[‘parentId’] = currentRow[‘id’];
// add new empty row.
this.treeGrid.addRow(null, newProductFamily, ‘first’, this.rowKey);
// select the first row and clear the selection.
this.treeGrid.clearSelection();
this.treeGrid.selectRow(this.newRowID);
this.resetEditableColumns();
this.treeGrid.beginRowEdit(this.newRowID);
this.updateButtons(‘add’, {}, this.buttonsObject);
}
});
addOpportunityButton.click((event) => {
if (!addOpportunityButton.jqxButton(‘disabled’)) {
this.treeGrid.expandRow(this.rowKey);
// add new empty row.
let currentRow = this.treeGrid.getRow(this.rowKey);
let newOpportunity = this.formDealForecastingObject();
newOpportunity[‘isOpportunity’] = currentRow[‘isOpportunity’];
this.treeGrid.addRow(null, newOpportunity, ‘first’);
//this.treeGrid
// select the first row and clear the selection.
this.treeGrid.clearSelection();
this.treeGrid.selectRow(this.newRowID);
this.setEditableColumns();
this.treeGrid.setColumnProperty(‘productFamily’, ‘editable’, false);
this.treeGrid.setColumnProperty(‘productFamily’, ‘columnType’, ‘none’);
this.treeGrid.beginRowEdit(this.newRowID);
this.updateButtons(‘add’, {}, this.buttonsObject);
}
});
editButton.click(() => {
if (!editButton.jqxButton(‘disabled’)) {
this.treeGrid.unlockRow(this.rowKey);
let currentRow = this.treeGrid.getRow(this.rowKey);
if(currentRow[‘sbeId’] && currentRow[‘userDefined’]){
this.setEditableColumns();
this.treeGrid.setColumnProperty(‘productFamily’, ‘editable’, false);
this.treeGrid.setColumnProperty(‘productFamily’, ‘columnType’, ‘none’);
}
else if(currentRow[‘isOpportunity’] != true){
this.resetEditableColumns();
}
this.treeGrid.beginRowEdit(this.rowKey);
this.updateButtons(‘edit’, {}, this.buttonsObject);
}
});

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

updateButton.click((event) => {
if (!updateButton.jqxButton(‘disabled’)) {
this.treeGrid.endRowEdit(this.rowKey, false);
}
});

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

private setEditableColumns() {
this.treeGrid.setColumnProperty(‘aggregatedCustomer’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘aggregatedCustomer’, ‘columnType’, ‘template’);
this.treeGrid.setColumnProperty(‘salesRegion’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘salesRegion’, ‘columnType’, ‘template’);
this.treeGrid.setColumnProperty(‘subBusinessEntity’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘subBusinessEntity’, ‘columnType’, ‘template’);
}

private resetEditableColumns() {
this.treeGrid.setColumnProperty(‘aggregatedCustomer’, ‘editable’, false);
this.treeGrid.setColumnProperty(‘aggregatedCustomer’, ‘columnType’, ‘none’);
this.treeGrid.setColumnProperty(‘salesRegion’, ‘editable’, false);
this.treeGrid.setColumnProperty(‘salesRegion’, ‘columnType’, ‘none’);
this.treeGrid.setColumnProperty(‘subBusinessEntity’, ‘editable’, false);
this.treeGrid.setColumnProperty(‘subBusinessEntity’, ‘columnType’, ‘none’);
}

rowKey = null;

rowSelect(event: any): void {
let args = event.args;
this.rowKey = args.key;
console.log(this.treeGrid.getRow(this.rowKey));
this.currentRow = this.treeGrid.getRow(this.rowKey);
this.currentRow[‘rowKey’] = this.rowKey;
this.message = null;
this.successMessage = false;
this.errorMessage = false;
this.updateButtons(‘Select’, this.currentRow, this.buttonsObject);
};

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

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

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

getHierarchicalData(): any {
this.dashboardService.getHierarchicalData()
.subscribe(
result => {
this.hierarchialDataList = result;
}
//error => this.errorMessage = <any>error
);
};

dynamicallyFilterPFList(): any {
this.filteredPFBySBE = this.productFamilyList[this.currentRow[‘subBusinessEntity’]];
return this.filteredPFBySBE;
}

formDealForecastingObject(): any {
var dealForecasting = {
pfId: null,
sbeId: null,
productFamily: null,
pmBottomsUp: null,
pmRisk: null,
pmUpside: null,
pmProbability: null,
pmEstimatedQ1FyForecast: null,
pmEstimatedQ2FyForecast: null,
pmEstimatedQ3FyForecast: null,
pmEstimatedQ4FyForecast: null,
pmComments: null,
pmTimeStamp: null,
baCurrentSalesForecast: null,
baBottomsUp: null,
baRisk: null,
baUpside: null,
baProbability: null,
criticalDeal: null,
baStatus: null,
baComments: null,
baExecutiveSummary: null,
fiscalQuarterId: null,
salesRegion: null,
aggregatedCustomer: null,
subBusinessEntity: null,
finBookingsActuals: null,
sfdcCommit: null,
sfdcWeekByWeekActuals: null,
sfdcActualsPlusCommit: null,
sfdcUpside: null,
fy11: null,
fy12: null,
fy13: null,
fy14: null,
fy21: null,
fy22: null,
fy23: null,
fy24: null,
isOpportunity: false,
userDefined: false
}
return dealForecasting;
}

jsonExportClick(): void {
console.log(“grid data”); // prints undefined
let exportData: any = [];
let dftObjectList = JSON.parse(this.treeGrid.exportData(‘json’));
for (var customer of dftObjectList) {
let sbeList: any = customer[‘rows’];
//remove rows from customer
//push customer to flat array
delete customer[‘rows’];
exportData.push(customer);
for (var sbe of sbeList) {
let pfList: any = sbe[‘rows’];
delete sbe[‘rows’];
exportData.push(sbe);
if(typeof pfList!= ‘undefined’ && pfList.length > 0) {
for (var pf of pfList) {
exportData.push(pf);
}
}
}
}
this._csvService.download(exportData, ‘DFT extract -‘+ new Date());
};

refreshGrid():void {
let pagtiationParams = {offset: 0, limit: 1}
this.jqxLoader.open();
this.fetchGridData(pagtiationParams,true); // this is causing issue with create widget but when called from constructor everything is fine
}
}

[adminKeymaster]

Hi Sandeep Vedavyas,

You use treeGird and treeGrid in your code. May be it should be treeGrid everywhere.

Best Regards,
Peter Stoev

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

[svedavyaParticipant]

Hi Peter,

I solved the issue, Its because of creating the grid multiple time rather i did a refresh of data next time.

Thanks
Sandeep

[Author]

Posts