Ej1 api migration in EJ2 TypeScript Pivotview control

2 May 202324 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
Data source property: dataSource

new ej.PivotGrid($(“#PivotGrid”), {
dataSource: {
data: []
});		 property: dataSourceSettings

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: []
}});
pivotGridObj.appendTo(‘#PivotGrid’);
Rows property: rows

new ej.PivotGrid($(“#PivotGrid”),{
dataSource: {
rows: [{fieldName: “Country”,fieldCaption: “Country”}] }
});		 property: rows

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
rows: [{ name: ‘company’, caption: ‘Industry’ }]}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Columns property: columns

new ej.PivotGrid($(“#PivotGrid”), {
dataSource: {
columns: [ { fieldName: “Country”,fieldCaption: “Country” } ] }
});		 property: columns

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
columns: [{ name: ‘company’, caption: ‘Industry’ }]}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Values property: values

new ej.PivotGrid($(“#PivotGrid”), {
dataSource: {
values: [ { fieldName: “balance”, fieldCaption: “Balance($)” } ] }
});		 property: values

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
values: [{ name: ‘balance’, caption: ‘Balance($)’ }]}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Filters property: filters

new ej.PivotGrid($(“#PivotGrid”),{
dataSource: {
filters: [ { fieldName: “Country”, fieldCaption: “Country” } ] }
});		 property: filters

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
filters: [{ name: ‘company’, caption: ‘Industry’ }]}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Value axis position Not Applicable property: valueAxis

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: { valueAxis: ‘row’}
});
pivotGridObj.appendTo(‘#PivotGrid’);

Aggregation

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

new ej.PivotGrid($(“#PivotGrid”), {
dataSource: {
values: [ {
fieldName: “balance”,
fieldCaption: “Balance($)”,
summaryType: ej.PivotAnalysis.SummaryType.Count
} ] }
});		 property: type

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
values: [{ name: ‘balance’, caption: ‘Balance($)’, type: ‘Count’ }]}
});
pivotGridObj.appendTo(‘#PivotGrid’);

Number Format

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

$new ej.PivotGrid($(“#PivotGrid”), {
dataSource: {
values: [ { fieldName: “balance”, fieldCaption: “Balance($)”, format: “currency” } ] }
});		 property: formatSettings

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
formatSettings: [{ name: ‘balance’, format: ‘C’ },
{ name: ‘date’, format: ‘dd/MM/yyyy-hh:mm’, type: ‘date’ }]}
});
pivotGridObj.appendTo(‘#PivotGrid’);

Summary Customization

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

new ej.PivotGrid($(“#PivotGrid”), {
enableGrandTotal: false
});		 property: showGrandTotals

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
showGrandTotals: false
}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide row grand totals property: enableRowGrandTotal

new ej.PivotGrid($(“#PivotGrid”), {
enableRowGrandTotal: false
});		 property: showRowGrandTotals

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
showRowGrandTotals: false
}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide column grand totals property: enableColumnGrandTotal

new ej.PivotGrid($(“#PivotGrid”), {
enableColumnGrandTotal: false
});		 property: showColumnGrandTotals

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
showColumnGrandTotals: false
}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide sub-totals Not Applicable property: showSubTotals

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
showSubTotals: false
}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide row sub-totals Not Applicable property: showRowSubTotals

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
showRowSubTotals: false
}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide column sub-totals Not Applicable property: showColumnSubTotals

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
showColumnSubTotals: false
}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide sub-totals for specific field property: showSubTotal

new ej.PivotGrid($(“#PivotGrid”),{
dataSource: {
rows: [{ fieldName: “Country”, showSubTotal : false}] }
});		 property: showSubTotals

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
rows: [{ name: ‘company’, showSubTotals: false }]}
});
pivotGridObj.appendTo(‘#PivotGrid’);

Drill operation

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

new ej.PivotGrid($(“#PivotGrid”), {
enableCollapseByDefault:true
});		 property: expandAll

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
expandAll: false
}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Drill Up/Down property: collapsedMembers

new ej.PivotGrid($(“#PivotGrid”), {
collapsedMembers: { Country: [“Canada”, “France”] }
});		 property: drilledMembers

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
drilledMembers: [{ name: ‘Country’, items: [‘France’] }]
}
});
pivotGridObj.appendTo(‘#PivotGrid’);

Field List

Behavior API in Essential JS 1 API in Essential JS 2
Show/hide field list pop-up button on pivot table Not Applicable property: showFieldList

let pivotGridObj: PivotView = new PivotView({
showFieldList: true
});
pivotGridObj.appendTo(‘#PivotGrid’);
Defer update property: enableDeferUpdate

new ej.PivotGrid($(“#PivotGrid”), {
enableDeferUpdate: true
});		 Not Applicable
Control initialization component: PivotSchemaDesigner

new ej.PivotSchemaDesigner($(“#PivotSchemaDesigner”), {});
 component: PivotFieldList

let fieldlistObj: PivotFieldList = new PivotFieldList({});
fieldlistObj.appendTo(‘#FieldList’);
Render mode Not Applicable property: renderMode

let fieldlistObj: PivotFieldList = new PivotFieldList({
renderMode: ‘Fixed’});
fieldlistObj.appendTo(‘#FieldList’);
Show/hide calculated field button Not Applicable property: allowCalculatedField

let fieldlistObj: PivotFieldList = new PivotFieldList({
allowCalculatedField: true
});
fieldlistObj.appendTo(‘#FieldList’);
Show/hide value group button Not Applicable property: showValuesButton

let fieldlistObj: PivotFieldList = new PivotFieldList({
showValuesButton: true
});
fieldlistObj.appendTo(‘#FieldList’);

Grouping Bar

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

new ej.PivotGrid($(“#PivotGrid”), {
enableGroupingBar: true
});		 property: showGroupingBar

let pivotGridObj: PivotView = new PivotView({
showGroupingBar: true
});
pivotGridObj.appendTo(‘#PivotGrid’);
Grouping Bar Settings Not Applicable property: groupingBarSettings

let pivotGridObj: PivotView = new PivotView({
groupingBarSettings: {
showFilterIcon: false,
showSortIcon: true,
showRemoveIcon: false}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide value group button Not Applicable property: showValuesButton

let pivotGridObj: PivotView = new PivotView({
showValuesButton: true
});
pivotGridObj.appendTo(‘#PivotGrid’);

Filtering

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

new ej.PivotGrid($(“#PivotGrid”), {
dataSource: {
rows: [ {fieldName: “country”,
filterItems : {
filterType: ej.PivotAnalysis.FilterType.Exclude,
values: [“Canada”, “France”] }
} ] }
});		 property: filterSettings

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
filterSettings: [{
name: ‘eyeColor’,
type: ‘Exclude’, items: [‘blue’] }]
}});
pivotGridObj.appendTo(‘#PivotGrid’);

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

new ej.PivotGrid($(“#PivotGrid”), {
maxNodeLimitInMemberEditor: 100
});		 property: maxNodeLimitInMemberEditor

let pivotGridObj: PivotView = new PivotView({
maxNodeLimitInMemberEditor: 100
});
pivotGridObj.appendTo(‘#PivotGrid’);

No Data Items

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

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
rows: [{
name: ‘eyeColor’, showNoDataItems: true }]
}});
pivotGridObj.appendTo(‘#PivotGrid’);

Excel-like filtering

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

new ej.PivotGrid($(“#PivotGrid”), {
enableAdvancedFilter: true,
dataSource: {
rows: [ { fieldName: “country”,
advancedFilter : [{
labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith,
values: [“es”] }]
} ] }
});		 property: allowLabelFilter

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
allowLabelFilter: true,
filterSettings: [{
name: ‘product’,
type: ‘Label’,
condition: ‘Between’,
value1: ‘e’,
value2: ‘v’ }]
}});
pivotGridObj.appendTo(‘#PivotGrid’);
Value filtering property: enableAdvancedFilter

new ej.PivotGrid($(“#PivotGrid”), {
enableAdvancedFilter: true,
dataSource: {
rows: [{ {
rows: [{ fieldName: “country”,
advancedFilter : [{
measure: “balance”,
valueFilterOperator: ej.olap.ValueFilterOptions.GreaterThan,
values: [“200”] }]
} ]}
});		 property: allowValueFilter

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
allowValueFilter: true,
filterSettings: [{
name: ‘product’,
measure: ‘quantity’,
type: ‘Value’,
condition: ‘Between’,
value1: ‘3250’,
value2: ‘5000’ }]
}});
pivotGridObj.appendTo(‘#PivotGrid’);

Sorting

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

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
enableSorting: false
}});
pivotGridObj.appendTo(‘#PivotGrid’);
Sort settings property: sortOrder

new ej.PivotGrid($(“#PivotGrid”), {
dataSource: {
rows: [{
fieldName: “Country”,
sortOrder : ej.PivotAnalysis.SortOrder.Descending }]
} });
 property: sortSettings

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
sortSettings: [{
name: ‘company’,
order: ‘Descending’ }]
}});
pivotGridObj.appendTo(‘#PivotGrid’);

Value Sorting

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

let pivotGridObj: PivotView = new PivotView({
enableValueSorting: true
});
pivotGridObj.appendTo(‘#PivotGrid’);
Value sort settings property: valueSortSettings

new ej.PivotGrid($(“#PivotGrid”), {
valueSortSettings: {
headerText: “Bike##Quantity”,
headerDelimiters: “##”,
sortOrder: ej.PivotAnalysis.SortOrder.Descending }
});		 property: valueSortSettings

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
valueSortSettings: {
headerText: ‘FY 2015##Sold Amount’,
headerDelimiter: ‘##’,
sortOrder: ‘Descending’ }
}});
pivotGridObj.appendTo(‘#PivotGrid’);

Calculated Field

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

let pivotGridObj: PivotView = new PivotView({
allowCalculatedField: true
});
pivotGridObj.appendTo(‘#PivotGrid’);
Calculated field settings property: values

new ej.PivotGrid($(“#PivotGrid”), {
dataSource: {
values: [ {
fieldName: “Amount”, fieldCaption: “Amount”
}, {
fieldName: “Price”,
fieldCaption: “Price”,
isCalculatedField: true,
formula: “Amount*15” }] }
});		 property: calculatedFieldSettings

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
values: [{
name: ‘Total’, type: ‘CalculatedField’ }],
calculatedFieldSettings: [{
name: ‘Total’,
formula: ‘“Sum(Amount)”+”Sum(Sold)”’ }]
}});
pivotGridObj.appendTo(‘#PivotGrid’);

Paging

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

new ej.PivotGrid($(“#PivotGrid”), {
enablePaging : true
});		 Not Applicable
Virtual scrolling property: enableVirtualScrolling

new ej.PivotGrid($(“#PivotGrid”), {
enableVirtualScrolling : true
});		 property: enableVirtualization

let pivotGridObj: PivotView = new PivotView({
enableVirtualization: true});
pivotGridObj.appendTo(‘#PivotGrid’);

Conditional Formatting

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

new ej.PivotGrid($(“#PivotGrid”), {
enableConditionalFormatting: true
});		 property: allowConditionalFormatting

let pivotGridObj: PivotView = new PivotView({
allowConditionalFormatting: true
});
pivotGridObj.appendTo(‘#PivotGrid’);
Conditional formatting settings property: conditionalFormatSettings

new ej.PivotGrid($(“#PivotGrid”), {
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

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
conditionalFormatSettings: [{
measure: ‘In Stock’,
value1: 5000,
conditions: ‘LessThan’,
style: {
backgroundColor: ‘#80cbc4’,
color: ‘black’,
fontFamily: ‘Tahoma’,
fontSize: ‘12px’ }
}]
}});
pivotGridObj.appendTo(‘#PivotGrid’);

Exporting

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

let pivotGridObj: PivotView = new PivotView({
allowExcelExport: true
});
pivotGridObj.appendTo(‘#PivotGrid’);
Pdf Export Not Applicable property: allowPdfExport

let pivotGridObj: PivotView = new PivotView({
allowPdfExport: true
});
pivotGridObj.appendTo(‘#PivotGrid’);

Grid Customization

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

let pivotGridObj: PivotView = new PivotView({
width: ‘800’
});
pivotGridObj.appendTo(‘#PivotGrid’);
Set height for pivot table Not Applicable property: height

let pivotGridObj: PivotView = new PivotView({
height: ‘400’
});
pivotGridObj.appendTo(‘#PivotGrid’);
Set row height for pivot table Not Applicable property: rowHeight

let pivotGridObj: PivotView = new PivotView({
gridSettings: { rowHeight: 60 }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Set column width for pivot table Not Applicable property: columnWidth

let pivotGridObj: PivotView = new PivotView({
gridSettings: { columnWidth: 120 }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Drag and drop column headers in pivot table Not Applicable property: allowReordering

let pivotGridObj: PivotView = new PivotView({
gridSettings: { allowReordering: true}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Resizing the column headers in pivot table property: enableColumnResizing

new ej.PivotGrid($(“#PivotGrid”), {
enableColumnResizing: true
});		 property: allowResizing

let pivotGridObj: PivotView = new PivotView({
gridSettings: { allowResizing: true }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Wrap the cell content in pivot table Not Applicable property: allowTextWrap

let pivotGridObj: PivotView = new PivotView({
gridSettings: { allowTextWrap: true }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Display cell border in pivot table Not Applicable property: gridLines

let pivotGridObj: PivotView = new PivotView({
gridSettings: { gridLines:’Vertical’ }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Cell selection property: enableCellSelection

new ej.PivotGrid($(“#PivotGrid”), {
enableCellSelection: true
});		 property: allowSelection

let pivotGridObj: PivotView = new PivotView({
gridSettings: { allowSelection: true,
selectionSettings: {
cellSelectionMode: ‘Box’,
type: ‘Multiple’,
mode: ‘Cell’ } }});
pivotGridObj.appendTo(‘#PivotGrid’);
Display overflow cell content in pivot table Not Applicable property: clipMode

let pivotGridObj: PivotView = new PivotView({
gridSettings: { clipMode: ‘Clip’ }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Cell Editing property: enableCellEditing

new ej.PivotGrid($(“#PivotGrid”), {
enableCellEditing:true
});		 Not Applicable
Cell double click property: enableCellDoubleClick

new ej.PivotGrid($(“#PivotGrid”), {
enableCellDoubleClick: true
});		 Not Applicable
Cell context property: enableCellContext

new ej.PivotGrid($(“#PivotGrid”), {
enableCellContext: true
});		 Not Applicable

Drill Through

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

new ej.PivotGrid($(“#PivotGrid”), {
enableDrillThrough: true
});		 property: allowDrillThrough

let pivotGridObj: PivotView = new PivotView({
allowDrillThrough: true
});
pivotGridObj.appendTo(‘#PivotGrid’);
Event Triggers when cell clicked in pivot table widget event: drillThrough

new ej.PivotGrid($(“#PivotGrid”), {
drillThrough: function() {}
});		 event: drillThrough

let pivotGridObj: PivotView = new PivotView({
drillThrough: function() {}
});
pivotGridObj.appendTo(‘#PivotGrid’);

Cell Editing

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

let pivotGridObj: PivotView = new PivotView({
editSettings: { }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide cell editing feature property: enableCellEditing

new ej.PivotGrid($(“#PivotGrid”), {
enableCellEditing: true
});		 property: allowEditing

let pivotGridObj: PivotView = new PivotView({
editSettings: {
allowAdding: true, allowDeleting: true, allowEditing: true, mode: ‘Normal’
}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Behavior API in Essential JS 1 API in Essential JS 2
Hyperlink settings property: hyperlinkSettings

new ej.PivotGrid($(“#PivotGrid”), {
hyperlinkSettings: { }
});		 property: hyperlinkSettings

let pivotGridObj: PivotView = new PivotView({
hyperlinkSettings: { }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide hyperlink to all cells Not Applicable property: showHyperlink

let pivotGridObj: PivotView = new PivotView({
hyperlinkSettings: {
showHyperlink: true }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide hyperlink to row headers property: enableRowHeaderHyperlink

new ej.PivotGrid($(“#PivotGrid”), {
hyperlinkSettings: {
enableRowHeaderHyperlink: true }
});		 property: showRowHeaderHyperlink

let pivotGridObj: PivotView = new PivotView({
hyperlinkSettings: {
showRowHeaderHyperlink: true }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide hyperlink to column headers property: enableColumnHeaderHyperlink

new ej.PivotGrid($(“#PivotGrid”), {
hyperlinkSettings: {
enableColumnHeaderHyperlink: true }
});		 property: showColumnHeaderHyperlink

let pivotGridObj: PivotView = new PivotView({
hyperlinkSettings: {
showColumnHeaderHyperlink: true }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide hyperlink to value cells property: enableValueCellHyperlink

new ej.PivotGrid($(“#PivotGrid”), {
hyperlinkSettings: {
enableValueCellHyperlink: true }
});		 property: showValueCellHyperlink

let pivotGridObj: PivotView = new PivotView({
hyperlinkSettings: {
showValueCellHyperlink: true }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide hyperlink to summary cells property: enableSummaryCellHyperlink

new ej.PivotGrid($(“#PivotGrid”), {
hyperlinkSettings: {
enableSummaryCellHyperlink: true }
});		 property: showSummaryCellHyperlink

let pivotGridObj: PivotView = new PivotView({
hyperlinkSettings: {
showSummaryCellHyperlink: true }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide hyperlink using specific conditions Not Applicable property: conditionalSettings

let pivotGridObj: PivotView = new PivotView({
hyperlinkSettings: {
conditionalSettings: [{
measure: ‘Units Sold’, conditions: ‘Between’, value1: 150, value2: 200
}] }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Show/hide hyperlink for row or column Not Applicable property: headerText

let pivotGridObj: PivotView = new PivotView({
hyperlinkSettings: {
headerText: ‘FY 2015.Q1.Units Sold’ }
});
pivotGridObj.appendTo(‘#PivotGrid’);
Event Triggers when row headers clicked in pivot table widget event: rowHeaderHyperlinkClick

new ej.PivotGrid($(“#PivotGrid”), {
rowHeaderHyperlinkClick: function() {}
});		 event: hyperlinkCellClick

let pivotGridObj: PivotView = new PivotView({
hyperlinkCellClick: function() {}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Event Triggers when column headers clicked in pivot table widget event: columnHeaderHyperlinkClick

new ej.PivotGrid($(“#PivotGrid”), {
columnHeaderHyperlinkClick: function() {}
});		 event: hyperlinkCellClick

let pivotGridObj: PivotView = new PivotView({
hyperlinkCellClick: function() {}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Event Triggers when value cells clicked in pivot table widget event: valueCellHyperlinkClick

new ej.PivotGrid($(“#PivotGrid”), {
valueCellHyperlinkClick: function() {}
});		 event: hyperlinkCellClick

let pivotGridObj: PivotView = new PivotView({
hyperlinkCellClick: function() {}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Event Triggers when summary cells clicked in pivot table widget event: summaryCellHyperlinkClick

new ej.PivotGrid($(“#PivotGrid”), {
summaryCellHyperlinkClick: function() {}
});		 event: hyperlinkCellClick

let pivotGridObj: PivotView = new PivotView({
hyperlinkCellClick: function() {}
});
pivotGridObj.appendTo(‘#PivotGrid’);

Defer Layout Update

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

new ej.PivotGrid($(“#PivotGrid”), {
enableDeferUpdate: true
});		 property: allowDeferLayoutUpdate

let pivotGridObj: PivotView = new PivotView({
allowDeferLayoutUpdate: true
});
pivotGridObj.appendTo(‘#PivotGrid’);

Accessibility

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

new ej.PivotGrid($(“#PivotGrid”), {
locale: ‘es-ES’
});		 property: locale

let pivotGridObj: PivotView = new PivotView({
locale: ‘es-ES’
});
pivotGridObj.appendTo(‘#PivotGrid’);
Right to left property: enableRTL

new ej.PivotGrid($(“#PivotGrid”), {
enableRTL: true
});		 property: enableRtl

let pivotGridObj: PivotView = new PivotView({
enableRtl: true
});
pivotGridObj.appendTo(‘#PivotGrid’);

Common

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

new ej.PivotGrid($(“#PivotGrid”), {
cssClass: ‘custom-class’
});		 property: cssClass

let pivotGridObj: PivotView = new PivotView({
cssClass: ‘custom-class’
});
pivotGridObj.appendTo(‘#PivotGrid’);
Keeping the model values in cookies Not Applicable property:enablePersistence

let pivotGridObj: PivotView = new PivotView({
enablePersistence: true});
pivotGridObj.appendTo(‘#PivotGrid’);
Event triggers when control initializing event: load

new ej.PivotGrid($(“#PivotGrid”), {
load: function() {}
});		 event: load

let pivotGridObj: PivotView = new PivotView({
load: function() {}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Event Triggers before the pivot engine starts event: beforePivotEnginePopulate

new ej.PivotGrid($(“#PivotGrid”), {
beforePivotEnginePopulate: function() {}
});		 event: enginePopulating

let pivotGridObj: PivotView = new PivotView({
enginePopulating: function() {}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Event Triggers after the pivot engine populated event: afterPivotEnginePopulate

new ej.PivotGrid($(“#PivotGrid”), {
afterPivotEnginePopulate: function() {}
});		 event: enginePopulated

let pivotGridObj: PivotView = new PivotView({
enginePopulated: function() {}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Event Triggers after the control populated with data source event: renderSuccess

new ej.PivotGrid($(“#PivotGrid”), {
renderSuccess: function() {}
});		 event: dataBound

let pivotGridObj: PivotView = new PivotView({
dataBound: function() {}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Event Triggers after the control created Not Applicable event: created

let pivotGridObj: PivotView = new PivotView({
created: function() {}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Event Triggers when destroy the control Not Applicable event: destroyed

let pivotGridObj: PivotView = new PivotView({
destroyed: function() {}
});
pivotGridObj.appendTo(‘#PivotGrid’);
Event Triggers the cell clicked in pivot table widget event: cellClick

new ej.PivotGrid($(“#PivotGrid”), {
cellClick: function() {}
});		 event: cellClick

let pivotGridObj: PivotView = new PivotView({
cellClick: function() {}
});
pivotGridObj.appendTo(‘#PivotGrid’);