Ej1 api migration in React Pivotview component

4 Apr 202523 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

<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
data: []
}; 		property: dataSourceSettings

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
dataSource: [] as IDataSet[]
};
Rows property: rows

<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
rows: [{
fieldName: "Country", fieldCaption: "Country"}]
}; 		property: rows

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
row: [{
name: 'company', caption: 'Industry' }]
};
Columns property: columns

<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
columns: [{
fieldName: "Country", fieldCaption: "Country"}]
}; 		property: columns

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
columns: [{
name: 'company', caption: 'Industry' }]
};
Values property: values

<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
values: [ {
fieldName: "balance", fieldCaption: "Balance($)"}]
}; 		property: values

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
values: [{
name: 'balance', caption: 'Balance($)' }]
};
Filters property: filters

<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
filters: [{
fieldName: "Country", fieldCaption: "Country" }]
}; 		property: filters

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
filters: [{
name: 'company', caption: 'Industry'}]
};
Value axis position Not Applicable property: valueAxis

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
valueAxis: 'row'
};

Aggregation

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

<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
values: [{
fieldName: "balance",
fieldCaption: "Balance($)",
summaryType: ej.PivotAnalysis.SummaryType.Count }]
}; 		property: type

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
values: [{
name: 'balance', caption: 'Balance($)', type: 'Count' }]
};

Number Format

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

<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
values: [{
fieldName: "balance",
fieldCaption: "Balance($)",
format: "currency" }]
}; 		property: formatSettings

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
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 id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
enableGrandTotal: false
}; 		property: showGrandTotals

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
showGrandTotals: false
};
Show/hide row grand totals property: enableRowGrandTotal

<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
enableRowGrandTotal: false
}; 		property: showRowGrandTotals

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
showRowGrandTotals: false
};
Show/hide column grand totals property: enableColumnGrandTotal

<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
enableColumnGrandTotal: false
}; 		property: showColumnGrandTotals

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
showColumnGrandTotals: false
};
Show/hide sub-totals Not Applicable property: showSubTotals

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
showSubTotals: false
};
Show/hide row sub-totals Not Applicable property: showRowSubTotals

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
showRowSubTotals: false
};
Show/hide column sub-totals Not Applicable property: showColumnSubTotals

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
showColumnSubTotals: false
};
Show/hide sub-totals for specific field property: showSubTotal

<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
rows: [{ name: 'company', showSubTotal: false }]
}; 		property: showSubTotals

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
rows: [{ name: 'company', showSubTotals: false }]
};

Drill operation

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

<EJ.PivotGrid id="PivotGrid" enableCollapseByDefault= {true}></EJ.PivotGrid> 		property: expandAll

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
expandAll: false
};
Drill Up/Down property: collapsedMembers

<EJ.PivotGrid id="PivotGrid" collapsedMembers= {collapsedMembers}></EJ.PivotGrid>

var collapsedMembers = {
Country: ["Canada", "France"]
}; 		property: drilledMembers

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
drilledMembers: [{
name: 'Country',
items: ['France'] }]
};

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

<PivotViewComponent id='PivotView' showFieldList={true}></PivotViewComponent>
Defer update property: enableDeferUpdate

<EJ.PivotGrid id="PivotGrid" enableDeferUpdate= {true}></EJ.PivotGrid> 		Not Applicable
Control initialization component: PivotSchemaDesigner

<EJ.PivotSchemaDesigner id="PivotSchemaDesigner"></EJ.PivotSchemaDesigner> 		component: PivotFieldListComponent

<PivotFieldListComponent id='PivotFieldList'> </PivotFieldListComponent>
Render mode Not Applicable property: renderMode

<PivotFieldListComponent id='PivotFieldList' renderMode= {'Fixed'}></PivotFieldListComponent>
Show/hide calculated field button Not Applicable property: allowCalculatedField

<PivotFieldListComponent id='PivotFieldList' allowCalculatedField={true}></PivotFieldListComponent>
Show/hide value group button Not Applicable property: showValuesButton

><PivotFieldListComponent id='PivotFieldList' showValuesButton={true}></PivotFieldListComponent>

Grouping Bar

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

<EJ.PivotGrid id="PivotGrid" enableGroupingBar= {true}></EJ.PivotGrid> 		property: showGroupingBar

<PivotViewComponent id='PivotView' showGroupingBar={true}></PivotViewComponent>
Grouping Bar Settings Not Applicable property: groupingBarSettings

<PivotViewComponent id='PivotView' groupingBarSettings={groupingBarSettings}></PivotViewComponent>

let groupingBarSettings: GroupingBarSettings = {
showFilterIcon: false,
showSortIcon: true,
showRemoveIcon: false
};
Show/hide value group button Not Applicable property: showValuesButton

<PivotFieldListComponent id='PivotFieldList' showValuesButton={true}></PivotFieldListComponent>

Filtering

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

<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
rows: [{
fieldName: "Country", fieldCaption: "Country",
filterItems : {
filterType: ej.PivotAnalysis.FilterType.Exclude,
values: ["Canada", "France"] }
}]}; 		property: filterSettings

<PivotViewComponent id="PivotGrid" dataSource= {dataSource}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
filterSettings: [{
name: 'eyeColor',
type: 'Exclude',
items: ['blue'] }]
};

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 id="PivotGrid" maxNodeLimitInMemberEditor= {100}></EJ.PivotGrid> 		property: maxNodeLimitInMemberEditor

<PivotViewComponent id='PivotView' maxNodeLimitInMemberEditor={100}></PivotViewComponent>

No Data Items

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

<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
rows: [{ name: 'company', showNoDataItems: true }]
};

Excel-like filtering

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

<EJ.PivotGrid id="PivotGrid" enableAdvancedFilter={true} dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
rows: [{
fieldName: "Country", fieldCaption: "Country",
advancedFilter : [{
labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith,
values: ["es"] ]}
}]}; 		property: allowLabelFilter

<PivotViewComponent id="PivotGrid" allowLabelFilter= {true} dataSource= {dataSource}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
filterSettings: [{
name: 'product',
type: 'Label',
condition: 'Between',
value1: 'e', value2: 'v' }]
};
Value filtering property: enableAdvancedFilter

<EJ.PivotGrid id="PivotGrid" enableAdvancedFilter={true} dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
rows: [{
fieldName: "Country", fieldCaption: "Country",
advancedFilter : [{
measure: "balance",
valueFilterOperator: ej.olap.ValueFilterOptions.GreaterThan,
values: ["200"] ]}
}]}; 		property: allowValueFilter

<PivotViewComponent id="PivotGrid" allowValueFilter= {true} dataSource= {dataSource}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
filterSettings: [{
name: 'product',
measure: 'quantity',
type: 'Value',
condition: 'Between',
value1: '3250',
value2: '5000' }]
};

Drill Through

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

<EJ.PivotGrid id="PivotGrid" enableDrillThrough= {true}></EJ.PivotGrid> 		property: allowDrillThrough

<PivotViewComponent id='PivotView' allowDrillThrough={true}></PivotViewComponent>
Event Triggers when cell clicked in pivot table control event: drillThrough

<EJ.PivotGrid id="PivotGrid" drillThrough= "onDrillThrough"></EJ.PivotGrid>

function onDrillThrough(){ } 		event: drillThrough

<PivotViewComponent id="PivotGrid" drillThrough= this.onDrillThrough.bind(this)></PivotViewComponent>

onDrillThrough(): void { }

Cell Editing

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

<PivotViewComponent id='PivotView' editSettings={}></PivotViewComponent>
Show/hide cell editing feature property: enableCellEditing

<EJ.PivotGrid id="PivotGrid" enableCellEditing= {true}></EJ.PivotGrid> 		property: allowEditing

<PivotViewComponent id='PivotView' editSettings={editSettings}></PivotViewComponent>

let editSettings: CellEditSettings = {
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 id="PivotGrid" hyperlinkSettings= {}></EJ.PivotGrid> 		property: hyperlinkSettings

<PivotViewComponent id='PivotView' hyperlinkSettings={}></PivotViewComponent>
Show/hide hyperlink to all cells Not Applicable property: showHyperlink

<PivotViewComponent id='PivotView' hyperlinkSettings={hyperlinkSettings}></PivotViewComponent>

let hyperlinkSettings: HyperLinkSettings = {
showHyperlink: 'true'
};
Show/hide hyperlink to row headers property: enableRowHeaderHyperlink

<EJ.PivotGrid id="PivotGrid" hyperlinkSettings= {
enableRowHeaderHyperlink: true
}></EJ.PivotGrid> 		property: showRowHeaderHyperlink

<PivotViewComponent id='PivotView' hyperlinkSettings={hyperlinkSettings}></PivotViewComponent>

let hyperlinkSettings: HyperLinkSettings = {
showRowHeaderHyperlink: 'true'
};
Show/hide hyperlink to column headers property: enableColumnHeaderHyperlink

<EJ.PivotGrid id="PivotGrid" hyperlinkSettings= {
enableColumnHeaderHyperlink: true
}></EJ.PivotGrid> 		property: showColumnHeaderHyperlink

<PivotViewComponent id='PivotView' hyperlinkSettings={hyperlinkSettings}></PivotViewComponent>

let hyperlinkSettings: HyperLinkSettings = {
showColumnHeaderHyperlink: 'true'
};
Show/hide hyperlink to value cells property: enableValueCellHyperlink

<EJ.PivotGrid id="PivotGrid" hyperlinkSettings= {
enableValueCellHyperlink: true
}></EJ.PivotGrid> 		property: showValueCellHyperlink

<PivotViewComponent id='PivotView' hyperlinkSettings={hyperlinkSettings}></PivotViewComponent>

let hyperlinkSettings: HyperLinkSettings = {
showValueCellHyperlink: 'true'
};
Show/hide hyperlink to summary cells property: enableSummaryCellHyperlink

<EJ.PivotGrid id="PivotGrid" hyperlinkSettings= {
enableSummaryCellHyperlink: true
}></EJ.PivotGrid> 		property: showSummaryCellHyperlink

<PivotViewComponent id='PivotView' hyperlinkSettings={hyperlinkSettings}></PivotViewComponent>

let hyperlinkSettings: HyperLinkSettings = {
showSummaryCellHyperlink: 'true'
};
Show/hide hyperlink using specific conditions Not Applicable property: conditionalSettings

<PivotViewComponent id='PivotView' hyperlinkSettings={hyperlinkSettings}></PivotViewComponent>

let hyperlinkSettings: HyperLinkSettings = {
conditionalSettings: [{
measure: 'Units Sold', conditions: 'Between', value1: 150, value2: 200
}] };
Show/hide hyperlink for row or column Not Applicable property: headerText

<PivotViewComponent id='PivotView' hyperlinkSettings={hyperlinkSettings}></PivotViewComponent>

let hyperlinkSettings: HyperLinkSettings = {
headerText: 'FY 2015.Q1.Units Sold'
};
Event Triggers when row headers clicked in pivot table event: rowHeaderHyperlinkClick

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

function onRowHeaderHyperlinkClick(){ } 		event: hyperlinkCellClick

<PivotViewComponent id="PivotGrid" hyperlinkCellClick= this.onHyperlinkCellClick.bind(this)></PivotViewComponent>

onHyperlinkCellClick(): void { }
Event Triggers when column headers clicked in pivot table event: columnHeaderHyperlinkClick

<EJ.PivotGrid id="PivotGrid" columnHeaderHyperlinkClick= "onColumnHeaderHyperlinkClick"></EJ.PivotGrid>

function onColumnHeaderHyperlinkClick(){ } 		event: hyperlinkCellClick

<PivotViewComponent id="PivotGrid" hyperlinkCellClick= this.onHyperlinkCellClick.bind(this)></PivotViewComponent>

onHyperlinkCellClick(): void { }
Event Triggers when value cells clicked in pivot table event: valueCellHyperlinkClick

<EJ.PivotGrid id="PivotGrid" valueCellHyperlinkClick= "onValueCellHyperlinkClick"></EJ.PivotGrid>

function onValueCellHyperlinkClick(){ } 		event: hyperlinkCellClick

<PivotViewComponent id="PivotGrid" hyperlinkCellClick= this.onHyperlinkCellClick.bind(this)></PivotViewComponent>

onHyperlinkCellClick(): void { }
Event Triggers when summary cells clicked in pivot table event: summaryCellHyperlinkClick

<EJ.PivotGrid id="PivotGrid" summaryCellHyperlinkClick= "onSummaryCellHyperlinkClick"></EJ.PivotGrid>

function onSummaryCellHyperlinkClick(){ } 		event: hyperlinkCellClick

<PivotViewComponent id="PivotGrid" hyperlinkCellClick= this.onHyperlinkCellClick.bind(this)></PivotViewComponent>

onHyperlinkCellClick(): void { }

Defer Layout Update

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

<EJ.PivotGrid id="PivotGrid" enableDeferUpdate= {true}></EJ.PivotGrid> 		property: allowDeferLayoutUpdate

<PivotViewComponent id='PivotView' allowDeferLayoutUpdate={true}></PivotViewComponent>

Sorting

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

<PivotViewComponent id="PivotGrid" dataSource= {dataSource}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
enableSorting: false
};
Sort settings property: sortOrder

<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
rows: [{
fieldName: "Country",
sortOrder : ej.PivotAnalysis.SortOrder.Descending}]
}; 		property: sortSettings

<PivotViewComponent id="PivotGrid" dataSource= {dataSource}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
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: enableSorting

<PivotViewComponent id="PivotGrid" enableValueSorting= {true}></PivotViewComponent>
Value sort settings property: valueSortSettings

<EJ.PivotGrid id="PivotGrid" valueSortSettings= {valueSortSettings}></EJ.PivotGrid>

var valueSortSettings = {
headerText: "Bike##Quantity",
headerDelimiters: "##",
sortOrder: ej.PivotAnalysis.SortOrder.Descending
}; 		property: valueSortSettings

<PivotViewComponent id="PivotGrid" dataSource= {dataSource}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
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

<PivotViewComponent id="PivotGrid" allowCalculatedField= {true}></PivotViewComponent>
Calculated field settings property: values

<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid>

var pivotdataSource = {
values: [
{ fieldName: "Amount", fieldCaption: "Amount"},
{ fieldName: "Price",
fieldCaption: "Price",
isCalculatedField: true,
formula: "Amount*15" }]
}; 		property: calculatedFieldSettings

<PivotViewComponent id="PivotGrid" dataSource= {dataSource}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
values: [{
name: 'Total', 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="PivotGrid" enablePaging= {true}></EJ.PivotGrid> 		Not Applicable
Virtual scrolling property: enableVirtualScrolling

<EJ.PivotGrid id="PivotGrid" enableVirtualScrolling= {true}></EJ.PivotGrid> 		property: enableVirtualization

<PivotViewComponent id="PivotGrid" enableVirtualization= {true}></PivotViewComponent>

Conditional Formatting

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

<EJ.PivotGrid id="PivotGrid" enableConditionalFormatting= {true}></EJ.PivotGrid> 		property: allowConditionalFormatting

<PivotViewComponent id="PivotGrid" allowConditionalFormatting= {true}></PivotViewComponent>
Conditional formatting settings property: conditionalFormatSettings

<EJ.PivotGrid id="PivotGrid" conditionalFormatSettings= {conditionalFormatSettings}></EJ.PivotGrid>

var 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

<PivotViewComponent id="PivotGrid" dataSource= {dataSource}></PivotViewComponent>

let dataSourceSettings: DataSourceSettingsModel = {
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

<PivotViewComponent id="PivotGrid" allowExcelExport= {true}></PivotViewComponent>
Pdf Export Not Applicable property: allowPdfExport

<PivotViewComponent id="PivotGrid" allowPdfExport= {true}></PivotViewComponent>

Grid Customization

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

<PivotViewComponent id="PivotGrid" width= {800}></PivotViewComponent>
Set height for pivot table Not Applicable property: height

<PivotViewComponent id="PivotGrid" height= {400}></PivotViewComponent>
Set row height for pivot table Not Applicable property: rowHeight

<PivotViewComponent id="PivotGrid" gridSettings= {{rowHeight: 60}}></PivotViewComponent>
Set column width for pivot table Not Applicable property: columnWidth

<PivotViewComponent id="PivotGrid" gridSettings= {{columnWidth: 120}}></PivotViewComponent>
Drag and drop column headers in pivot table Not Applicable property: allowReordering

<PivotViewComponent id="PivotGrid" gridSettings= {{allowReordering: true}}></PivotViewComponent>
Resizing the column headers in pivot table property: enableColumnResizing

<EJ.PivotGrid id="PivotGrid" enableColumnResizing= {true}></EJ.PivotGrid> 		property: allowResizing

<PivotViewComponent id="PivotGrid" gridSettings= {{allowResizing: true}}></PivotViewComponent>
Wrap the cell content in pivot table Not Applicable property: allowTextWrap

<PivotViewComponent id="PivotGrid" gridSettings= {{allowTextWrap: true}}></PivotViewComponent>
Display cell border in pivot table Not Applicable property: gridLines

<PivotViewComponent id="PivotGrid" gridSettings= {{gridLines:'Vertical'}}></PivotViewComponent>
Cell selection property: enableCellSelection

<EJ.PivotGrid id="PivotGrid" enableCellSelection= {true}></EJ.PivotGrid> 		property: allowSelection

<PivotViewComponent id="PivotGrid" gridSettings= {gridSettings}></PivotViewComponent>

let gridSettings: GridSettings = {
allowSelection: true,
selectionSettings: {
cellSelectionMode: 'Box',
type: 'Multiple',
mode: 'Cell' }
};
Display overflow cell content in pivot table Not Applicable property: clipMode

<PivotViewComponent id="PivotGrid" gridSettings= {{clipMode: 'Clip'}}></PivotViewComponent>
Cell Editing property: enableCellEditing

<EJ.PivotGrid id="PivotGrid" enableCellEditing= {true}></EJ.PivotGrid> 		Not Applicable
Cell double click property: enableCellDoubleClick

<EJ.PivotGrid id="PivotGrid" enableCellDoubleClick= {true}></EJ.PivotGrid> 		Not Applicable
Cell context property: enableCellContext

<EJ.PivotGrid id="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="PivotGrid" locale= {'es-ES'}></EJ.PivotGrid> 		property: locale

<PivotViewComponent id="PivotGrid" locale= {'es-ES'}></PivotViewComponent>
Right to left property: enableRTL

<EJ.PivotGrid id="PivotGrid" enableRTL= {true}></EJ.PivotGrid> 		property: enableRtl

<PivotViewComponent id="PivotGrid" enableRTL= {true}></PivotViewComponent>

Common

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

<EJ.PivotGrid id="PivotGrid" cssClass= {"custom-class"}></EJ.PivotGrid> 		property: cssClass

<PivotViewComponent id="PivotGrid" cssClass= {'custom-class'}></PivotViewComponent>
Keeping the model values in cookies Not Applicable property: enablePersistence

<PivotViewComponent id="PivotGrid" enablePersistence= {true}></PivotViewComponent>
Event triggers when control initializing event: load

<EJ.PivotGrid id="PivotGrid" load= "onLoad"></EJ.PivotGrid>

function onLoad(){ } 		event: load

<PivotViewComponent id="PivotGrid" load= this.onLoad.bind(this)></PivotViewComponent>

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

<EJ.PivotGrid id="PivotGrid" beforePivotEnginePopulate= "onBeforePivotEnginePopulate"></EJ.PivotGrid>

function onBeforePivotEnginePopulate(){ } 		event: enginePopulating

<PivotViewComponent id="PivotGrid" enginePopulating= this.onEnginePopulating.bind(this)></PivotViewComponent>

onEnginePopulating(): void { }
Event Triggers after the pivot engine populated event: afterPivotEnginePopulate

<EJ.PivotGrid id="PivotGrid" afterPivotEnginePopulate= "onAfterPivotEnginePopulate"></EJ.PivotGrid>

function onAfterPivotEnginePopulate(){ } 		event: enginePopulated

<PivotViewComponent id="PivotGrid" enginePopulated= this.onEnginePopulated.bind(this)></PivotViewComponent>

onEnginePopulated(): void { }
Event Triggers after the control populated with data source event: renderSuccess

<EJ.PivotGrid id="PivotGrid" renderSuccess= "onRenderSuccess"></EJ.PivotGrid>

function onRenderSuccess(){ } 		event: dataBound

<PivotViewComponent id="PivotGrid" dataBound= this.onDataBound.bind(this)></PivotViewComponent>

onDataBound(): void { }
Event Triggers after the control created Not Applicable event: created

<PivotViewComponent id="PivotGrid" created= this.created.bind(this)></PivotViewComponent>

created(): void { }
Event Triggers when destroy the control Not Applicable event: destroyed

<PivotViewComponent id="PivotGrid" destroyed= this.destroyed.bind(this)></PivotViewComponent>

destroyed(): void { }
Event Triggers the cell clicked in pivot table event: cellClick

<EJ.PivotGrid id="PivotGrid" cellClick= "onCellClick"></EJ.PivotGrid>

function onCellClick(){ } 		event: cellClick

<PivotViewComponent id="PivotGrid" cellClick= this.onCellClick.bind(this)></PivotViewComponent>

onCellClick(): void { }