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"; }
}
Hello Satish,
Try adding the following line in the "compactLayout" and "standardLayout" functions:
this.optsGrid.gridOptions.features = [];
Here is the resulting code: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.features = [];this.optsGrid.gridOptions.defaultColumnWidth = 250;}
standardLayout() {this.optsGrid.rowHeadersLayout= "standard";this.optsGrid.compactColumnHeaders= false;this.optsGrid.isParentInFrontForColumns = false;this.optsGrid.gridOptions.caption = "Standard Layout";this.optsGrid.gridOptions.features = [];}
Hope this helps,Martin PavlovInfragistics, Inc.