Migration from Essential JS 1
17 Feb 202221 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>
|
Hyperlink
| 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() { }
|