Migration from Essential® JS 1

8 Dec 202421 minutes to read

This article describes the API migration process of Pivot Grid 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-pivot-grid id="PivotGrid">
<e-data-source data="@ViewBag.data"></e-data-source>
</ej-pivot-grid> 		property: dataSourceSettings

<ejs-pivotview id="PivotView">
<e-datasourcesettings dataSourcec="@ViewBag.data"></e-datasourcesettings>
</ejs-pivotview>
Rows property: rows

<ej-pivot-grid id="PivotGrid">
<e-data-source>
<e-pivot-rows>
<e-row-field field-name="Country" field-caption="Country"></e-row-field>
</e-pivot-rows>
</e-data-source>
</ej-pivot-grid> 		property: rows

<ejs-pivotview id="PivotView">
<e-datasourcesettings>
<e-rows>
<e-field name="company" caption= "Industry"></e-field>
</e-rows>
</e-datasourcesettings>
</ejs-pivotview>
Columns property: columns

<ej-pivot-grid id="PivotGrid">
<e-data-source>
<e-pivot-columns>
<e-column-field field-name="Country" field-caption="Country"></e-column-field>
</e-pivot-columns>
</e-data-source>
</ej-pivot-grid> 		property: columns

<ejs-pivotview id="PivotView">
<e-datasourcesettings>
<e-columns>
<e-field name="company" caption= "Industry"></e-field>
</e-columns>
</e-datasourcesettings>
</ejs-pivotview>
Values property: values

<ej-pivot-grid id="PivotGrid">
<e-data-source>
<e-pivot-values>
<e-value-field field-name="balance" field-caption="Balance($)"></e-value-field>
</e-pivot-values>
</e-data-source>
</ej-pivot-grid> 		property: values

<ejs-pivotview id="PivotView">
<e-datasourcesettings>
<e-values>
<e-field name="balance" caption= "Balance($)"></e-field>
</e-values>
</e-datasourcesettings>
</ejs-pivotview>
Filters property: filters

<ej-pivot-grid id="PivotGrid">
<e-data-source>
<e-pivot-filters>
<e-filter-field field-name="Country" field-caption="Country"></e-filter-field>
</e-pivot-filters>
</e-data-source>
</ej-pivot-grid> 		property: filters

<ejs-pivotview id="PivotView">
<e-datasourcesettings>
<e-filters>
<e-field name="company" caption= "Industry"></e-field>
</e-filters>
</e-datasourcesettings>
</ejs-pivotview>
Value axis position Not Applicable property: valueAxis

<ejs-pivotview id="PivotView">
<e-datasourcesettings valueAxis="row"></e-datasourcesettings>
</ejs-pivotview>

Aggregation

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

<ej-pivot-grid id="PivotGrid">
<e-data-source>
<e-pivot-values>
<e-value-field field-name="balance" field-caption="Balance($)" summary-type="Count"></e-value-field>
</e-pivot-values>
</e-data-source>
</ej-pivot-grid> 		property: type

<ejs-pivotview id="PivotView">
<e-datasourcesettings>
<e-values>
<e-field name="balance" caption= "Balance($)" type= "Count"></e-field>
</e-values>
</e-datasourcesettings>
</ejs-pivotview>

Number Format

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

<ej-pivot-grid id="PivotGrid">
<e-data-source>
<e-pivot-values>
<e-value-field field-name="balance" field-caption="Balance($)" format="currency"></e-value-field>
</e-pivot-values>
</e-data-source>
</ej-pivot-grid> 		property: formatSettings

<ejs-pivotview id="PivotView">
<e-datasourcesettings>
<e-formatSettings>
<e-field name="balance" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
<e-field name="date" format= "dd/MM/yyyy-hh:mm" type= "date"></e-field>
</e-formatSettings>
</e-datasourcesettings>
</ejs-pivotview>

Summary Customization

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

<ej-pivot-grid id="PivotGrid">
<e-data-source enableGrandTotal="false"></e-data-source>
</ej-pivot-grid> 		property: showGrandTotals

<ejs-pivotview id="PivotView">
<e-datasourcesettings showGrandTotals="false"></e-datasourcesettings>
</ejs-pivotview>
Show/hide row grand totals property: enableRowGrandTotal

<ej-pivot-grid id="PivotGrid">
<e-data-source enableGrandTotal="false"></e-data-source>
</ej-pivot-grid> 		property: showRowGrandTotals

<ejs-pivotview id="PivotView">
<e-datasourcesettings showRowGrandTotals="false"></e-datasourcesettings>
</ejs-pivotview>
Show/hide column grand totals property: enableColumnGrandTotal

<ej-pivot-grid id="PivotGrid">
<e-data-source enableGrandTotal="false"></e-data-source>
</ej-pivot-grid> 		property: showColumnGrandTotals

<ejs-pivotview id="PivotView">
<e-datasourcesettings showColumnGrandTotals="false"></e-datasourcesettings>
</ejs-pivotview>
Show/hide sub-totals Not Applicable property: showSubTotals

<ejs-pivotview id="PivotView">
<e-datasourcesettings showSubTotals="false"></e-datasourcesettings>
</ejs-pivotview>
Show/hide row sub-totals Not Applicable property: showRowSubTotals

<ejs-pivotview id="PivotView">
<e-datasourcesettings showRowSubTotals="false"></e-datasourcesettings>
</ejs-pivotview>
Show/hide column sub-totals Not Applicable property: showColumnSubTotals

<ejs-pivotview id="PivotView">
<e-datasourcesettings showColumnSubTotals="false"></e-datasourcesettings>
</ejs-pivotview>
Show/hide sub-totals for specific field property: showSubTotal

<ej-pivot-grid id="PivotGrid">
<e-data-source>
<e-pivot-rows>
<e-row-field field-name="Country" show-sub-total="false"></e-row-field>
</e-pivot-rows>
</e-data-source>
</ej-pivot-grid> 		property: showSubTotals

<ejs-pivotview id="PivotView">
<e-datasourcesettings>
<e-rows>
<e-field name="company" showSubTotals= "false"></e-field>
</e-rows>
</e-datasourcesettings>
</ejs-pivotview>

Drill operation

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

<ej-pivot-grid id="PivotGrid" enable-collapse-by-default= "true"></ej-pivot-grid> 		property: expandAll

<ejs-pivotview id="PivotView">
<e-datasourcesettings expandAll= "false"></e-datasourcesettings>
</ejs-pivotview>
Drill Up/Down property: collapsedMembers

<ej-pivot-grid id="PivotGrid" load= "onLoad"></ej-pivot-grid>

function onLoad(args) {
args.model.collapsedMembers = { Country: ["Canada", "France"] }
} 		property: drilledMembers

<ejs-pivotview id="PivotView">
<e-datasourcesettings>
<e-drilledmembers>
<e-field name="Country" items="@ViewBag.drilledMembers"></e-field>
</e-drilledmembers>
</e-datasourcesettings>
</ejs-pivotview>

Field List

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

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

<ej-pivot-grid id="PivotGrid" enable-defer-update= "true"></ej-pivot-grid> 		Not Applicable
Control initialization component: PivotSchemaDesigner

<ej-pivot-schema-designer id="PivotSchemaDesigner"></ej-pivot-schema-designer> 		component: PivotFieldListComponent

<ejs-pivotfieldlist id="PivotFieldList"></ejs-pivotfieldlist>
Render mode Not Applicable property: renderMode

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

<ejs-pivotfieldlist id="PivotFieldList" allowCalculatedField= "true"></ejs-pivotfieldlist>
Show/hide value group button Not Applicable property: showValuesButton

<ejs-pivotfieldlist id="PivotFieldList" showValuesButton= "true"></ejs-pivotfieldlist>

Grouping Bar

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

<ej-pivot-grid id="PivotGrid" enable-grouping-bar= "true"></ej-pivot-grid> 		property: showGroupingBar

<ejs-pivotview id="PivotFieldList" showGroupingBar= "true"></ejs-pivotview>
Grouping Bar Settings Not Applicable property: groupingBarSettings

<ejs-pivotview id="PivotView">
<e-groupingBarSettings showFilterIcon= "false" showSortIcon= "true" showRemoveIcon= "false"></e-groupingBarSettings>
</ejs-pivotview>
Show/hide value group button Not Applicable property: showValuesButton

<ejs-pivotview id="PivotView" showValuesButton= "true"></ejs-pivotview>

Filtering

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

<ej-pivot-grid id="PivotGrid">
<e-data-source>
<e-pivot-rows>
<e-row-field field-name="Country" field-caption="Country">
<e-filter-items filter-type= "exclude" values="@ViewBag.filterItems"></e-filter-items>
</e-row-field>
</e-pivot-rows>
</e-data-source>
</ej-pivot-grid> 		property: filterSettings

<ejs-pivotview id="PivotView">
<e-datasourcesettings>
<e-filtersettings>
<e-field name="eyeColor" type= "Exclude" items="@ViewBag.filterItems"></e-field>
</e-filtersettings>
</e-datasourcesettings>
</ejs-pivotview>

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-pivot-grid id="PivotGrid" max-node-limit-in-member-editor= "100"></ej-pivot-grid> 		property: maxNodeLimitInMemberEditor

<ejs-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 id="PivotView">
<e-datasourcesettings>
<e-rows>
<e-field name="company" showNoDataItems="true"></e-field>
</e-rows>
</e-datasourcesettings>
</ejs-pivotview>

Excel-like filtering

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

<ej-pivot-grid id="PivotGrid" enable-advanced-filter= "true">
<e-data-source>
<e-pivot-rows>
<e-row-field field-name="Country" field-caption="Country">
<e-advanced-filters>
<e-advanced-filter label-filter-operator = "endsWidth" values= "@ViewBag.filterItems"></e-advanced-filter>
</e-advanced-filters>
</e-row-field>
</e-pivot-rows>
</e-data-source>
</ej-pivot-grid> 		property: allowLabelFilter

<ejs-pivotview id="PivotView" allowLabelFilter= "true">
<e-datasourcesettings>
<e-filtersettings>
<e-field name="product" type= "Label" condition= "Between" value1= "e" value2= "v"></e-field>
</e-filtersettings>
</e-datasourcesettings>
</ejs-pivotview>
Value filtering property: enableAdvancedFilter

<ej-pivot-grid id="PivotGrid" enable-advanced-filter= "true">
<e-data-source>
<e-pivot-rows>
<e-row-field field-name="Country" field-caption="Country">
<e-advanced-filters>
<e-advanced-filter measure= "balance" value-filter-operator = "greaterThan" values= "@ViewBag.filterItems"></e-advanced-filter>
</e-advanced-filters>
</e-row-field>
</e-pivot-rows>
</e-data-source>
</ej-pivot-grid> 		property: allowValueFilter

<ejs-pivotview id="PivotView" allowValueFilter= "true">
<e-datasourcesettings>
<e-filtersettings>
<e-field name="product" measure= "quantity" type= "Value" condition= "Between" value1= "3250" value2= "5000"></e-field>
</e-filtersettings>
</e-datasourcesettings>
</ejs-pivotview>

Drill Through

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

<ej-pivot-grid id="PivotGrid" enable-drill-through= "true"></ej-pivot-grid> 		property: allowDrillThrough

<ejs-pivotview id="PivotView" allowDrillThrough= "true"></ejs-pivotview>
Event Triggers when cell clicked in pivot grid control event: drillThrough

<ej-pivot-grid id="PivotGrid" drill-through= "onDrillThrough"></ej-pivot-grid>

function onDrillThrough() { } 		event: drillThrough

<ejs-pivotview id="PivotView" drillThrough= "onDrillThrough"></ejs-pivotview>

function onDrillThrough() { }

Cell Editing

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

<ejs-pivotview id="PivotView">
<e-editSettings></e-editSettings>
</ejs-pivotview>
Show/hide cell editing feature property: enableCellEditing

<ej-pivot-grid id="PivotGrid" enable-cell-editing= "true"></ej-pivot-grid> 		property: allowEditing

<ejs-pivotview id="PivotView">
<e-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-editSettings>
</ejs-pivotview>
Behavior API in Essential® JS 1 API in Essential® JS 2
Hyperlink settings property: hyperlink

<ej-pivot-grid id="PivotGrid">
<e-hyperlink></e-hyperlink>
</ej-pivot-grid> 		property: hyperlinkSettings

<ejs-pivotview id="PivotView">
<e-hyperlinkSettings></e-hyperlinkSettings>
</ejs-pivotview>
Show/hide hyperlink to all cells Not Applicable property: showHyperlink

<ejs-pivotview id="PivotView">
<e-hyperlinkSettings showHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>
Show/hide hyperlink to row headers property: enableRowHeaderHyperlink

<ej-pivot-grid id="PivotGrid">
<e-hyperlink enable-row-header-hyperlink="true"></e-hyperlink>
</ej-pivot-grid> 		property: showRowHeaderHyperlink

<ejs-pivotview id="PivotView">
<e-hyperlinkSettings showRowHeaderHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>
Show/hide hyperlink to column headers property: enableColumnHeaderHyperlink

<ej-pivot-grid id="PivotGrid">
<e-hyperlink enable-column-header-hyperlink="true"></e-hyperlink>
</ej-pivot-grid> 		property: showColumnHeaderHyperlink

<ejs-pivotview id="PivotView">
<e-hyperlinkSettings showColumnHeaderHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>
Show/hide hyperlink to value cells property: enableValueCellHyperlink

<ej-pivot-grid id="PivotGrid">
<e-hyperlink enable-value-cell-hyperlink="true"></e-hyperlink>
</ej-pivot-grid> 		property: showValueCellHyperlink

<ejs-pivotview id="PivotView">
<e-hyperlinkSettings showValueCellHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>
Show/hide hyperlink to summary cells property: enableSummaryCellHyperlink

<ej-pivot-grid id="PivotGrid">
<e-hyperlink enable-summary-cell-hyperlink="true"></e-hyperlink>
</ej-pivot-grid> 		property: showSummaryCellHyperlink

<ejs-pivotview id="PivotView">
<e-hyperlinkSettings showSummaryCellHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>
Show/hide hyperlink using specific conditions Not Applicable property: conditionalSettings

<ejs-pivotview id="PivotView">
<e-hyperlinkSettings>
<e-conditionalsettings>
<e-format measure="Sold" conditions="Between" value1="150" value2="200"></e-format>
</e-conditionalsettings>
</e-hyperlinkSettings>
</ejs-pivotview>
Show/hide hyperlink for row or column Not Applicable property: headerText

<ejs-pivotview id="PivotView">
<e-hyperlinkSettings headerText: 'FY 2015.Q1.Units Sold'></e-hyperlinkSettings>
</ejs-pivotview>
Event Triggers when row headers clicked in pivot grid control event: rowHeaderHyperlinkClick

<ej-pivot-grid id="PivotGrid" row-header-hyperlink-click= "onClick"></ej-pivot-grid>

function onClick() { } 		event: hyperlinkCellClick

<ejs-pivotview id="PivotView" hyperlinkCellClick= "onClick"></ejs-pivotview>

function onClick() { }
Event Triggers when column headers clicked in pivot grid control event: columnHeaderHyperlinkClick

<ej-pivot-grid id="PivotGrid" column-header-hyperlink-click= "onClick"></ej-pivot-grid>

function onClick() { } 		event: hyperlinkCellClick

<ejs-pivotview id="PivotView" hyperlinkCellClick= "onClick"></ejs-pivotview>

function onClick() { }
Event Triggers when value cells clicked in pivot grid control event: valueCellHyperlinkClick

<ej-pivot-grid id="PivotGrid" value-cell-hyperlink-click= "onClick"></ej-pivot-grid>

function onClick() { } 		event: hyperlinkCellClick

<ejs-pivotview id="PivotView" hyperlinkCellClick= "onClick"></ejs-pivotview>

function onClick() { }
Event Triggers when summary cells clicked in pivot grid control event: summaryCellHyperlinkClick

<ej-pivot-grid id="PivotGrid" summary-cell-hyperlink-click= "onClick"></ej-pivot-grid>

function onClick() { } 		event: hyperlinkCellClick

<ejs-pivotview id="PivotView" hyperlinkCellClick= "onClick"></ejs-pivotview>

function onClick() { }

Defer Layout Update

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

<ej-pivot-grid id="PivotGrid" enable-defer-update= "true"></ej-pivot-grid> 		property: allowDeferLayoutUpdate

<ejs-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 id="PivotView">
<e-datasourcesettings enableSorting= "false"></e-datasourcesettings>
</ejs-pivotview>
Sort settings property: sortOrder

<ej-pivot-grid id="PivotGrid">
<e-data-source>
<e-pivot-rows>
<e-row-field field-name="Country" field-caption="Country" sort-order= SortOrder.Descending></e-row-field>
</e-pivot-rows>
</e-data-source>
</ej-pivot-grid> 		property: sortSettings

<ejs-pivotview id="PivotView">
<e-datasourcesettings>
<e-sortSettings>
<e-field name="company" order= "Descending"></e-field>
</e-sortSettings>
</e-datasourcesettings>
</ejs-pivotview>

Value Sorting

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

<ejs-pivotview id="PivotView" enableValueSorting= "true"></ejs-pivotview>
Value sort settings property: valueSortSettings

<ej-pivot-grid id="PivotGrid">
<e-value-sort header-text= "Bike##Quantity" header-delimiters= "##" sort-order= SortOrder.Descending></e-value-sort>
</ej-pivot-grid> 		property: valueSortSettings

<ejs-pivotview id="PivotView">
<e-datasourcesettings>
<e-valuesortsettings headerText= "FY 2015##Sold Amount" headerDelimiter= "##" sortOrder= "Descending"></e-valuesortsettings>
</e-datasourcesettings>
</ejs-pivotview>

Calculated Field

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

<ejs-pivotview id="PivotView" allowCalculatedField= "true"></ejs-pivotview>
Calculated field settings property: values

<ej-pivot-grid id="PivotGrid">
<e-data-source>
<e-pivot-values>
<e-value-field field-name="Amount" field-caption="Amount"></e-value-field>
<e-pivot-values>
<e-value-field field-name="Price" field-caption="Price" is-calculated-field= "true" formula= "Amount*15"></e-value-field>
</e-pivot-values>
</e-data-source>
</ej-pivot-grid> 		property: calculatedFieldSettings

<ejs-pivotview id="PivotView">
<e-datasourcesettings>
<e-values>
<e-field name="Total" type= "CalculatedField"></e-field>
</e-calculatedfieldsettings>
<e-calculatedfieldsettings>
<e-field name="Total" formula: "@totalPrice"></e-field>
</e-calculatedfieldsettings>
</e-datasourcesettings>
</ejs-pivotview>

@{var stock = "\"" + "Sum(In_Stock)" + "\"";}
@{var sold = "\"" + "Sum(Sold)" + "\"";}
@{ var totalPrice = stock + "+" + sold;}

Paging

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

<ej-pivot-grid id="PivotGrid" enable-paging= "true"></ej-pivot-grid> 		Not Applicable
Virtual scrolling property: enableVirtualScrolling

<ej-pivot-grid id="PivotGrid" enable-virtual-scrolling= "true"></ej-pivot-grid> 		property: enableVirtualization

<ejs-pivotview id="PivotView" enableVirtualization= "true"></ejs-pivotview>

Conditional Formatting

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

<ej-pivot-grid id="PivotGrid" enable-conditional-formatting= "true"></ej-pivot-grid> 		property: allowConditionalFormatting

<ejs-pivotview id="PivotView" allowConditionalFormatting= "true"></ejs-pivotview>
Conditional formatting settings property: conditionalFormatSettings

<ej-pivot-grid id="PivotGrid" load= "onLoad"></ej-pivot-grid>

function onLoad(args) {
args.model.dataSource.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 id="PivotView">
<e-datasourcesettings>
<e-conditionalformatsettings>
<e-format measure= "In Stock" value1= 5000 conditions= "LessThan">
<e-style backgroundColor= "#80cbc4" color= "black" fontFamily= "Tahoma" fontSize= "12px"></e-style>
</e-format>
</e-conditionalformatsettings>
</e-datasourcesettings>
</ejs-pivotview>

Exporting

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

<ejs-pivotview id="PivotView" allowExcelExport= "true"></ejs-pivotview>
Pdf Export Not Applicable property: allowPdfExport

<ejs-pivotview id="PivotView" allowPdfExport= "true"></ejs-pivotview>

Grid Customization

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

<ejs-pivotview id="PivotView" width= 800></ejs-pivotview>
Set height for pivot grid Not Applicable property: height

<ejs-pivotview id="PivotView" height= 400></ejs-pivotview>
Set row height for pivot grid Not Applicable property: rowHeight

<ejs-pivotview id="PivotView">
<e-gridSettings rowHeight= 60></e-gridSettings>
</ejs-pivotview>
Set column width for pivot grid Not Applicable property: columnWidth

<ejs-pivotview id="PivotView">
<e-gridSettings columnWidth= 120></e-gridSettings>
</ejs-pivotview>
Drag and drop column headers in pivot grid Not Applicable property: allowReordering

<ejs-pivotview id="PivotView">
<e-gridSettings allowReordering= "true"></e-gridSettings>
</ejs-pivotview>
Resizing the column headers in pivot grid property: enableColumnResizing

<ej-pivot-grid id="PivotGrid" enable-column-resizing= "true"></ej-pivot-grid> 		property: allowResizing

<ejs-pivotview id="PivotView">
<e-gridSettings allowResizing= "true"></e-gridSettings>
</ejs-pivotview>
Wrap the cell content in pivot grid Not Applicable property: allowTextWrap

<ejs-pivotview id="PivotView">
<e-gridSettings allowTextWrap= "true"></e-gridSettings>
</ejs-pivotview>
Display cell border in pivot grid Not Applicable property: gridLines

<ejs-pivotview id="PivotView">
<e-gridSettings gridLines= "Vertical"></e-gridSettings>
</ejs-pivotview>
Cell selection property: enableCellSelection

<ej-pivot-grid id="PivotGrid" enable-cell-selection= "true"></ej-pivot-grid> 		property: allowSelection

<ejs-pivotview id="PivotView" load= "onLoad">
<e-gridSettings allowSelection= "true"></e-gridSettings>
</ejs-pivotview>

function onLoad() {
pivotObj = document.getElementById('PivotView').ej2_instances[0];
pivotObj.gridSettings.selectionSettings = {
cellSelectionMode: 'Box',
type: 'Multiple',
mode: 'Cell' };
}
Display overflow cell content in pivot grid Not Applicable property: clipMode

<ejs-pivotview id="PivotView">
<e-gridSettings clipMode= "Clip"></e-gridSettings>
</ejs-pivotview>
Cell Editing property: enableCellEditing

<ej-pivot-grid id="PivotGrid" enable-cell-editing= "true"></ej-pivot-grid> 		Not Applicable
Cell double click property: enableCellDoubleClick

<ej-pivot-grid id="PivotGrid" enable-cell-double-click= "true"></ej-pivot-grid> 		Not Applicable
Cell context property: enableCellContext

<ej-pivot-grid id="PivotGrid" enable-cell-context= "true"></ej-pivot-grid> 		Not Applicable

Accessibility

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

<ej-pivot-grid id="PivotGrid" locale= "es-ES"></ej-pivot-grid> 		property: locale

<ejs-pivotview id="PivotView" locale= "es-ES"></ejs-pivotview>
Right to left property: enableRTL

<ej-pivot-grid id="PivotGrid" enable-rtl= "true"></ej-pivot-grid> 		property: enableRtl

<ejs-pivotview id="PivotView" 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-pivot-grid id="PivotGrid" css-class= "custom-class"></ej-pivot-grid> 		property: cssClass

<ejs-pivotview id="PivotView" cssClass= "custom-class"></ejs-pivotview>
Keeping the model values in cookies Not Applicable property: enablePersistence

<ejs-pivotview id="PivotView" enablePersistence= "true"></ejs-pivotview>
Event triggers when control initializing event: load

<ej-pivot-grid id="PivotGrid" load= "onLoad"></ej-pivot-grid>

function onLoad() { } 		event: load

<ejs-pivotview id="PivotView" load= "onLoad"></ejs-pivotview>

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

<ej-pivot-grid id="PivotGrid" before-pivot-engine-populate= "onBeforePivotEnginePopulate"></ej-pivot-grid>

function onBeforePivotEnginePopulate() { } 		event: enginePopulating

<ejs-pivotview id="PivotView" enginePopulating= "onEnginePopulating"></ejs-pivotview>

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

<ej-pivot-grid id="PivotGrid" after-pivot-engine-populate= "onAfterPivotEnginePopulate"></ej-pivot-grid>

function onAfterPivotEnginePopulate() { } 		event: enginePopulated

<ejs-pivotview id="PivotView" enginePopulated= "onEnginePopulated"></ejs-pivotview>

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

<ej-pivot-grid id="PivotGrid" render-success= "onRenderSuccess"></ej-pivot-grid>

function onRenderSuccess() { } 		event: dataBound

<ejs-pivotview id="PivotView" dataBound= "onDataBound"></ejs-pivotview>

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

<ejs-pivotview id="PivotView" created= "onCreated"></ejs-pivotview>

function onCreated() { }
Event Triggers when destroy the control Not Applicable event: destroyed

<ejs-pivotview id="PivotView" destroyed= "onDestroyed"></ejs-pivotview>

function onDestroyed() { }
Event Triggers the cell clicked in pivot grid control event: cellClick

<ej-pivot-grid id="PivotGrid" cell-click= "onCellClick"></ej-pivot-grid>

function onCellClick() { } 		event: cellClick

<ejs-pivotview id="PivotView" cellClick= "onCellClick"></ejs-pivotview>

function onCellClick() { }