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

<ej-pivot-grid id="PivotGrid">
<e-data-source data="@ViewBag.data"></e-data-source>
</ej-pivot-grid>
property: dataSource

<ejs-pivotview id="PivotGrid">
<e-datasource data="@ViewBag.data"></e-datasource>
</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="PivotGrid">
<e-datasource>
<e-rows>
<e-field name="company" caption= "Industry"></e-field>
</e-rows>
</e-datasource>
</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="PivotGrid">
<e-datasource>
<e-columns>
<e-field name="company" caption= "Industry"></e-field>
</e-columns>
</e-datasource>
</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="PivotGrid">
<e-datasource>
<e-values>
<e-field name="balance" caption= "Balance($)"></e-field>
</e-values>
</e-datasource>
</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="PivotGrid">
<e-datasource>
<e-filters>
<e-field name="company" caption= "Industry"></e-field>
</e-filters>
</e-datasource>
</ejs-pivotview>
Value axis position Not Applicable property: valueAxis

<ejs-pivotview id="PivotGrid">
<e-datasource valueAxis="row"></e-datasource>
</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="PivotGrid">
<e-datasource>
<e-values>
<e-field name="balance" caption= "Balance($)" type= "Count"></e-field>
</e-values>
</e-datasource>
</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="PivotGrid">
<e-datasource>
<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-datasource>
</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="PivotGrid">
<e-datasource expandAll= "false"></e-datasource>
</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="PivotGrid">
<e-datasource>
<e-drilledmembers>
<e-field name="Country" items="@ViewBag.drilledMembers"></e-field>
</e-drilledmembers>
</e-datasource>
</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="PivotGrid" 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="PivotGrid">
<e-groupingBarSettings showFilterIcon= "false" showSortIcon= "true" showRemoveIcon= "false"></e-groupingBarSettings>
</ejs-pivotview>
Show/hide value group button Not Applicable property: showValuesButton

<ejs-pivotview id="PivotGrid" 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="PivotGrid">
<e-datasource>
<e-filtersettings>
<e-field name="eyeColor" type= "Exclude" items="@ViewBag.filterItems"></e-field>
</e-filtersettings>
</e-datasource>
</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="PivotGrid" allowLabelFilter= "true">
<e-datasource>
<e-filtersettings>
<e-field name="product" type= "Label" condition= "Between" value1= "e" value2= "v"></e-field>
</e-filtersettings>
</e-datasource>
</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="PivotGrid" allowValueFilter= "true">
<e-datasource>
<e-filtersettings>
<e-field name="product" measure= "quantity" type= "Value" condition= "Between" value1= "3250" value2= "5000"></e-field>
</e-filtersettings>
</e-datasource>
</ejs-pivotview>

Sorting

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

<ejs-pivotview id="PivotGrid">
<e-datasource enableSorting= "false"></e-datasource>
</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="PivotGrid">
<e-datasource>
<e-sortSettings>
<e-field name="company" order= "Descending"></e-field>
</e-sortSettings>
</e-datasource>
</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="PivotGrid" 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="PivotGrid">
<e-datasource>
<e-valuesortsettings headerText= "FY 2015##Sold Amount" headerDelimiter= "##" sortOrder= "Descending"></e-valuesortsettings>
</e-datasource>
</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="PivotGrid" 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="PivotGrid">
<e-datasource>
<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-datasource>
</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="PivotGrid" 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="PivotGrid" 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="PivotGrid">
<e-datasource>
<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-datasource>
</ejs-pivotview>

Exporting

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

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

<ejs-pivotview id="PivotGrid" 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="PivotGrid" width= 800></ejs-pivotview>
Set height for pivot grid Not Applicable property: height

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

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

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

<ejs-pivotview id="PivotGrid">
<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="PivotGrid">
<e-gridSettings allowResizing= "true"></e-gridSettings>
</ejs-pivotview>
Wrap the cell content in pivot grid Not Applicable property: allowTextWrap

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

<ejs-pivotview id="PivotGrid">
<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="PivotGrid" load= "onLoad">
<e-gridSettings allowSelection= "true"></e-gridSettings>
</ejs-pivotview>

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

<ejs-pivotview id="PivotGrid">
<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="PivotGrid" 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="PivotGrid" 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="PivotGrid" cssClass= "custom-class"></ejs-pivotview>
Keeping the model values in cookies Not Applicable property: enablePersistence

<ejs-pivotview id="PivotGrid" 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="PivotGrid" 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="PivotGrid" 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="PivotGrid" 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="PivotGrid" dataBound= "onDataBound"></ejs-pivotview>

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

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

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

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

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

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

function onCellClick() { }
event: cellClick

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

function onCellClick() { }