[svedavyaParticipant]

Hi Team,

Can you tell us how we can add Div back after calling destroy so when createComponent is called, we do not face issue?

<jqxTreeGrid #treeGridReference [auto-create]=”false”
(onRowSelect)=”rowSelect($event)”
(onRowUnselect)=”rowUnselect($event)”
(onRowEndEdit)=”rowEndEdit($event)”
(onRowBeginEdit)=”rowBeginEdit($event)”
[width]=”‘100%'”
[height]=”‘640px'”
[columnsHeight]=”’50′”
[editable]=”true”
[showToolbar]=”true”
[toolbarHeight]=”60″
[altRows]=”true”
[theme]='”metro”‘
[autoRowHeight]=”true”>
</jqxTreeGrid>
</div>

I have to add above treeGird back after calling destroy , Please guide us.

[svedavyaParticipant]

Hi Ivo,

When we call this.treegrid.destroy(); // the grid is removed from DOM.

secondly we are trying to recreate grid with fewer columns and data fields using this.treeGrid.createComponent(treeGridSettings);

when we call createComponent, we get above error as ERROR TypeError: Cannot read property ‘style’ of undefined. Seems like its trying to find a DOM element which is removed earlier with destroy

ERROR TypeError: Cannot read property ‘classList’ of undefined
at jqxTreeGridComponent.webpackJsonp…/../../../jqwidgets-framework/jqwidgets-ts/angular_jqxtreegrid.ts.jqxTreeGridComponent.moveClasses (angular_jqxtreegrid.ts:143)
at jqxTreeGridComponent.webpackJsonp…/../../../jqwidgets-framework/jqwidgets-ts/angular_jqxtreegrid.ts.jqxTreeGridComponent.createComponent (angular_jqxtreegrid.ts:162)

[svedavyaParticipant]

Hi Hristo,

Baiscally I need to achieve functionality like, when i save row on grid, either i refresh the row from backend data or refresh page and maintain state like expand the parent rows and select the row i was working before refresh.

Right now I am able to refresh the page so even record data got refreshed, but i am loosing the state, i tried expanding the rows using expandrow method but issue is after refresh the rowKey is updated to new value and expanding different rows. Kindly suggest how can we achieve this.

Thanks
Sandeeo

[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

[svedavyaParticipant]

Hi Peter,

I am able to extract the data to JSON, but the issue i am facing is with the parsing the rows due to parent and child nested values like below-having child inside the parent which is not understandable by many angular 2 json-csv plugins, is there any specific settings to get a flat list of records, so I can export them without parent-child relation ? Kindly suggest if any solution available.

[{“First Name”:”Andrew”,”Last Name”:”Fuller”,”Title”:”Vice President, Sales”,”Birth Date”:”2/19/1952″,”Hire Date”:”8/14/1992″,”Address”:”908 W. Capital Way”,”City”:”Tacoma”,”Country”:”USA”,”rows”:[{“First Name”:”Nancy”,”Last Name”:”Davolio”,”Title”:”Sales Representative”,”Birth Date”:”12/8/1948″,”Hire Date”:”5/1/1992″,”Address”:”507 – 20th Ave. E.Apt. 2A”,”City”:”Seattle”,”Country”:”USA”,”rows”:[]},{“First Name”:”Janet”,”Last Name”:”Leverling”,”Title”:”Sales Representative”,”Birth Date”:”8/30/1963″,”Hire Date”:”4/1/1992″,”Address”:”722 Moss Bay Blvd.”,”City”:”Kirkland”,”Country”:”USA”,”rows”:[]},{“First Name”:”Margaret”,”Last Name”:”Peacock”,”Title”:”Sales Representative”,”Birth Date”:”9/19/1937″,”Hire Date”:”5/3/1993″,”Address”:”4110 Old Redmond Rd.”,”City”:”Redmond”,”Country”:”USA”,”rows”:[]},{“First Name”:”Steven”,”Last Name”:”Buchanan”,”Title”:”Sales Manager”,”Birth Date”:”3/4/1955″,”Hire Date”:”10/17/1993″,”Address”:”14 Garrett Hill”,”City”:”London”,”Country”:”UK”,”rows”:[{“First Name”:”Michael”,”Last Name”:”Suyama”,”Title”:”Sales Representative”,”Birth Date”:”7/2/1963″,”Hire Date”:”10/17/1993″,”Address”:”Coventry House Miner Rd.”,”City”:”London”,”Country”:”UK”,”rows”:[]},{“First Name”:”Robert”,”Last Name”:”King”,”Title”:”Sales Representative”,”Birth Date”:”5/29/1960″,”Hire Date”:”1/2/1994″,”Address”:”Edgeham Hollow Winchester Way”,”City”:”London”,”Country”:”UK”,”rows”:[]},{“First Name”:”Anne”,”Last Name”:”Dodsworth”,”Title”:”Sales Representative”,”Birth Date”:”1/27/1966″,”Hire Date”:”11/15/1994″,”Address”:”7 Houndstooth Rd.”,”City”:”London”,”Country”:”UK”,”rows”:[]}]},{“First Name”:”Laura”,”Last Name”:”Callahan”,”Title”:”Inside Sales Coordinator”,”Birth Date”:”1/9/1958″,”Hire Date”:”3/5/1994″,”Address”:”4726 – 11th Ave. N.E.”,”City”:”Seattle”,”Country”:”USA”,”rows”:[]}]}]

Thanks
Sandeep

[svedavyaParticipant]

Hi Team,

My requirement for above problem is, depending on the value selected in this drop-down I need to have data filter on a list which is binded as a source to the custom editor of another column.

Depending on the value selected in this column i need to filter another column source.

Thanks
Sandeep

[svedavyaParticipant]

Is there any other way to get batch wise records? if I can update the treeGird total records, I think it will enable page buttons ?

[svedavyaParticipant]

Hi Team,

Any inputs on this, please?

Thanks & regards
Sandeep Vedavyas

[svedavyaParticipant]

Hi, Below is my component code, i Need to set the total records to source on data response but it’s not setting with this.source.totalrecords method and the total records will be 20(this.source.totalrecords = 20) and pagination buttons will be disabled, i cannot call for next set of records.

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

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

constructor(private dashboardService: DashboardService) {
}

@ViewChild(‘treeGridReference’) treeGrid: jqxTreeGridComponent;
@ViewChild(‘jqxLoader’) jqxLoader: jqxLoaderComponent;
pagtiationParams:any = {}
currentRow: any = {}
productFamilyList:any = []
ngAfterViewInit(): void {
this.jqxLoader.open();
this.pagtiationParams = {offset: 0, limit: this.treeGridSettings.pageSize}
this.fetchGridData(this.pagtiationParams);
}

_lockedRows: any [];
newRowID = null;
theme: string = ”;
buttonsObject: any = null;
newProductFamily : any = {}
editSettings: any = {
saveOnPageChange: false,
saveOnBlur: false,
saveOnSelectionChange: false,
cancelOnEsc: true, saveOnEnter: false,
editOnDoubleClick: false, editOnF2: false
}

source: any =
{
dataType: ‘array’,
dataFields: [
{name: ‘id’, type: ‘number’},
{name: ‘parentId’, type: ‘number’},
{name: ‘pfId’, type: ‘number’},
// 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’,
url:this.fetchGridData(this.pagtiationParams),
addRow: (rowID, rowData, position, parentID, commit) => {
this.newRowID = rowID;
console.log(rowData);
console.log(“test add”);
console.log(this.newProductFamily);
//console.log(rowData);
this.dashboardService.saveDft(this.newProductFamily)
.subscribe(
result => {
console.log(“backend data”);
console.log(result);
this.newProductFamily.pfId = result.id;
commit(true,result.id);
}
//error => this.errorMessage = <any>error
);
},
updateRow: (rowID, rowData, commit) => {
rowData[‘parent’] = null;
if(rowData[‘pfId’] == null) {
rowData[‘pfId’] = this.newProductFamily.pfId;
}
this.dashboardService.updateDft(rowData)
.subscribe(
result => {
console.log(result);
commit(true);
}
//error => this.errorMessage = <any>error
);
},
deleteRow: (rowID, rowData, commit) => {
console.log(rowData);
console.log(rowID);
let deleteObject = this.treeGrid.getRow(rowID);
deleteObject[‘parent’] = null;
if(deleteObject[‘pfId’] == null) {
deleteObject[‘pfId’] = this.newProductFamily.pfId;
}
this.dashboardService.deleteDft(deleteObject)
.subscribe(
result => {
console.log(result);
console.log(this.currentRow[‘rowKey’]);
this.treeGrid.updateBoundData();
}
//error => this.errorMessage = <any>error
);
commit(true);
}
};

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

treeGridSettings: jqwidgets.TreeGridOptions =
{
height: “auto”,
width: ‘100%’,
source: this.dataAdapter,
editable: true,
filterable: true,
pageSize: 200,
//pageable: true,
//columnsResize: true,
ready: (): void => {
var grid: any = this.treeGrid;
_.each(this._lockedRows, function (lockedRow) {
grid.lockRow(lockedRow);
});
},
columns: [
{
text: ‘Customer’,
dataField: ‘aggregatedCustomer’,
width: 275,
editable: false,
columnType: ‘template’,
cellsalign: ‘left’,
align: ‘center’,
pinned: true,
createEditor: (row, cellvalue, editor, cellText, width, height) => {
//construct the editor.
let source = this.productFamilyList;
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: ‘Sales Region’,
dataField: ‘salesRegion’,
width: 120,
editable: false,
//columnType: ‘none’,
cellsalign: ‘left’, align: ‘center’,
pinned: true
},
{
text: ‘Sub Business Entity’,
dataField: ‘subBusinessEntity’,
width: 140,
editable: false,
//columnType: ‘none’,
cellsalign: ‘left’, align: ‘center’,
pinned: true
},

// 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: 150,
columnType: ‘template’,
cellsalign: ‘right’,
align: ‘center’,
createEditor: (row, cellvalue, editor, cellText, width, height) => {
//construct the editor.
let source = this.productFamilyList;
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: ‘PM Bottoms Up’,
cellsFormat: ‘c’,
dataField: ‘pmBottomsUp’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: true,
},
{
text: ‘PM Risk’,
dataField: ‘pmRisk’,
editable: true,
cellsAlign: ‘center’,
width: 120,
cellsFormat: ‘c’,
},
{
text: ‘PM Upside’,
dataField: ‘pmUpside’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: true, cellsFormat: ‘c’,
},
{
text: ‘PM Probability’,
dataField: ‘pmProbability’,
width: 150,
columnType: ‘template’,
cellsalign: ‘center’,
align: ‘center’,
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: true, cellsFormat: ‘c’,
},
{
text: ‘PM Est. Q2FY18 F’,
dataField: ‘q2FY18 F’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: true, cellsFormat: ‘c’,
},
{
text: ‘PM Est. Q3FY18 F’,
dataField: ‘pmEstimatedQ3FyForecast’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: true, cellsFormat: ‘c’,
},
{
text: ‘PM Est. Q4FY18 F’,
dataField: ‘pmEstimatedQ4FyForecast’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: true, cellsFormat: ‘c’,
},
{
text: ‘PM Comments’,
dataField: ‘pmComments’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: true,
},
{
text: ‘Timestamp’,
dataField: ‘pmTimeStamp’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: true
},

// Business Analyst Section Columns

{
text: ‘Current Sales Forecast’,
dataField: ‘baCurrentSalesForecast’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: true, cellsFormat: ‘c’,
},
{
text: ‘BA Bottoms up’,
dataField: ‘baBottomsUp’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: true, cellsFormat: ‘c’,
},
{
text: ‘BA Risk’,
dataField: ‘baRisk’,
width: 120,
cellsalign: ‘right’,
align: ‘center’,
editable: true, cellsFormat: ‘c’,
},
{
text: ‘BA Upside’,
dataField: ‘baUpside’,
width: 120, cellsalign: ‘right’, align: ‘center’,
editable: true, cellsFormat: ‘c’,
},
{
text: ‘BA Probability’,
dataField: ‘baProbability’,
width: 150,
columnType: ‘template’,
cellsalign: ‘right’,
align: ‘center’,
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: ‘template’,
cellsalign: ‘center’,
align: ‘center’,
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: ‘template’,
cellsalign: ‘left’,
align: ‘center’,
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: true
},
{
text: ‘BA Executive Summary’,
dataField: ‘baExecutiveSummary’,
width: 300, cellsalign: ‘center’, align: ‘center’,
editable: true
}
],
};

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): void {
this.dashboardService.getDashboardData(paginationParams).subscribe(res => {

var responseData = res.data;
var parentRows: any [] = [];
var uniqCustomers = _.uniq(_.pluck(responseData, ‘aggregatedCustomer’));

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

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

private createAndLoadGrid(responseData: any, columnNames: any, parentRows: any[]) {
this.source.totalrecords = 20;
this.source.localData = responseData;
this._lockedRows = _.uniq(parentRows);
console.log(“parent row”);
console.log(this._lockedRows);
this.jqxLoader.close();
this.treeGrid.createComponent(this.treeGridSettings);
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);
}

updateButtons(action: string, rowData: any, buttons: any): void {
switch (action) {
case ‘Select’:
if (rowData[‘aggregatedCustomer’] && rowData[‘subBusinessEntity’]) {
if (!rowData[‘productFamily’]) {
buttons.addPFButton.jqxButton({disabled: false});
}else {
buttons.deletePFButton.jqxButton({ disabled: false });
}
}
if (rowData[‘aggregatedCustomer’] && !rowData[‘subBusinessEntity’]) {
buttons.addOpportunityButton.jqxButton({disabled: false});
}
buttons.addPFButton.jqxButton({disabled: false});
buttons.editButton.jqxButton({disabled: false});
buttons.cancelButton.jqxButton({disabled: true});
buttons.updateButton.jqxButton({disabled: true});
break;
case ‘Unselect’:
buttons.addPFButton.jqxButton({disabled: true});
buttons.deletePFButton.jqxButton({ disabled: false });
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.deletePFButton.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: false});
buttons.deletePFButton.jqxButton({ disabled: false });
buttons.addOpportunityButton.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 addPFButton: any = $(buttonTemplate)
let deletePFButton: 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(deletePFButton);
container.append(addOpportunityButton);
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’);

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

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

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

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

this.buttonsObject = {
addPFButton: addPFButton,
deletePFButton:deletePFButton,
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);
this.newProductFamily = this.formDealForecastingObject();
this.newProductFamily[‘aggregatedCustomer’] = currentRow[‘aggregatedCustomer’];
this.newProductFamily[‘salesRegion’] = currentRow[‘salesRegion’];
this.newProductFamily[‘subBusinessEntity’] = currentRow[‘subBusinessEntity’];
//this.newProductFamily[‘parentId’] = currentRow[‘id’];
// add new empty row.

this.treeGrid.addRow(null, this.newProductFamily, ‘first’, this.rowKey);
// select the first row and clear the selection.
this.treeGrid.clearSelection();
//this.treeGrid.selectRow(this.newRowID);
this.updateButtons(‘add’, {}, this.buttonsObject);
}
});
addOpportunityButton.click((event) => {
if (!addOpportunityButton.jqxButton(‘disabled’)) {
this.treeGrid.expandRow(this.rowKey);
// add new empty row.
let newOpportunity = this.formDealForecastingObject();
this.treeGrid.addRow(null, newOpportunity, ‘first’);
//this.treeGrid
// select the first row and clear the selection.
this.treeGrid.clearSelection();
this.treeGrid.selectRow(this.newRowID);
// edit the new row.;
this.treeGrid.setColumnProperty(‘aggregatedCustomer’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘salesRegion’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘subBusinessEntity’, ‘editable’, true);
this.treeGrid.setColumnProperty(‘productFamily’, ‘editable’, true);
this.treeGrid.beginRowEdit(this.newRowID);
this.updateButtons(‘add’, {}, this.buttonsObject);
}
});
editButton.click(() => {
if (!editButton.jqxButton(‘disabled’)) {
this.treeGrid.unlockRow(this.rowKey);
this.treeGrid.beginRowEdit(this.rowKey);
this.updateButtons(‘edit’, {}, this.buttonsObject);
}
});

deletePFButton.click(() => {
if (!deletePFButton.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);
}
});
};
rowKey = null;

rowSelect(event: any): void {
let args = event.args;
this.rowKey = args.key;
this.currentRow = this.treeGrid.getRow(this.rowKey);
this.currentRow[‘rowKey’] = this.rowKey;
console.log(this.currentRow);
this.updateButtons(‘Select’, this.currentRow, this.buttonsObject);
let queryParams:any = {}
queryParams[‘subBusinessEntity’] = this.currentRow[‘subBusinessEntity’]
console.log(queryParams);
this.dashboardService.getProductFamilies(queryParams)
.subscribe(
result => {
this.productFamilyList = result.productFamilies;
}
//error => this.errorMessage = <any>error
);

};

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

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

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

myTreeGridOnPageChanged(event: any): void {
let args = event.args;
console.log(“Page:” + args.pagenum + “, Page Size: ” + args.pageSize);
};

myTreeGridOnPageSizeChanged(event): void {
let args = event.args;
console.log(“Page:” + args.pagenum + “, Page Size: ” + args.pageSize + “, Old Page Size: ” + args.oldpageSize);
};

formDealForecastingObject(): any {
var dealForecasting = {
pfId: 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,
}
return dealForecasting;
}

}

[svedavyaParticipant]

Hi Ivo,

Record is deleted form database after deleteButton click but after commit , The row should also be removed from grid right, it still exists in the treeGird, it only removed from DOM on page refresh or updateDatabound.

Thanks
Sandeep

[svedavyaParticipant]

Hi Team,

Any suggestions on sync full object data/DB row id to row after add ?

Kindly help.

Thanks
Sandeep

[svedavyaParticipant]

Hi team,

Any help on this, please ?

Regards
Sandeep

[svedavyaParticipant]

Hi Peter,

It worked thanks! Appreciate your quick response.

Thanks
Sandee

[svedavyaParticipant]

Hi Ivo,

only in new row case, I want them enabled, rest other cases default they should be disabled. apart from the new row i should not allow user to edit any other rows.

Thanks
Sandeep

[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

[Author]

Posts