PivotGrid and its selector not binding/working properly

Question

I have developed an application with Angular2, IgniteUI/Infragistics PivotGrid control to load the PivotGrid. We are passing the Cubes information i.e Measures/Dimensions dynamically and binding the json data with the PivotGrid. We are using the Angular2 wrapper component given by the IgniteUI/Infragistics in their github demo.

A breif explaination here about my application:-

Workbook is the parent component which has dropdown. Onchange event of the dropdown would trigger the PivotGrid component which is a child component of Workbook component, to load and bind the PivotGrid. After the PivotGrid grid is bound/loaded, it should load the selector for the PivotGrid. this selector is placed in a child component called slideout under this PivotGrid. Basically whenever the dropdown is getting changed, it should load the appropriate PivotGrid and its selector components respectively.

1. In Workbook which is the parent component has dropdown, "OnChange" event trigger when the dropdown value changes, it is going to trigger the ngOnChanges event in the PivotGrid since its Input() parameters values is being changed.
2. In PivotGrid during ngOnChanges event, it calls the local method LoadInfraPivotGrid() which binds the grid. After binding the grid, I change the Input() parameters value for the slideout component which should again trigger ngOnChanges event in slideout component.
3. In slideout during ngOnChanges event it binds the selector component.
4. the Data to bind the selector component is passed from the parent PivotGrid using the @Injectable component SessionService which hold the data. The values are read from this SessionService and then bind with the selector.

The Problem I am facing here is data is not properly bound/loaded with the PivotGrid/Selector. The result is whenever I try to change the Measures/Dimensions in the selector, the PivotGrid crashes with the following error message. When I try change/modify in the selector control continuously this problem would occur.

    Uncaught TypeError: Cannot read property 'top' of undefined
        at t.(anonymous function).(anonymous function)._positionOverlayDropAreas (http://localhost:3000/js/IgniteUI/infragistics.lob.js:662:19496)
        at t.(anonymous function).(anonymous function)._positionOverlayDropAreas (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
        at t.(anonymous function).(anonymous function)._onDataRendered (http://localhost:3000/js/IgniteUI/infragistics.lob.js:662:18161)
        at t.(anonymous function).(anonymous function)._onDataRendered (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
        at HTMLTableElement.dataRendered (http://localhost:3000/js/IgniteUI/infragistics.lob.js:661:12953)
        at t.(anonymous function).(anonymous function)._trigger (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:10002)
        at t.(anonymous function).(anonymous function)._renderData (http://localhost:3000/js/IgniteUI/infragistics.lob.js:138:17643)
        at t.(anonymous function).(anonymous function)._renderData (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
        at t.(anonymous function).(anonymous function).proxy (http://code.jquery.com/jquery-1.12.3.js:529:14)
        at Class._invokeCallback (http://localhost:3000/js/IgniteUI/infragistics.core.js:270:30197)

Please find the sample source in the URL

Even when I drill-down the Reports on rows, it crashes. any ideas what is the mistake I am doing here? any fixes?

Edit: Now I am getting a different error, The error/exception which I have mentioned can be reproduced in the sample code itself. Steps to replicate the issue:-

1. Please open the "Report3" from the dropdown, Report3 gets loaded
2. Drag-Drop the "Vendor" from "Item Scorecard" to Columns (Please refer snapshot)
3. Drag-Drop "Retailer" to "Rows" The grid crashes immediately after this.

    Uncaught TypeError: Cannot read property 'key' of undefined
        at t.(anonymous function).(anonymous function)._transformGridData (http://localhost:3000/js/IgniteUI/infragistics.lob.js:661:23266)
        at t.(anonymous function).(anonymous function)._transformGridData (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
        at t.(anonymous function).(anonymous function)._configureOptions (http://localhost:3000/js/IgniteUI/infragistics.lob.js:661:12632)
        at t.(anonymous function).(anonymous function)._configureOptions (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
        at t.(anonymous function).(anonymous function)._onGridUpdated (http://localhost:3000/js/IgniteUI/infragistics.lob.js:661:26768)
        at t.(anonymous function).(anonymous function)._onGridUpdated (http://code.jquery.com/ui/1.10.3/jquery-ui.min.js:5:5028)
        at Class.<anonymous> (http://localhost:3000/js/IgniteUI/infragistics.lob.js:661:9410)
        at Class.dispatch (http://code.jquery.com/jquery-1.12.3.js:5226:27)
        at Class.elemData.handle (http://code.jquery.com/jquery-1.12.3.js:4878:28)
        at Object.trigger (http://code.jquery.com/jquery-1.12.3.js:5130:12)

Answer 1

The widgetId attribute should be set initially when first creating the pivot grid. This should be done either when declaring the gridId property in InfraPivotGrid Component:

private gridId: string = "pivotGrid";

Or into the constructor of that class:

    constructor(private _SessionService: SessionService, private _WidgetConfigService: WidgetConfigService) {
        console.log("In constructor of InfraPivotGrid");
        this.gridId = "pivotGrid";
    }