jQuery UI Widgets Forums Angular ERROR TypeError: Cannot read property 'host' of null on treegrid createComponent

This topic contains 2 replies, has 2 voices, and was last updated by  svedavya 6 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • svedavya
    Participant

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

    • This topic was modified 6 years, 4 months ago by  svedavya. Reason: updated code with issue

    admin
    Keymaster

    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/


    svedavya
    Participant

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.