Search results

Migration from Essential JS 1

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: dataSource

@Html.EJS().PivotView("PivotGrid").DataSource(dataSource => dataSource.Data((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("PivotGrid").DataSource(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("PivotGrid").DataSource(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("PivotGrid").DataSource(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("PivotGrid").DataSource(dataSource => dataSource.Filters(filters =>{ filters.Name("Country").Caption("Country").Add(); })).Render()
Value axis position Not Applicable property: valueAxis

@Html.EJS().PivotView("PivotGrid").DataSource(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("PivotGrid").DataSource(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("PivotGrid").DataSource(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()

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("PivotGrid").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("PivotGrid").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("PivotGrid").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("PivotGrid").ShowGroupingBar(true).Render()
Grouping Bar Settings Not Applicable property: groupingBarSettings

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

@Html.EJS().PivotView("PivotGrid").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("PivotGrid").DataSource(dataSource => dataSource.FilterSettings(filtersettings =>{ filtersettings.Name("Country").Type("Exclude").Items(ViewBag.filterMembers).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("PivotGrid").DataSource(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("PivotGrid").DataSource(dataSource => dataSource.AllowValueFilter(true).FilterSettings(filtersettings =>{ filtersettings.Name("Country").Measure("quantity").Type(FilterType.Value).Condition(Operators.Between).Value1("3250")..Value2("5000").Add();})).Render()

Sorting

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

@Html.EJS().PivotView("PivotGrid").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("PivotGrid").DataSource(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("PivotGrid").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("PivotGrid").DataSource(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("PivotGrid").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("PivotGrid").DataSource(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("PivotGrid").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("PivotGrid").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("PivotGrid").DataSource(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("PivotGrid").AllowExcelExport(true).Render()
Pdf Export Not Applicable property: allowPdfExport

@Html.EJS().PivotView("PivotGrid").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("PivotGrid").Width(800).Render()
Set height for pivot grid Not Applicable property: height

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

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

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

@Html.EJS().PivotView("PivotGrid").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("PivotGrid").GridSettings(new PivotViewGridSettings { AllowResizing = true }).Render()
Wrap the cell content in pivot grid Not Applicable property: allowTextWrap

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

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

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

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

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

@Html.EJS().PivotView("PivotGrid").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("PivotGrid").Locale("es-ES").Render()
Right to left property: enableRTL

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

@Html.EJS().PivotView("PivotGrid").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("PivotGrid").CssClass("custom-class").Render()
Keeping the model values in cookies Not Applicable property: enablePersistence

@Html.EJS().PivotView("PivotGrid").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("PivotGrid").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("PivotGrid").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("PivotGrid").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("PivotGrid").DataBound("onDataBound").Render()

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

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

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

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

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

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

function onCellClick() { }
event: cellClick

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

function onCellClick() { }