Ej1 api migration in EJ2 JavaScript 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

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

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

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

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

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

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

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

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

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

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

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

Aggregation

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

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

var pivotGridObj = new ej.pivotview.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

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

var pivotGridObj = new ej.pivotview.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

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

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

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

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

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

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

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

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

var pivotGridObj = new ej.pivotview.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

var pivotGridObj = new ej.pivotview.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

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

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

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

var pivotGridObj = new ej.pivotview.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

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

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

$(“#PivotSchemaDesigner”).ejPivotSchemaDesigner({});
 component: PivotFieldList

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

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

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

var fieldlistObj = new ej.pivotview.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

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

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

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

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

Filtering

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

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

var pivotGridObj = new ej.pivotview.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

$(“#PivotGrid”).ejPivotGrid({
maxNodeLimitInMemberEditor: 100
});		 property: maxNodeLimitInMemberEditor

var pivotGridObj = new ej.pivotview.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

var pivotGridObj = new ej.pivotview.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

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

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

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

var pivotGridObj = new ej.pivotview.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

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

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

var pivotGridObj = new ej.pivotview.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

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

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

var pivotGridObj = new ej.pivotview.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

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

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

var pivotGridObj = new ej.pivotview.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

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

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

var pivotGridObj = new ej.pivotview.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

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

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

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

var pivotGridObj = new ej.pivotview.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

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

var pivotGridObj = new ej.pivotview.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

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

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

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

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

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

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

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

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

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

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

var pivotGridObj = new ej.pivotview.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

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

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

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

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

Drill Through

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

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

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

$(“#PivotGrid”).ejPivotGrid({
drillThrough: function() {}
});		 event: drillThrough

var pivotGridObj = new ej.pivotview.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

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

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

var pivotGridObj = new ej.pivotview.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

$(“#PivotGrid”).ejPivotGrid({
hyperlinkSettings: { }
});		 property: hyperlinkSettings

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

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

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

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

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

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

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

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

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

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

var pivotGridObj = new ej.pivotview.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

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

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

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

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

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

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

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

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

var pivotGridObj = new ej.pivotview.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

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

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

Accessibility

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

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

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

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

var pivotGridObj = new ej.pivotview.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

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

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

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

$(“#PivotGrid”).ejPivotGrid({
load: function() {}
});		 event: load

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

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

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

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

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

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

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

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

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

$(“#PivotGrid”).ejPivotGrid({
cellClick: function() {}
});		 event: cellClick

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