Ej1 api migration in Angular Pivotview component

5 Apr 202524 minutes to read

This article describes the API migration process of pivot table component from Essential® JS 1 to Essential® JS 2.

Data Binding

Behavior API in Essential® JS 1 API in Essential® JS 2
DataSource property: dataSource

<ej-pivotgrid [dataSource.data]="data" [dataSource.rows]="rows" [dataSource.columns]="columns" [dataSource.values]="values"> </ej-pivotgrid>

export class PivotGridComponent {
public data; rows; columns;values;filters;
constructor() {
this.data = [{ Amount: 100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Alberta" }];
this.rows= [{ fieldName: "Country", fieldCaption: "Country" }];
this.columns= [{ fieldName:"Product", fieldCaption: "Product" }];
this.values= [{ fieldName: "Amount", fieldCaption: "Amount" }];
}} 		property: dataSourceSettings

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: this.pivotData,
columns: [{ name: 'Year', caption: 'Production Year' }, { name:'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, {name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' },{ name: 'Products' }]};
}}
Rows property: rows

<ej-pivotgrid [dataSource.rows]="rows"></ej-pivotgrid>

export class PivotGridComponent {
public rows;
constructor() {
this.rows= [{ fieldName: "Country", fieldCaption: "Country" }];
}} 		property: rows

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
rows: [{ name: 'Country' },{ name: 'Products' }]};
}}
Columns property: columns

<ej-pivotgrid [dataSource.columns]="columns"></ej-pivotgrid>

export class PivotGridComponent {
public columns;
constructor() {
this.columns= [{ fieldName: "Product", fieldCaption: "Product" }];
}} 		property: columns

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
columns: [{ name: 'Year' },{ name: 'Production Year' }]};
}}
Values property: values

<ej-pivotgrid [dataSource.values]="values"></ej-pivotgrid>

export class PivotGridComponent {
public values;
constructor() {
this.values= [{ fieldName: "Amount", fieldCaption: "Amount" }];
}} 		property: values

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
values: [{ name: 'Amount' }]};
}}
Filters property: filters

<ej-pivotgrid [dataSource.filters]="filters"></ej-pivotgrid>

export class PivotGridComponent {
public filters;
constructor() {
this.filters= [{ fieldName: "Product", fieldCaption: "Product" }];
}} 		property: filters

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel
ngOnInit(): void {
this.dataSourceSettings = {
filters: [{ name: 'Year' },{ name: 'Production Year' }]};
}}
Value axis position Not Applicable property: valueAxis

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel
ngOnInit(): void {
this.dataSourceSettings = {
valueAxis: 'row';
}}

Aggregation

Behavior API in Essential® JS 1 API in Essential® JS 2
Summary Type property: summaryType

<ej-pivotgrid [dataSource.values]="values"></ej-pivotgrid>

export class PivotGridComponent {
public values;
constructor() {
this.values= [{ fieldName: "Amount", fieldCaption: "Amount", summaryType: ej.PivotAnalysis.SummaryType.Count }];
}} 		property: type

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
values: [{ name: 'Amount', type: 'Count' }]};
}}

Number Format

Behavior API in Essential® JS 1 API in Essential® JS 2
Format settings property: format

<ej-pivotgrid [dataSource.values]="values"></ej-pivotgrid>

export class PivotGridComponent {
public values;
constructor() {
this.values= [{ fieldName: "Amount", fieldCaption: "Amount", format: "currency" }];
}} 		property: formatSettings

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
formatSettings: [{ name: 'balance', format: 'C' },
{ name: 'date', format: 'dd/MM/yyyy-hh:mm', type: 'date' }]};
}}

Summary Customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Show/hide grand totals property: enableGrandTotal

<ej-pivotgrid [dataSource.enableGrandTotal]="false"></ej-pivotgrid> 		property: showGrandTotals

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
showGrandTotals: false};
}}
Show/hide row grand totals property: enableRowGrandTotal

<ej-pivotgrid [dataSource.enableRowGrandTotal]="false"></ej-pivotgrid> 		property: showRowGrandTotals

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
showRowGrandTotals: false};
}}
Show/hide column grand totals property: enableColumnGrandTotal

<ej-pivotgrid [dataSource.enableColumnGrandTotal]="false"></ej-pivotgrid> 		property: showColumnGrandTotals

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
showColumnGrandTotals: false};
}}
Show/hide sub-totals Not Applicable property: showSubTotals

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
showSubTotals: false};
}}
Show/hide row sub-totals Not Applicable property: showRowSubTotals

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
showRowSubTotals: false};
}}
Show/hide column sub-totals Not Applicable property: showColumnSubTotals

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
showColumnSubTotals: false};
}}
Show/hide sub-totals for specific field property: showSubTotal

<ej-pivotgrid [dataSource.rows]="rows"></ej-pivotgrid>

export class PivotGridComponent {
public rows;
constructor() {
this.rows= [{ name: 'company', showSubTotal: false }];
}}
}; 		property: showSubTotals

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
rows: [{ name: 'company', showSubTotals: false }]
};
}}

Drill operation

Behavior API in Essential® JS 1 API in Essential® JS 2
Expand All property: enableCollapseByDefault

<ej-pivotgrid [enableCollapseByDefault]="true"></ej-pivotgrid> 		property: expandAll

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel
ngOnInit(): void {
this.dataSourceSettings = {
expandAll: false;
}}
Drill Up/Down property: collapsedMembers

<ej-pivotgrid [collapsedMembers]="collapsedMembers"></ej-pivotgrid>

export class PivotGridComponent {
public collapsedMembers;
constructor() {
collapsedMembers: { Country: ["Canada", "France"] };
}} 		property: drilledMembers

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel
ngOnInit(): void {
this.dataSourceSettings = {
drilledMembers: [{ name: 'Country', items: ['France'] }];
}}

Field List

Behavior API in Essential® JS 1 API in Essential® JS 2
Show/hide field list Not Applicable property: showFieldList

<ejs-pivotview #pivotview id='PivotView' showFieldList='true'></ejs-pivotview>
Defer update property: enableDeferUpdate

<ej-pivotgrid [enableDeferUpdate]="true"></ej-pivotgrid> 		Not Applicable
Control initialization component: PivotSchemaDesigner

<ej-pivotschemadesigner id="PivotSchemaDesigner1"></ej-pivotschemadesigner> 		component: PivotFieldList

<ejs-pivotfieldlist #pivotfieldlist id='PivotFieldList' [dataSourceSettings]=dataSourceSettings></ejs-pivotfieldlist>
Render mode Not Applicable property: renderMode

<ejs-pivotfieldlist #pivotfieldlist id='PivotFieldList' [dataSourceSettings]=dataSourceSettings renderMode="Fixed"></ejs-pivotfieldlist>
Show/hide calculated field button Not Applicable property: allowCalculatedField

<ejs-pivotfieldlist #pivotfieldlist id='PivotFieldList' [dataSourceSettings]=dataSourceSettings allowCalculatedField="true"></ejs-pivotfieldlist>
Show/hide values button Not Applicable property: showValuesButton

<ejs-pivotfieldlist #pivotfieldlist id='PivotFieldList' [dataSourceSettings]=dataSourceSettings showValuesButton="true"></ejs-pivotfieldlist>

Grouping Bar

Behavior API in Essential® JS 1 API in Essential® JS 2
Show/hide Grouping bar property: enableGroupingBar

<ej-pivotgrid [enableGroupingBar]="true"></ej-pivotgrid> 		property: showGroupingBar

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings showGroupingBar='true'></ejs-pivotview>
Grouping Bar Settings Not Applicable property: groupingBarSettings

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings showGroupingBar='true'[groupingBarSettings]='groupingSettings'></ejs-pivotview>

export class AppComponent implements OnInit {
public groupingSettings: GroupingBarSettings;
ngOnInit(): void {
this.groupingSettings = {
showFilterIcon: false
} as GroupingBarSettings;
}}
Show/hide values button Not Applicable property: showValuesButton

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings showValuesButton='true'></ejs-pivotview>

Filtering

Behavior API in Essential® JS 1 API in Essential® JS 2
Filter settings property: filterItems

<ej-pivotgrid [dataSource.columns]="columns"></ej-pivotgrid>

export class PivotGridComponent {
public columns;
constructor() {
this.columns= [{ fieldName: "Product", fieldCaption: "Product", filterItems: {
filterType: ej.PivotAnalysis.FilterType.Include,
values: ["Bike", "Car"]} }];
}} 		property: filterSettings

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
filterSettings: [{ name: 'Country', type: 'Exclude', items: ['United States'] }]};
}}

Maximum node limit in member editor

Behavior API in Essential® JS 1 API in Essential® JS 2
Max node limit in member editor property: maxNodeLimitInMemberEditor

<ej-pivotgrid [maxNodeLimitInMemberEditor]="100"></ej-pivotgrid> 		property: maxNodeLimitInMemberEditor

<ejs-pivotview #pivotview id='PivotView' maxNodeLimitInMemberEditor='100'></ejs-pivotview>

No Data Items

Behavior API in Essential® JS 1 API in Essential® JS 2
Show/hide “no data” items Not Applicable property: showNoDataItems

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
rows: [{ name: 'company', showNoDataItems: true }]};
}}

Advanced filtering

Behavior API in Essential® JS 1 API in Essential® JS 2
Label filtering property: enableAdvancedFilter

<ej-pivotgrid [dataSource.rows]="rows" [enableAdvancedFilter]="true"></ej-pivotgrid>

export class PivotGridComponent {
public rows;
constructor() {
this.rows= [{ fieldName: "Country", fieldCaption: "Country", advancedFilter : [{
labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith,
values: ["es"] }]
}];
}} 		property: allowLabelFilter

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
allowLabelFilter: true,
filterSettings: [{
name: 'product',
type: 'Label',
condition: 'Between',
value1: 'e',
value2: 'v' }]
}}
Value filtering property: enableAdvancedFilter

<ej-pivotgrid [dataSource.rows]="rows" [enableAdvancedFilter]="true"></ej-pivotgrid>

export class PivotGridComponent {
public rows;
constructor() {
this.rows= [{ fieldName: "Country", fieldCaption: "Country", advancedFilter:[{
valueFilterOperator: ej.olap.ValueFilterOptions.GreaterThan,
values: ["200"] }]
}];
}} 		property: allowValueFilter

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
allowValueFilter: true,
filterSettings: [{
name: 'product',
measure: 'quantity',
type: 'Value',
condition: 'Between',
value1: '3250' }]
}}

Drill Through

Behavior API in Essential® JS 1 API in Essential® JS 2
Show/hide drill though feature property: enableDrillThrough

<ej-pivotgrid [enableDrillThrough]="true"></ej-pivotgrid> 		property: allowDrillThrough

<ejs-pivotview #pivotview id='PivotView' allowDrillThrough='true'></ejs-pivotview>
Event Triggers when cell clicked in pivot table widget event: drillThrough

<ej-pivotgrid (drillThrough)="onDrillThrough($event)"></ej-pivotgrid>

export class PivotGridComponent {
onDrillThrough(args) {}
} 		event: drillThrough

<ejs-pivotview #pivotview id='PivotView' (drillThrough)='onDrillThrough($event)'></ejs-pivotview>

export class AppComponent {
onDrillThrough(args): void {}
}

Cell Editing

Behavior API in Essential® JS 1 API in Essential® JS 2
Edit settings Not Applicable property: editSettings

<ejs-pivotview #pivotview id='PivotView' [editSettings]=editSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public editSettings: CellEditSettings;
ngOnInit(): void {
this.editSettings = {};
}}
Show/hide cell editing feature property: enableCellEditing

<ej-pivotgrid [enableCellEditing]="true"></ej-pivotgrid> 		property: allowEditing

<ejs-pivotview #pivotview id='PivotView' [editSettings]=editSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public editSettings: CellEditSettings;
ngOnInit(): void {
this.editSettings = {
allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Normal'
};
}}
Behavior API in Essential® JS 1 API in Essential® JS 2
Hyperlink settings property: hyperlinkSettings

<ej-pivotgrid [hyperlinkSettings]="hyperlinkSettings"></ej-pivotgrid>

export class PivotGridComponent {
public hyperlinkSettings;
constructor() {
this.hyperlinkSettings= {};
}} 		property: hyperlinkSettings

<ejs-pivotview #pivotview id='PivotView' [hyperlinkSettings]=hyperlinkSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public hyperlinkSettings: HyperLinkSettings;
ngOnInit(): void {
this.hyperlinkSettings = {};
}}
Show/hide hyperlink to all cells Not Applicable property: showHyperlink

<ejs-pivotview #pivotview id='PivotView' [hyperlinkSettings]=hyperlinkSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public hyperlinkSettings: HyperLinkSettings;
ngOnInit(): void {
this.hyperlinkSettings = {
showHyperlink: 'true'
};
}}
Show/hide hyperlink to row headers property: enableRowHeaderHyperlink

<ej-pivotgrid [hyperlinkSettings]="hyperlinkSettings"></ej-pivotgrid>

export class PivotGridComponent {
public hyperlinkSettings;
constructor() {
this.hyperlinkSettings= { enableRowHeaderHyperlink: "true"};
}} 		property: showRowHeaderHyperlink

<ejs-pivotview #pivotview id='PivotView' [hyperlinkSettings]=hyperlinkSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public hyperlinkSettings: HyperLinkSettings;
ngOnInit(): void {
this.hyperlinkSettings = {
showRowHeaderHyperlink: 'true'
};
}}
Show/hide hyperlink to column headers property: enableColumnHeaderHyperlink

<ej-pivotgrid [hyperlinkSettings]="hyperlinkSettings"></ej-pivotgrid>

export class PivotGridComponent {
public hyperlinkSettings;
constructor() {
this.hyperlinkSettings= { enableColumnHeaderHyperlink: "true"};
}} 		property: showColumnHeaderHyperlink

<ejs-pivotview #pivotview id='PivotView' [hyperlinkSettings]=hyperlinkSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public hyperlinkSettings: HyperLinkSettings;
ngOnInit(): void {
this.hyperlinkSettings = {
showColumnHeaderHyperlink: 'true'
};
}}
Show/hide hyperlink to value cells property: enableValueCellHyperlink

<ej-pivotgrid [hyperlinkSettings]="hyperlinkSettings"></ej-pivotgrid>

export class PivotGridComponent {
public hyperlinkSettings;
constructor() {
this.hyperlinkSettings= { enableValueCellHyperlink: "true"};
}} 		property: showValueCellHyperlink

<ejs-pivotview #pivotview id='PivotView' [hyperlinkSettings]=hyperlinkSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public hyperlinkSettings: HyperLinkSettings;
ngOnInit(): void {
this.hyperlinkSettings = {
showValueCellHyperlink: 'true'
};
}}
Show/hide hyperlink to summary cells property: enableSummaryCellHyperlink

<ej-pivotgrid [hyperlinkSettings]="hyperlinkSettings"></ej-pivotgrid>

export class PivotGridComponent {
public hyperlinkSettings;
constructor() {
this.hyperlinkSettings= { enableSummaryCellHyperlink: "true"};
}} 		property: showSummaryCellHyperlink

<ejs-pivotview #pivotview id='PivotView' [hyperlinkSettings]=hyperlinkSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public hyperlinkSettings: HyperLinkSettings;
ngOnInit(): void {
this.hyperlinkSettings = {
showSummaryCellHyperlink: 'true'
};
}}
Show/hide hyperlink using specific conditions Not Applicable property: conditionalSettings

<ejs-pivotview #pivotview id='PivotView' [hyperlinkSettings]=hyperlinkSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public hyperlinkSettings: HyperLinkSettings;
ngOnInit(): void {
this.hyperlinkSettings = {
conditionalSettings: [{
measure: 'Units Sold', conditions: 'Between', value1: 150, value2: 200
}]};
}}
Show/hide hyperlink for row or column Not Applicable property: headerText

<ejs-pivotview #pivotview id='PivotView' [hyperlinkSettings]=hyperlinkSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public hyperlinkSettings: HyperLinkSettings;
ngOnInit(): void {
this.hyperlinkSettings = {
headerText: 'FY 2015.Q1.Units Sold'
};
}}
Event Triggers when row headers clicked in pivot table widget event: rowHeaderHyperlinkClick

<EJ.PivotGrid id="PivotGrid" rowHeaderHyperlinkClick= "onRowHeaderHyperlinkClick"></EJ.PivotGrid>

function onRowHeaderHyperlinkClick(){ } 		event: hyperlinkCellClick

<ejs-pivotview #pivotview id='PivotView' (hyperlinkCellClick)='onHyperlinkCellClick($event)'></ejs-pivotview>

export class AppComponent {
onHyperlinkCellClick(args): void {}
}
Event Triggers when column headers clicked in pivot table widget event: columnHeaderHyperlinkClick

<ej-pivotgrid [dataSource]="dataSource" (columnHeaderHyperlinkClick)="onColumnHeaderHyperlinkClick($event)"></ej-pivotgrid>

export class PivotGridComponent {
onColumnHeaderHyperlinkClick(args) {}
} 		event: hyperlinkCellClick

<ejs-pivotview #pivotview id='PivotView' (hyperlinkCellClick)='onHyperlinkCellClick($event)'></ejs-pivotview>

export class AppComponent {
onHyperlinkCellClick(args): void {}
}
Event Triggers when value cells clicked in pivot table widget event: valueCellHyperlinkClick

<ej-pivotgrid [dataSource]="dataSource" (valueCellHyperlinkClick)="onValueCellHyperlinkClick($event)"></ej-pivotgrid>

export class PivotGridComponent {
onValueCellHyperlinkClick(args) {}
} 		event: hyperlinkCellClick

<ejs-pivotview #pivotview id='PivotView' (hyperlinkCellClick)='onHyperlinkCellClick($event)'></ejs-pivotview>

export class AppComponent {
onHyperlinkCellClick(args): void {}
}
Event Triggers when summary cells clicked in pivot table widget event: summaryCellHyperlinkClick

<ej-pivotgrid [dataSource]="dataSource" (summaryCellHyperlinkClick)="onSummaryCellHyperlinkClick($event)"></ej-pivotgrid>

export class PivotGridComponent {
onSummaryCellHyperlinkClick(args) {}
} 		event: hyperlinkCellClick

<ejs-pivotview #pivotview id='PivotView' (hyperlinkCellClick)='onHyperlinkCellClick($event)'></ejs-pivotview>

export class AppComponent {
onHyperlinkCellClick(args): void {}
}

Defer Layout Update

Behavior API in Essential® JS 1 API in Essential® JS 2
Show/hide defer layout update property: enableDeferUpdate

<ej-pivotgrid [enableDeferUpdate]="true"></ej-pivotgrid> 		property: allowDeferLayoutUpdate

<ejs-pivotview #pivotview id='PivotView' allowDeferLayoutUpdate='true'></ejs-pivotview>

Sorting

Behavior API in Essential® JS 1 API in Essential® JS 2
Enable/disable sorting Not Applicable property: enableSorting

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel
ngOnInit(): void {
this.dataSourceSettings = {
enableSorting: false;
}}
Sort settings property: sortOrder

<ej-pivotgrid [dataSource.rows]="rows"></ej-pivotgrid>

export class PivotGridComponent {
public rows;
constructor() {
this.rows= [{
fieldName: "Country",
fieldCaption: "Country",
sortOrder: ej.PivotAnalysis.SortOrder.Descending
}];
}}
 property: sortSettings

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
sortSettings: [{
name: 'company',
order: 'Descending' }]};
}}

Value Sorting

Behavior API in Essential® JS 1 API in Essential® JS 2
Enable/disable value sorting Not Applicable property: enableValueSorting

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings enableValueSorting='true'></ejs-pivotview>
Value sort settings property: valueSortSettings

<ej-pivotgrid [valueSortSettings]="valueSortSettings"></ej-pivotgrid>

export class PivotGridComponent {
public valueSortSettings;
constructor() {
this.valueSortSettings= {
headerText: "Bike##Quantity",
headerDelimiters: "##",
sortOrder: ej.PivotAnalysis.SortOrder.Descending
};
}} 		property: valueSortSettings

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
valueSortSettings: {
headerText: 'FY 2015##Sold Amount',
headerDelimiter: '##',
sortOrder: 'Descending' }};
}}

Calculated Field

Behavior API in Essential® JS 1 API in Essential® JS 2
Show/hide calculated field Not Applicable property: allowCalculatedField

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings allowCalculatedField='true'></ejs-pivotview>
Calculated field settings property: values

<ej-pivotgrid [dataSource.values]="values"></ej-pivotgrid>

export class PivotGridComponent {
public values;
constructor() {
this.values=[{
fieldName:"Amount",
fieldCaption:"Amount"
},
{
fieldName:"Price",
fieldCaption: "Price",
isCalculatedField: true,
formula: "Amount*15"}],
}} 		property: calculatedFieldSettings

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings showFieldList='true' allowCalculatedField='true'></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
values: [{
name: 'price', type: 'CalculatedField' }],
calculatedFieldSettings: [{
name: 'Total',
formula: '"Sum(Amount)"+"Sum(Sold)"' }]
};
}}

Paging

Behavior API in Essential® JS 1 API in Essential® JS 2
Paging property: enablePaging

<ej-pivotgrid id="PivotGrid1" [enablePaging]="true"></ej-pivotgrid> 		Not Applicable
Virtual scrolling property: enableVirtualScrolling

<ej-pivotgrid id="PivotGrid1" [enableVirtualScrolling]="true"> 		property: enableVirtualization

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings enableVirtualization='true'></ejs-pivotview>

Conditional Formatting

Behavior API in Essential® JS 1 API in Essential® JS 2
Show/hide conditional formatting property: enableConditionalFormatting

<ej-pivotgrid [enableConditionalFormatting]="true"></ej-pivotgrid> 		property: allowConditionalFormatting

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings allowConditionalFormatting='true'></ejs-pivotview>
Conditional formatting settings property: conditionalFormatSettings

<ej-pivotgrid [conditionalFormatSettings]="conditionalFormatSettings"></ej-pivotgrid>

export class PivotGridComponent {
public conditionalFormatSettings;
constructor() {
this.conditionalFormatSettings: [{
name: "Format2",
style: {
"color": "#000000",
"backgroundcolor": "#0000FF",
"bordercolor": "#000000",
"borderstyle": "Dashed",
"borderwidth": "5",
"fontsize": "12",
"fontstyle": "Algerian" },
condition: ej.PivotGrid.ConditionalOptions.LessThan,
value: "200",
measures: "Amount,Quantity" }];
}} 		property: conditionalFormatSettings

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>

export class AppComponent implements OnInit {
public dataSourceSettings: DataSourceSettingsModel;
ngOnInit(): void {
this.dataSourceSettings = {
conditionalFormatSettings: [{
measure: 'In Stock',
value1: 5000,
conditions: 'LessThan',
style: {
backgroundColor: '#80cbc4',
color: 'black',
fontFamily: 'Tahoma',
fontSize: '12px' }
}]};
}}

Exporting

Behavior API in Essential® JS 1 API in Essential® JS 2
Excel Export Not Applicable property: allowExcelExport

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings allowExcelExport='true'></ejs-pivotview>
Pdf Export Not Applicable property: allowPdfExport

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings allowPdfExport='true'></ejs-pivotview>

Grid Customization

Behavior API in Essential® JS 1 API in Essential® JS 2
Set width for pivot table Not Applicable property: width

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings width='100%'></ejs-pivotview>
Set height for pivot table Not Applicable property: height

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings height='500'></ejs-pivotview>
Set row height for pivot table Not Applicable property: rowHeight

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings [gridSettings]='gridSettings'></ejs-pivotview>

export class AppComponent implements OnInit {
public gridSettings: GridSettings;
ngOnInit(): void {
this.gridSettings = {
rowHeight: 60;
} as GridSettings;
}}
Set column width for pivot table Not Applicable property: columnWidth

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings [gridSettings]='gridSettings'></ejs-pivotview>

export class AppComponent implements OnInit {
public gridSettings: GridSettings;
ngOnInit(): void {
this.gridSettings = {
columnWidth: 120;
} as GridSettings;
}}
Drag and drop column headers in pivot table Not Applicable property: allowReordering

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings [gridSettings]='gridSettings'></ejs-pivotview>

export class AppComponent implements OnInit {
public gridSettings: GridSettings;
ngOnInit(): void {
this.gridSettings = {
allowReordering: true;
} as GridSettings;
}}
Resizing the column headers in pivot table property: enableColumnResizing

<ej-pivotgrid [enableColumnResizing]="true"></ej-pivotgrid> 		property: allowResizing

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings [gridSettings]='gridSettings'></ejs-pivotview>

export class AppComponent implements OnInit {
public gridSettings: GridSettings;
ngOnInit(): void {
this.gridSettings = {
allowResizing: true;
} as GridSettings;
}}
Wrap the cell content in pivot table Not Applicable property: allowTextWrap

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings [gridSettings]='gridSettings'></ejs-pivotview>

export class AppComponent implements OnInit {
public gridSettings: GridSettings;
ngOnInit(): void {
this.gridSettings = {
allowTextWrap: true;
} as GridSettings;
}}
Display cell border in pivot table Not Applicable property: gridLines

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings [gridSettings]='gridSettings'></ejs-pivotview>

export class AppComponent implements OnInit {
public gridSettings: GridSettings;
ngOnInit(): void {
this.gridSettings = {
gridLines: 'Vertical';
} as GridSettings;
}}
Cell selection property: enableCellSelection

<ej-pivotgrid [enableCellSelection]="true"></ej-pivotgrid> 		property: allowSelection

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings [gridSettings]='gridSettings'></ejs-pivotview>

export class AppComponent implements OnInit {
public gridSettings: GridSettings;
ngOnInit(): void {
this.gridSettings = {
allowSelection: true,
selectionSettings: {
cellSelectionMode: 'Box',
type: 'Multiple',
mode: 'Cell'}
} as GridSettings;
}}
Display overflow cell content in pivot table Not Applicable property: clipMode

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings [gridSettings]='gridSettings'></ejs-pivotview>

export class AppComponent implements OnInit {
public gridSettings: GridSettings;
ngOnInit(): void {
this.gridSettings = {
clipMode: 'Clip';
} as GridSettings;
}}
Cell Editing property: enableCellEditing

<ej-pivotgrid [enableCellEditing]="true"></ej-pivotgrid> 		Not Applicable
Cell double click property: enableCellDoubleClick

<ej-pivotgrid [enableCellDoubleClick]="true"></ej-pivotgrid> 		Not Applicable
Cell context property: enableCellContext

<ej-pivotgrid [enableCellContext]="true"></ej-pivotgrid> 		Not Applicable

Accessibility

Behavior API in Essential® JS 1 API in Essential® JS 2
Localization property: locale

<ej-pivotgrid id="PivotGrid1" locale="fr-FR"></ej-pivotgrid> 		property: locale

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings locale='de-DE'></ejs-pivotview>
Right to left property: enableRTL

<ej-pivotgrid [enableRTL]="true"></ej-pivotgrid> 		property: enableRtl

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings enableRtl=true></ejs-pivotview>

Common

Behavior API in Essential® JS 1 API in Essential® JS 2
Adding custom class to wrapper element property: cssClass

<ej-pivotgrid [cssClass]="custom-class"></ej-pivotgrid> 		property: cssClass

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings cssClass='custom-class'></ejs-pivotview>
Event triggers when control initializing event: load

<ej-pivotgrid [dataSource]="dataSource" (load)="onLoad($event)"></ej-pivotgrid>

export class PivotGridComponent {
onLoad(args) {}
} 		event: load

<ejs-pivotview #pivotview id='PivotView' (load)='onLoad($event)'></ejs-pivotview>

export class AppComponent {
onLoad(): void {}
}
Event Triggers before the pivot engine starts event: beforePivotEnginePopulate

<ej-pivotgrid [dataSource]="dataSource" (beforePivotEnginePopulate)="onbeforePivotEnginePopulate($event)"></ej-pivotgrid>

export class PivotGridComponent {
onbeforePivotEnginePopulate(args) {}
} 		event: enginePopulating

<ejs-pivotview #pivotview id='PivotView' (load)='onLoad($event)'></ejs-pivotview>

export class AppComponent {
onLoad(): void {}
}
Event Triggers after the pivot engine populated event: afterPivotEnginePopulate

<ej-pivotgrid [dataSource]="dataSource" (afterPivotEnginePopulate)="onafterPivotEnginePopulate($event)"></ej-pivotgrid>

export class PivotGridComponent {
onafterPivotEnginePopulate(args) {}
} 		event: enginePopulated

<ejs-pivotview #pivotview id='PivotView' (load)='onLoad($event)'></ejs-pivotview>

export class AppComponent {
onLoad(): void {}
}
Event Triggers after the control populated with data source event: renderSuccess

<ej-pivotgrid [dataSource]="dataSource" (renderSuccess)="onrenderSuccess($event)"></ej-pivotgrid>

export class PivotGridComponent {
onrenderSuccess(args) {}
} 		event: dataBound

<ejs-pivotview #pivotview id='PivotView' (dataBound)='ondataBound($event)'></ejs-pivotview>

export class AppComponent {
ondataBound(): void {}
}
Event Triggers after the control created Not Applicable event: created

<ejs-pivotview #pivotview id='PivotView' (created)='oncreated($event)'></ejs-pivotview>

export class AppComponent {
oncreated(): void {}
}
Event Triggers when destroy the control Not Applicable event: destroyed

<ejs-pivotview #pivotview id='PivotView'(destroyed)='ondestroyed($event)'></ejs-pivotview>

export class AppComponent {
ondestroyed(): void {}
}
Event Triggers the cell clicked in pivot table widget event: cellClick

<ej-pivotgrid [dataSource]="dataSource" (cellClick)="oncellClick($event)"></ej-pivotgrid>

export class PivotGridComponent {
oncellClick(args) {}
} 		event: cellClick

<ejs-pivotview #pivotview id='PivotView' (cellClick)='oncellClick($event)'></ejs-pivotview>

export class AppComponent {
oncellClick(): void {}
}
Keeping the model values in cookies Not Applicable property: enablePersistence

<ejs-pivotview #pivotview id='PivotView' enablePersistence='true'></ejs-pivotview>