Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
60
Switching layout in Angular2 PivotGrid
posted

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

}

Parents
No Data
Reply
  • 23953
    Offline posted

    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 Pavlov
    Infragistics, Inc.

Children
No Data