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

@Html.EJ().Pivot().PivotGrid("PivotGrid").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data)) 		property: dataSourceSettings

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.DataSource((IEnumerable<object>)ViewBag.Data)).Render()
Rows property: rows

@Html.EJ().Pivot().PivotGrid("PivotGrid").DataSource(dataSource => dataSource.Rows(rows => { rows.FieldName("Country").FieldCaption("Country").Add(); })) 		property: rows

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.Rows(rows =>{ rows.Name("Country").Caption("Country").Add(); })).Render()
Columns property: columns

@Html.EJ().Pivot().PivotGrid("PivotGrid").DataSource(dataSource => dataSource.Columns(columns => { columns.FieldName("Country").FieldCaption("Country").Add(); })) 		property: columns

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.Columns(columns =>{ columns.Name("Country").Caption("Country").Add(); })).Render()
Values property: values

@Html.EJ().Pivot().PivotGrid("PivotGrid").DataSource(dataSource => dataSource.Values(values => { values.FieldName("balance").FieldCaption("Balance($)").Add(); })) 		property: values

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.Values(values =>{ values.Name("balance").Caption("Balance($)").Add(); })).Render()
Filters property: filters

@Html.EJ().Pivot().PivotGrid("PivotGrid").DataSource(dataSource => dataSource.Filters(filters => { filters.FieldName("Country").FieldCaption("Country").Add(); })) 		property: filters

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.Filters(filters =>{ filters.Name("Country").Caption("Country").Add(); })).Render()
Value axis position Not Applicable property: valueAxis

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.ValueAxis("row")).Render()

Aggregation

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

@Html.EJ().Pivot().PivotGrid("PivotGrid").DataSource(dataSource => dataSource.Values(values => { values.FieldName("balance").FieldCaption("Balance($)").SummaryType("Count").Add(); })) 		property: type

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.Values(values =>{ values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Type(SummaryType.Count).Add();})).Render()

Number Format

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

@Html.EJ().Pivot().PivotGrid("PivotGrid").DataSource(dataSource => dataSource.Values(values => { values.FieldName("balance").FieldCaption("Balance($)").Format("currency").Add(); })) 		property: formatSettings

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.FormatSettings(formatsettings => { formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add(); formatsettings.Name("Year").Format("dd/MM/yyyy-hh:mm").Type("date").Add(); })).Render()

Summary Customization

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

@Html.EJ().Pivot().PivotGrid("PivotGrid").DataSource(dataSource => dataSource.EnableGrandTotal(false)) 		property: showGrandTotals

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.ShowGrandTotals(false)).Render()
Show/hide row grand totals property: enableRowGrandTotal

@Html.EJ().Pivot().PivotGrid("PivotGrid").DataSource(dataSource => dataSource.EnableRowGrandTotal(false)) 		property: showRowGrandTotals

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.ShowRowGrandTotals(false)).Render()
Show/hide column grand totals property: enableColumnGrandTotal

@Html.EJ().Pivot().PivotGrid("PivotGrid").DataSource(dataSource => dataSource.EnableColumnGrandTotal(false)) 		property: showColumnGrandTotals

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.ShowColumnGrandTotals(false)).Render()
Show/hide sub-totals Not Applicable property: showSubTotals

@Html.EJS().PivotView("PivotView").DataSource(dataSource => dataSource.ShowSubTotals(false)).Render()
Show/hide row sub-totals Not Applicable property: showRowSubTotals

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.ShowRowSubTotals(false)).Render()
Show/hide column sub-totals Not Applicable property: showColumnSubTotals

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.ShowColumnSubTotals(false)).Render()
Show/hide sub-totals for specific field property: showSubTotal

@Html.EJ().Pivot().PivotGrid("PivotGrid").DataSource(dataSource => dataSource.Rows(rows => { rows.FieldName("Country").ShowSubTotal(false).Add(); })) 		property: showSubTotals

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.Rows(rows =>{ rows.Name("Country").ShowSubTotals(false).Add(); })).Render()

Drill operation

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

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableCollapseDyDefault(true) 		property: expandAll

@Html.EJS().PivotView("PivotView").ExpandAll(true).Render()
Drill Up/Down property: collapsedMembers

@Html.EJ().Pivot().PivotGrid("PivotGrid1").ClientSideEvents(clientSideEvents => clientSideEvents.Load("onLoad"))

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

@Html.EJS().PivotView("PivotView").DrilledMembers(drilledmembers =>{ drilledmembers.Name("Country").Items(ViewBag.drilledMembers).Add();}).Render()

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

@Html.EJS().PivotView("PivotView").ShowFieldList(true).Render()
Defer update property: enableDeferUpdate

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableDeferUpdate(true) 		Not Applicable
Control initialization component: PivotSchemaDesigner

@Html.EJ().Pivot().PivotSchemaDesigner("PivotSchemaDesigner") 		component: PivotFieldListComponent

@Html.EJS().PivotFieldList("PivotFieldList").Render()
Render mode Not Applicable property: renderMode

@Html.EJS().PivotFieldList("PivotFieldList").RenderMode("Fixed").Render()
Show/hide calculated field button Not Applicable property: allowCalculatedField

@Html.EJS().PivotFieldList("PivotFieldList").AllowCalculatedField(true).Render()
Show/hide value group button Not Applicable property: showValuesButton

@Html.EJS().PivotFieldList("PivotFieldList").ShowValuesButton(true).Render()

Grouping Bar

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

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableGroupingBar(true) 		property: showGroupingBar

@Html.EJS().PivotView("PivotView").ShowGroupingBar(true).Render()
Grouping Bar Settings Not Applicable property: groupingBarSettings

@Html.EJS().PivotView("PivotView").GroupingBarSettings( new PivotViewGroupingBarSettings { ShowFilterIcon =false ShowSortIcon=true ShowRemoveIcon=false}).Render()
Show/hide value group button Not Applicable property: showValuesButton

@Html.EJS().PivotView("PivotView").ShowValuesButton(true).Render()

Filtering

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

@Html.EJ().Pivot().PivotGrid("PivotGrid").DataSource(dataSource => dataSource.Rows(rows => { rows.FieldName("Country").FieldCaption("Country").Add(); })).ClientSideEvents(clientSideEvents => clientSideEvents.Load("onLoad"))

function onLoad(args) {
args.model.dataSource.rows[0].filterItems = {
filterType: ej.PivotAnalysis.FilterType.Exclude,
values: ["Canada", "France"] };
} 		property: filterSettings

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.FilterSettings(filtersettings =>{ filtersettings.Name("Country").Type("Exclude").Items(ViewBag.filterMembers).Add();})).Render()

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

@Html.EJ().Pivot().PivotGrid("PivotGrid").MaxNodeLimitInMemberEditor(100) 		property: maxNodeLimitInMemberEditor

@Html.EJS().PivotView("PivotView").MaxNodeLimitInMemberEditor(100).Render()

No Data Items

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

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.Rows(rows =>{ rows.Name("Country").showNoDataItems(true).Add(); })).Render()

Excel-like filtering

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

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableAdvancedFilter(true).DataSource(dataSource => dataSource.Rows(rows => { rows.FieldName("Country").FieldCaption("Country").Add(); })).ClientSideEvents(clientSideEvents => clientSideEvents.Load("onLoad"))

function onLoad(args) {
args.model.dataSource.rows[0].advancedFilter = [{
labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith,
values: ["s"]}]
} 		property: allowLabelFilter

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.AllowLabelFilter(true).FilterSettings(filtersettings =>{ filtersettings.Name("Country").Type(FilterType.Label).Condition(Operators.GreaterThan).Value1('United Kingdom').Add();})).Render()
Value filtering property: enableAdvancedFilter

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableAdvancedFilter(true).DataSource(dataSource => dataSource.Rows(rows => { rows.FieldName("Country").FieldCaption("Country").Add(); })).ClientSideEvents(clientSideEvents => clientSideEvents.Load("onLoad"))

function onLoad(args) {
args.model.dataSource.rows[0].advancedFilter = [{
measure: "balance"
valueFilterOperator: ej.olap.ValueFilterOptions.EndsWith,
values: ["002"]}]
} 		property: allowValueFilter

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.AllowValueFilter(true).FilterSettings(filtersettings =>{ filtersettings.Name("Country").Measure("quantity").Type(FilterType.Value).Condition(Operators.Between).Value1("3250")..Value2("5000").Add();})).Render()

Drill Through

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

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableDrillThrough(true) 		property: allowDrillThrough

@Html.EJS().PivotView("PivotView").AllowDrillThrough(true).Render()
Event Triggers when cell clicked in pivot grid control event: drillThrough

@Html.EJ().Pivot().PivotGrid("PivotGrid1").ClientSideEvents(clientSideEvents => clientSideEvents.DrillThrough("onDrillThrough"))

function onDrillThrough() { } 		event: drillThrough

@Html.EJS().PivotView("PivotView").DrillThrough("onDrillThrough").Render()

function onDrillThrough() { }

Cell Editing

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

@Html.EJS().PivotView("PivotView").EditSettings(new PivotViewCellEditSettings{}).Render()
Show/hide cell editing feature property: enableCellEditing

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableCellEditing(true) 		property: allowEditing

@Html.EJS().PivotView("PivotView").EditSettings(new PivotViewCellEditSettings{AllowAdding=true;AllowDeleting=true;AllowEditing=true;Mode=EditMode.Dialog}).Render()
Behavior API in Essential® JS 1 API in Essential® JS 2
Hyperlink settings property: hyperlinkSettings

@Html.EJ().Pivot().PivotGrid("PivotGrid").HyperlinkSettings() 		property: hyperlinkSettings

@Html.EJS().PivotView("PivotView").HyperlinkSettings().Render()
Show/hide hyperlink to all cells Not Applicable property: showHyperlink

@Html.EJS().PivotView("PivotView").HyperlinkSettings( new PivotViewHyperLinkSettings { showHyperlink =true }).Render()
Show/hide hyperlink to row headers property: enableRowHeaderHyperlink

@Html.EJ().Pivot().PivotGrid("PivotGrid").HyperlinkSettings(hypLink => hypLink.EnableRowHeaderHyperlink(true)) 		property: showRowHeaderHyperlink

@Html.EJS().PivotView("PivotView").HyperlinkSettings( new PivotViewHyperLinkSettings { showRowHeaderHyperlink =true }).Render()
Show/hide hyperlink to column headers property: enableColumnHeaderHyperlink

@Html.EJ().Pivot().PivotGrid("PivotGrid").HyperlinkSettings(hypLink => hypLink.EnableColumnHeaderHyperlink(true)) 		property: showColumnHeaderHyperlink

@Html.EJS().PivotView("PivotView").HyperlinkSettings( new PivotViewHyperLinkSettings { showColumnHeaderHyperlink =true }).Render()
Show/hide hyperlink to value cells property: enableValueCellHyperlink

@Html.EJ().Pivot().PivotGrid("PivotGrid").HyperlinkSettings(hypLink => hypLink.EnableValueCellHyperlink(true)) 		property: showValueCellHyperlink

@Html.EJS().PivotView("PivotView").HyperlinkSettings( new PivotViewHyperLinkSettings { showValueCellHyperlink =true }).Render()
Show/hide hyperlink to summary cells property: enableSummaryCellHyperlink

@Html.EJ().Pivot().PivotGrid("PivotGrid").HyperlinkSettings(hypLink => hypLink.EnableSummaryCellHyperlink(true)) 		property: showSummaryCellHyperlink

@Html.EJS().PivotView("PivotView").HyperlinkSettings( new PivotViewHyperLinkSettings { showSummaryCellHyperlink =true }).Render()
Show/hide hyperlink using specific conditions Not Applicable property: conditionalSettings

@Html.EJS().PivotView("PivotView").HyperlinkSettings(hyperlinksettings => hyperlinksettings..ConditionalSettings( format =>{format.Conditions(Condition.Between).Measure("Units Sold").Value1(150).Value2(200).Add();})).Render()
Show/hide hyperlink for row or column Not Applicable property: headerText

@Html.EJS().PivotView("PivotView").HyperlinkSettings( new PivotViewHyperLinkSettings { headerText ='FY 2015.Q1.Units Sold' }).Render()
Event Triggers when row headers clicked in pivot grid control event: rowHeaderHyperlinkClick

@Html.EJ().Pivot().PivotGrid("PivotGrid1").ClientSideEvents(clientSideEvents => clientSideEvents.RowHeaderHyperlinkClick("onClick"))

function onClick() { } 		event: hyperlinkCellClick

@Html.EJS().PivotView("PivotView").HyperlinkCellClick("onClick").Render()

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

@Html.EJ().Pivot().PivotGrid("PivotGrid1").ClientSideEvents(clientSideEvents => clientSideEvents.ColumnHeaderHyperlinkClick("onClick"))

function onClick() { } 		event: hyperlinkCellClick

@Html.EJS().PivotView("PivotView").HyperlinkCellClick("onClick").Render()

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

@Html.EJ().Pivot().PivotGrid("PivotGrid1").ClientSideEvents(clientSideEvents => clientSideEvents.ValueCellHyperlinkClick("onClick"))

function onClick() { } 		event: hyperlinkCellClick

@Html.EJS().PivotView("PivotView").HyperlinkCellClick("onClick").Render()

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

@Html.EJ().Pivot().PivotGrid("PivotGrid1").ClientSideEvents(clientSideEvents => clientSideEvents.SummaryCellHyperlinkClick("onClick"))

function onClick() { } 		event: hyperlinkCellClick

@Html.EJS().PivotView("PivotView").HyperlinkCellClick("onClick").Render()

function onClick() { }

Defer Layout Update

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

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableDeferUpdate(true) 		property: allowDeferLayoutUpdate

@Html.EJS().PivotView("PivotView").AllowDeferLayoutUpdate(true).Render()

Sorting

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

@Html.EJS().PivotView("PivotView").EnableSorting(true).Render()
Sort settings property: sortOrder

@Html.EJ().Pivot().PivotGrid("PivotGrid").DataSource(dataSource => dataSource.Rows(rows => { rows.FieldName("Country").FieldCaption("Country").SortOrder(SortOrder.Descending).Add(); })) 		property: sortSettings

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.SortSettings(sortsettings =>{ sortsettings.Name("company").Order("Descending").Add();})).Render()

Value Sorting

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

@Html.EJS().PivotView("PivotView").EnableValueSorting(true).Render()
Value sort settings property: valueSortSettings

@Html.EJ().Pivot().PivotGrid("PivotGrid").ValueSortSettings(valuesortsettings=>valuesortsettings.HeaderText("Bike##Quantity").HeaderDelimiters("##").SortOrder(SortOrder.Descending)) 		property: valueSortSettings

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.ValueSortSettings(new PivotViewValueSortSettings { HeaderText = "FY 2015##Sold Amount", HeaderDelimiter = "##", SortOrder = Sorting.Descending })).Render()

Calculated Field

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

@Html.EJS().PivotView("PivotView").AllowCalculatedField(true).Render()
Calculated field settings property: values

@Html.EJ().Pivot().PivotGrid("PivotGrid1").DataSource(dataSource => dataSource.Values(values => { values.FieldName("Amount").Add(); values.FieldName("Price").FieldCaption("Price").IsCalculatedField(true).Formula("Amount * 15").Add(); })) 		property: calculatedFieldSettings

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource.CalculatedFieldSettings(calculatedfieldsettings => { calculatedfieldsettings.Name("Total").Formula(totalPrice).Add(); })).Render()

@{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

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnablePaging(true) 		Not Applicable
Virtual scrolling property: enableVirtualScrolling

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableVirtualScrolling(true) 		property: enableVirtualization

@Html.EJS().PivotView("PivotView").EnableVirtualization(true).Render()

Conditional Formatting

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

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableConditionalFormatting(true) 		property: allowConditionalFormatting

@Html.EJS().PivotView("PivotView").AllowConditionalFormatting(true).Render()
Conditional formatting settings property: conditionalFormatSettings

@Html.EJ().Pivot().PivotGrid("PivotGrid").ClientSideEvents(clientSideEvents => clientSideEvents.Load("onLoad"))

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

@Html.EJS().PivotView("PivotView").DataSourceSettings(dataSource => dataSource..ConditionalFormatSettings( format =>{ format.Conditions(Condition.LessThan).Measure("In Stock").Value1(5000).Style( style => { style.BackgroundColor("#80cbc4").Color("black").FontFamily("Tahoma").FontSize("12px"); }).Add(); format.Conditions(Condition.Between).Measure("Units Sold").Value1(3400).Value2(40000).Style(style => { style.BackgroundColor("#f48fb1").Color("black").FontFamily("Tahoma").FontSize("12px"); }).Add(); }))..Render()

Exporting

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

@Html.EJS().PivotView("PivotView").AllowExcelExport(true).Render()
Pdf Export Not Applicable property: allowPdfExport

@Html.EJS().PivotView("PivotView").AllowPdfExport(true).Render()

Grid Customization

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

@Html.EJS().PivotView("PivotView").Width(800).Render()
Set height for pivot grid Not Applicable property: height

@Html.EJS().PivotView("PivotView").Height(400).Render()
Set row height for pivot grid Not Applicable property: rowHeight

@Html.EJS().PivotView("PivotView").GridSettings(new PivotViewGridSettings { RowHeight = 60 }).Render()
Set column width for pivot grid Not Applicable property: columnWidth

@Html.EJS().PivotView("PivotView").GridSettings(new PivotViewGridSettings { ColumnWidth = 120 }).Render()
Drag and drop column headers in pivot grid Not Applicable property: allowReordering

@Html.EJS().PivotView("PivotView").GridSettings(new PivotViewGridSettings { AllowReordering = true }).Render()
Resizing the column headers in pivot grid property: enableColumnResizing

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableColumnResizing(true) 		property: allowResizing

@Html.EJS().PivotView("PivotView").GridSettings(new PivotViewGridSettings { AllowResizing = true }).Render()
Wrap the cell content in pivot grid Not Applicable property: allowTextWrap

@Html.EJS().PivotView("PivotView").GridSettings(new PivotViewGridSettings { AllowTextWrap = true }).Render()
Display cell border in pivot grid Not Applicable property: gridLines

@Html.EJS().PivotView("PivotView").GridSettings(new PivotViewGridSettings { GridLines = "Vertical" }).Render()
Cell selection property: enableCellSelection

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableCellSelection(true) 		property: allowSelection

@Html.EJS().PivotView("PivotView").GridSettings(new PivotViewGridSettings { AllowSelection = true }).Load("onLoad").Render()

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

@Html.EJS().PivotView("PivotView").GridSettings(new PivotViewGridSettings { ClipMode = "Clip" }).Render()
Cell Editing property: enableCellEditing

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableCellEditing(true) 		Not Applicable
Cell double click property: enableCellDoubleClick

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableCellDoubleClick(true) 		Not Applicable
Cell context property: enableCellContext

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableCellContext(true) 		Not Applicable

Accessibility

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

@Html.EJ().Pivot().PivotGrid("PivotGrid").Locale("es-ES") 		property: locale

@Html.EJS().PivotView("PivotView").Locale("es-ES").Render()
Right to left property: enableRTL

@Html.EJ().Pivot().PivotGrid("PivotGrid").EnableRtl(true) 		property: enableRtl

@Html.EJS().PivotView("PivotView").EnableRTL(true).Render()

Common

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

@Html.EJ().Pivot().PivotGrid("PivotGrid").CssClass("custom-class") 		property: cssClass

@Html.EJS().PivotView("PivotView").CssClass("custom-class").Render()
Keeping the model values in cookies Not Applicable property: enablePersistence

@Html.EJS().PivotView("PivotView").EnablePersistence(true).Render()
Event triggers when control initializing event: load

@Html.EJ().Pivot().PivotGrid("PivotGrid1").ClientSideEvents(clientSideEvents => clientSideEvents.Load("onLoad"))

function onLoad() { } 		event: load

@Html.EJS().PivotView("PivotView").Load("onLoad").Render()

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

@Html.EJ().Pivot().PivotGrid("PivotGrid1").ClientSideEvents(clientSideEvents => clientSideEvents.BeforePivotEnginePopulate("onBeforePivotEnginePopulate"))

function onBeforePivotEnginePopulate() { } 		event: enginePopulating

@Html.EJS().PivotView("PivotView").EnginePopulating("onEnginePopulating").Render()

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

@Html.EJ().Pivot().PivotGrid("PivotGrid1").ClientSideEvents(clientSideEvents => clientSideEvents.AfterPivotEnginePopulate("onAfterPivotEnginePopulate"))

function onAfterPivotEnginePopulate() { } 		event: enginePopulated

@Html.EJS().PivotView("PivotView").EnginePopulated("onEnginePopulated").Render()

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

@Html.EJ().Pivot().PivotGrid("PivotGrid1").ClientSideEvents(clientSideEvents => clientSideEvents.RenderSuccess("onRenderSuccess"))

function onRenderSuccess() { } 		event: dataBound

@Html.EJS().PivotView("PivotView").DataBound("onDataBound").Render()

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

@Html.EJS().PivotView("PivotView").Created("onCreated").Render()

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

@Html.EJS().PivotView("PivotView").Destroyed("onDestroyed").Render()

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

@Html.EJ().Pivot().PivotGrid("PivotGrid1").ClientSideEvents(clientSideEvents => clientSideEvents.CellClick("onCellClick"))

function onCellClick() { } 		event: cellClick

@Html.EJS().PivotView("PivotView").CellClick("onCellClick").Render()

function onCellClick() { }