I am trying to change layout of pivotGrid during runtime.

For this, I have set tree layout as my initial layout and given user option to choose other layouts using 2 buttons - Set compact layout & Set Standard layout

However, on click on both buttons, I receives error in browser console-

Cannot read property 'length' of undefined

Refer below code and let me know how to switch between layouts of pivotGrid.

/// <reference path="../node_modules/igniteui-angular2/jquery.d.ts" />
/// <reference path="../node_modules/igniteui-angular2/igniteui.d.ts" />

import {Component, Inject, ElementRef, EventEmitter, HostListener} from '@angular/core';
import {IgPivotDataSelectorComponent, IgPivotGridComponent} from "igniteui-angular2";

declare var jQuery: any;

@Component({
selector: 'my-app',
template: `
<h5>angular2 FInal igPivotGrid XmlaDataSource</h5>

<button (click)="compactLayout()">Set compact layout</button>
<button (click)="standardLayout()">Set Standard layout</button>

<div class="row">
<div class="col-md-8">
<ig-pivot-grid [widgetId]="gridId" [options]="optsGrid" >
</ig-pivot-grid>
</div>
<div class="col-md-4">
<ig-pivot-data-selector [widgetId]="selectorId" [options]="optsSelector" >
</ig-pivot-data-selector>
</div>
</div>

`,
})

export class AppComponent {
private optsGrid: IgPivotGrid;
private optsSelector: IgPivotDataSelector;
private selectorId: string;
private gridId: string;
private gridId2: string;
private data: any;

constructor() {

this.data = new jQuery.ig.OlapXmlaDataSource({
serverUrl: 'http://sampledata.infragistics.com/olap/msmdpump.dll',
catalog: 'Adventure Works DW Standard Edition',
cube: 'Adventure Works',
// rows: '[Date].[Calendar]',
// columns: '[Product].[Product Categories]',
// measures: '[Measures].[Internet Order Count]'
});

this.selectorId = "dataSelector";
this.gridId = "pivotGrid";

this.optsGrid = {
dataSource: this.data,
rowHeadersLayout: "tree",
treeRowHeaderIndentation: 10,
compactRowHeaderIndentation: 20,
rowHeaderLinkGroupIndentation: 10,
allowHeaderRowsSorting: true,
gridOptions: {
caption: "Tree Layout"
},
height: "100%",
width: "100%"
};

this.optsSelector = {
dataSource: this.data,
height: "100%",
width: "100%"
};
}

compactLayout() {
this.optsGrid.rowHeadersLayout = "superCompact";
this.optsGrid.compactColumnHeaders= true;
this.optsGrid.compactRowHeaderIndentation = 20;
this.optsGrid.compactColumnHeaderIndentation = 30;
this.optsGrid.isParentInFrontForColumns = true;
this.optsGrid.gridOptions.caption = "Super Compact Layout";
this.optsGrid.gridOptions.defaultColumnWidth = 250;
}

standardLayout() {
this.optsGrid.rowHeadersLayout= "standard";
this.optsGrid.compactColumnHeaders= false;
this.optsGrid.isParentInFrontForColumns = false;
this.optsGrid.gridOptions.caption = "Standard Layout";
}

}