ServerSide pagination using observable pattern

[svedavyaParticipant]

Hi Team,

I am binding the treeGrid data with angular observable call to backend which is groovy on grails, Can you please provide me with an example on how to update source with total records and pass pagination params. Kindly do the needful.

Thanks
Sandeep

[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 Team,

Any inputs on this, please?

Thanks & regards
Sandeep Vedavyas

[Peter StoevKeymaster]

The Tree Grid does not support server side pagination. It supports loading data on demand when a record is expanded which is a different approach.

Best Regards,
Peter Stoev

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

[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 ?

[Peter StoevKeymaster]

The Tree grid does not know what is total records and things like that known in flat tables. As a hierarchical data component, It supports loading on demand by expanding a record.

Best Regards,
Peter Stoev

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

[Author]

Posts