Ej1 api migration in React Pivotview component
31 Jan 202323 minutes to read
This article describes the API migration process of pivot table 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.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { data: [] };
|
property: dataSourceSettings<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { dataSource: [] as IDataSet[] };
|
Rows |
property: rows<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { rows: [{ fieldName: "Country", fieldCaption: "Country"}] };
|
property: rows<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { row: [{ name: 'company', caption: 'Industry' }] };
|
Columns |
property: columns<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { columns: [{ fieldName: "Country", fieldCaption: "Country"}] };
|
property: columns<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { columns: [{ name: 'company', caption: 'Industry' }] };
|
Values |
property: values<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { values: [ { fieldName: "balance", fieldCaption: "Balance($)"}] };
|
property: values<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { values: [{ name: 'balance', caption: 'Balance($)' }] };
|
Filters |
property: filters<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { filters: [{ fieldName: "Country", fieldCaption: "Country" }] };
|
property: filters<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { filters: [{ name: 'company', caption: 'Industry'}] };
|
Value axis position | Not Applicable |
property: valueAxis<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { valueAxis: 'row' };
|
Aggregation
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Summary Type |
property: summaryType<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { values: [{ fieldName: "balance", fieldCaption: "Balance($)", summaryType: ej.PivotAnalysis.SummaryType.Count }] };
|
property: type<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { values: [{ name: 'balance', caption: 'Balance($)', type: 'Count' }] };
|
Number Format
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Format settings |
property: format<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { values: [{ fieldName: "balance", fieldCaption: "Balance($)", format: "currency" }] };
|
property: formatSettings<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { formatSettings: [{ name: 'balance', format: 'C' }, { name: 'date', format: 'dd/MM/yyyy-hh:mm', type: 'date' }] };
|
Summary Customization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Show/hide grand totals |
property: enableGrandTotal<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { enableGrandTotal: false };
|
property: showGrandTotals<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { showGrandTotals: false };
|
Show/hide row grand totals |
property: enableRowGrandTotal<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { enableRowGrandTotal: false };
|
property: showRowGrandTotals<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { showRowGrandTotals: false };
|
Show/hide column grand totals |
property: enableColumnGrandTotal<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { enableColumnGrandTotal: false };
|
property: showColumnGrandTotals<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { showColumnGrandTotals: false };
|
Show/hide sub-totals | Not Applicable |
property: showSubTotals<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { showSubTotals: false };
|
Show/hide row sub-totals | Not Applicable |
property: showRowSubTotals<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { showRowSubTotals: false };
|
Show/hide column sub-totals | Not Applicable |
property: showColumnSubTotals<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { showColumnSubTotals: false };
|
Show/hide sub-totals for specific field |
property: showSubTotal<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { rows: [{ name: 'company', showSubTotal: false }] };
|
property: showSubTotals<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { rows: [{ name: 'company', showSubTotals: false }] };
|
Drill operation
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Expand All |
property: enableCollapseByDefault<EJ.PivotGrid id="PivotGrid" enableCollapseByDefault= {true}></EJ.PivotGrid>
|
property: expandAll<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { expandAll: false };
|
Drill Up/Down |
property: collapsedMembers<EJ.PivotGrid id="PivotGrid" collapsedMembers= {collapsedMembers}></EJ.PivotGrid> var collapsedMembers = { Country: ["Canada", "France"] };
|
property: drilledMembers<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { drilledMembers: [{ name: 'Country', items: ['France'] }] };
|
Field List
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Show/hide field list pop-up button on pivot table | Not Applicable |
property: showFieldList<PivotViewComponent id='PivotView' showFieldList={true}></PivotViewComponent>
|
Defer update |
property: enableDeferUpdate<EJ.PivotGrid id="PivotGrid" enableDeferUpdate= {true}></EJ.PivotGrid>
|
Not Applicable |
Control initialization |
component: PivotSchemaDesigner<EJ.PivotSchemaDesigner id="PivotSchemaDesigner"></EJ.PivotSchemaDesigner>
|
component: PivotFieldListComponent<PivotFieldListComponent id='PivotFieldList'> </PivotFieldListComponent>
|
Render mode | Not Applicable |
property: renderMode<PivotFieldListComponent id='PivotFieldList' renderMode= {'Fixed'}></PivotFieldListComponent>
|
Show/hide calculated field button | Not Applicable |
property: allowCalculatedField<PivotFieldListComponent id='PivotFieldList' allowCalculatedField={true}></PivotFieldListComponent>
|
Show/hide value group button | Not Applicable |
property: showValuesButton > <PivotFieldListComponent id='PivotFieldList' showValuesButton={true}></PivotFieldListComponent>
|
Grouping Bar
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Show/hide Grouping bar |
property: enableGroupingBar<EJ.PivotGrid id="PivotGrid" enableGroupingBar= {true}></EJ.PivotGrid>
|
property: showGroupingBar<PivotViewComponent id='PivotView' showGroupingBar={true}></PivotViewComponent>
|
Grouping Bar Settings | Not Applicable |
property: groupingBarSettings<PivotViewComponent id='PivotView' groupingBarSettings={groupingBarSettings}></PivotViewComponent> let groupingBarSettings: GroupingBarSettings = { showFilterIcon: false, showSortIcon: true, showRemoveIcon: false };
|
Show/hide value group button | Not Applicable |
property: showValuesButton<PivotFieldListComponent id='PivotFieldList' showValuesButton={true}></PivotFieldListComponent>
|
Filtering
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Filter settings |
property: filterItems<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { rows: [{ fieldName: "Country", fieldCaption: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]};
|
property: filterSettings<PivotViewComponent id="PivotGrid" dataSource= {dataSource}></PivotViewComponent> let dataSourceSettings: IDataOptions = { filterSettings: [{ name: 'eyeColor', type: 'Exclude', items: ['blue'] }] };
|
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.PivotGrid id="PivotGrid" maxNodeLimitInMemberEditor= {100}></EJ.PivotGrid>
|
property: maxNodeLimitInMemberEditor<PivotViewComponent id='PivotView' maxNodeLimitInMemberEditor={100}></PivotViewComponent>
|
No Data Items
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Show/hide “no data” items | Not Applicable |
property: showNoDataItems<PivotViewComponent id='PivotView' dataSourceSettings={dataSourceSettings}></PivotViewComponent> let dataSourceSettings: IDataOptions = { rows: [{ name: 'company', showNoDataItems: true }] };
|
Excel-like filtering
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Label filtering |
property: enableAdvancedFilter<EJ.PivotGrid id="PivotGrid" enableAdvancedFilter={true} dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { rows: [{ fieldName: "Country", fieldCaption: "Country", advancedFilter : [{ labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith, values: ["es"] ]} }]};
|
property: allowLabelFilter<PivotViewComponent id="PivotGrid" allowLabelFilter= {true} dataSource= {dataSource}></PivotViewComponent> let dataSourceSettings: IDataOptions = { filterSettings: [{ name: 'product', type: 'Label', condition: 'Between', value1: 'e', value2: 'v' }] };
|
Value filtering |
property: enableAdvancedFilter<EJ.PivotGrid id="PivotGrid" enableAdvancedFilter={true} dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { rows: [{ fieldName: "Country", fieldCaption: "Country", advancedFilter : [{ measure: "balance", valueFilterOperator: ej.olap.ValueFilterOptions.GreaterThan, values: ["200"] ]} }]};
|
property: allowValueFilter<PivotViewComponent id="PivotGrid" allowValueFilter= {true} dataSource= {dataSource}></PivotViewComponent> let dataSourceSettings: IDataOptions = { filterSettings: [{ name: 'product', measure: 'quantity', type: 'Value', condition: 'Between', value1: '3250', value2: '5000' }] };
|
Drill Through
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Show/hide drill though feature |
property: enableDrillThrough<EJ.PivotGrid id="PivotGrid" enableDrillThrough= {true}></EJ.PivotGrid>
|
property: allowDrillThrough<PivotViewComponent id='PivotView' allowDrillThrough={true}></PivotViewComponent>
|
Event Triggers when cell clicked in pivot table control |
event: drillThrough<EJ.PivotGrid id="PivotGrid" drillThrough= "onDrillThrough"></EJ.PivotGrid> function onDrillThrough(){ }
|
event: drillThrough<PivotViewComponent id="PivotGrid" drillThrough= this.onDrillThrough.bind(this)></PivotViewComponent> onDrillThrough(): void { }
|
Cell Editing
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Edit settings | Not Applicable |
property: editSettings<PivotViewComponent id='PivotView' editSettings={}></PivotViewComponent>
|
Show/hide cell editing feature |
property: enableCellEditing<EJ.PivotGrid id="PivotGrid" enableCellEditing= {true}></EJ.PivotGrid>
|
property: allowEditing<PivotViewComponent id='PivotView' editSettings={editSettings}></PivotViewComponent> let editSettings: CellEditSettings = { allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Normal' };
|
Hyperlink
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Hyperlink settings |
property: hyperlinkSettings<EJ.PivotGrid id="PivotGrid" hyperlinkSettings= {}></EJ.PivotGrid>
|
property: hyperlinkSettings<PivotViewComponent id='PivotView' hyperlinkSettings={}></PivotViewComponent>
|
Show/hide hyperlink to all cells | Not Applicable |
property: showHyperlink<PivotViewComponent id='PivotView' hyperlinkSettings={hyperlinkSettings}></PivotViewComponent> let hyperlinkSettings: HyperLinkSettings = { showHyperlink: 'true' };
|
Show/hide hyperlink to row headers |
property: enableRowHeaderHyperlink<EJ.PivotGrid id="PivotGrid" hyperlinkSettings= { enableRowHeaderHyperlink: true }></EJ.PivotGrid>
|
property: showRowHeaderHyperlink<PivotViewComponent id='PivotView' hyperlinkSettings={hyperlinkSettings}></PivotViewComponent> let hyperlinkSettings: HyperLinkSettings = { showRowHeaderHyperlink: 'true' };
|
Show/hide hyperlink to column headers |
property: enableColumnHeaderHyperlink<EJ.PivotGrid id="PivotGrid" hyperlinkSettings= { enableColumnHeaderHyperlink: true }></EJ.PivotGrid>
|
property: showColumnHeaderHyperlink<PivotViewComponent id='PivotView' hyperlinkSettings={hyperlinkSettings}></PivotViewComponent> let hyperlinkSettings: HyperLinkSettings = { showColumnHeaderHyperlink: 'true' };
|
Show/hide hyperlink to value cells |
property: enableValueCellHyperlink<EJ.PivotGrid id="PivotGrid" hyperlinkSettings= { enableValueCellHyperlink: true }></EJ.PivotGrid>
|
property: showValueCellHyperlink<PivotViewComponent id='PivotView' hyperlinkSettings={hyperlinkSettings}></PivotViewComponent> let hyperlinkSettings: HyperLinkSettings = { showValueCellHyperlink: 'true' };
|
Show/hide hyperlink to summary cells |
property: enableSummaryCellHyperlink<EJ.PivotGrid id="PivotGrid" hyperlinkSettings= { enableSummaryCellHyperlink: true }></EJ.PivotGrid>
|
property: showSummaryCellHyperlink<PivotViewComponent id='PivotView' hyperlinkSettings={hyperlinkSettings}></PivotViewComponent> let hyperlinkSettings: HyperLinkSettings = { showSummaryCellHyperlink: 'true' };
|
Show/hide hyperlink using specific conditions | Not Applicable |
property: conditionalSettings<PivotViewComponent id='PivotView' hyperlinkSettings={hyperlinkSettings}></PivotViewComponent> let hyperlinkSettings: HyperLinkSettings = { conditionalSettings: [{ measure: 'Units Sold', conditions: 'Between', value1: 150, value2: 200 }] };
|
Show/hide hyperlink for row or column | Not Applicable |
property: headerText<PivotViewComponent id='PivotView' hyperlinkSettings={hyperlinkSettings}></PivotViewComponent> let hyperlinkSettings: HyperLinkSettings = { headerText: 'FY 2015.Q1.Units Sold' };
|
Event Triggers when row headers clicked in pivot table |
event: rowHeaderHyperlinkClick<EJ.PivotGrid id="PivotGrid" rowHeaderHyperlinkClick= "onRowHeaderHyperlinkClick"></EJ.PivotGrid> function onRowHeaderHyperlinkClick(){ }
|
event: hyperlinkCellClick<PivotViewComponent id="PivotGrid" hyperlinkCellClick= this.onHyperlinkCellClick.bind(this)></PivotViewComponent> onHyperlinkCellClick(): void { }
|
Event Triggers when column headers clicked in pivot table |
event: columnHeaderHyperlinkClick<EJ.PivotGrid id="PivotGrid" columnHeaderHyperlinkClick= "onColumnHeaderHyperlinkClick"></EJ.PivotGrid> function onColumnHeaderHyperlinkClick(){ }
|
event: hyperlinkCellClick<PivotViewComponent id="PivotGrid" hyperlinkCellClick= this.onHyperlinkCellClick.bind(this)></PivotViewComponent> onHyperlinkCellClick(): void { }
|
Event Triggers when value cells clicked in pivot table |
event: valueCellHyperlinkClick<EJ.PivotGrid id="PivotGrid" valueCellHyperlinkClick= "onValueCellHyperlinkClick"></EJ.PivotGrid> function onValueCellHyperlinkClick(){ }
|
event: hyperlinkCellClick<PivotViewComponent id="PivotGrid" hyperlinkCellClick= this.onHyperlinkCellClick.bind(this)></PivotViewComponent> onHyperlinkCellClick(): void { }
|
Event Triggers when summary cells clicked in pivot table |
event: summaryCellHyperlinkClick<EJ.PivotGrid id="PivotGrid" summaryCellHyperlinkClick= "onSummaryCellHyperlinkClick"></EJ.PivotGrid> function onSummaryCellHyperlinkClick(){ }
|
event: hyperlinkCellClick<PivotViewComponent id="PivotGrid" hyperlinkCellClick= this.onHyperlinkCellClick.bind(this)></PivotViewComponent> onHyperlinkCellClick(): void { }
|
Defer Layout Update
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Show/hide defer layout update |
property: enableDeferUpdate<EJ.PivotGrid id="PivotGrid" enableDeferUpdate= {true}></EJ.PivotGrid>
|
property: allowDeferLayoutUpdate<PivotViewComponent id='PivotView' allowDeferLayoutUpdate={true}></PivotViewComponent>
|
Sorting
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Enable/disable sorting | Not Applicable |
property: enableSorting<PivotViewComponent id="PivotGrid" dataSource= {dataSource}></PivotViewComponent> let dataSourceSettings: IDataOptions = { enableSorting: false };
|
Sort settings |
property: sortOrder<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { rows: [{ fieldName: "Country", sortOrder : ej.PivotAnalysis.SortOrder.Descending}] };
|
property: sortSettings<PivotViewComponent id="PivotGrid" dataSource= {dataSource}></PivotViewComponent> let dataSourceSettings: IDataOptions = { sortSettings: [{ name: 'company', order: 'Descending'}] };
|
Value Sorting
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Enable/disable value sorting | Not Applicable |
property: enableSorting<PivotViewComponent id="PivotGrid" enableValueSorting= {true}></PivotViewComponent>
|
Value sort settings |
property: valueSortSettings<EJ.PivotGrid id="PivotGrid" valueSortSettings= {valueSortSettings}></EJ.PivotGrid> var valueSortSettings = { headerText: "Bike##Quantity", headerDelimiters: "##", sortOrder: ej.PivotAnalysis.SortOrder.Descending };
|
property: valueSortSettings<PivotViewComponent id="PivotGrid" dataSource= {dataSource}></PivotViewComponent> let dataSourceSettings: IDataOptions = { valueSortSettings: { headerText: 'FY 2015##Sold Amount', headerDelimiter: '##', sortOrder: 'Descending' } };
|
Calculated Field
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Show/hide calculated field | Not Applicable |
property: allowCalculatedField<PivotViewComponent id="PivotGrid" allowCalculatedField= {true}></PivotViewComponent>
|
Calculated field settings |
property: values<EJ.PivotGrid id="PivotGrid" dataSource= {pivotdataSource}></EJ.PivotGrid> var pivotdataSource = { values: [ { fieldName: "Amount", fieldCaption: "Amount"}, { fieldName: "Price", fieldCaption: "Price", isCalculatedField: true, formula: "Amount*15" }] };
|
property: calculatedFieldSettings<PivotViewComponent id="PivotGrid" dataSource= {dataSource}></PivotViewComponent> let dataSourceSettings: IDataOptions = { values: [{ name: 'Total', type: 'CalculatedField' }], calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }] };
|
Paging
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Paging |
property: enablePaging<EJ.PivotGrid id="PivotGrid" enablePaging= {true}></EJ.PivotGrid>
|
Not Applicable |
Virtual scrolling |
property: enableVirtualScrolling<EJ.PivotGrid id="PivotGrid" enableVirtualScrolling= {true}></EJ.PivotGrid>
|
property: enableVirtualization<PivotViewComponent id="PivotGrid" enableVirtualization= {true}></PivotViewComponent>
|
Conditional Formatting
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Show/hide conditional formatting |
property: enableConditionalFormatting<EJ.PivotGrid id="PivotGrid" enableConditionalFormatting= {true}></EJ.PivotGrid>
|
property: allowConditionalFormatting<PivotViewComponent id="PivotGrid" allowConditionalFormatting= {true}></PivotViewComponent>
|
Conditional formatting settings |
property: conditionalFormatSettings<EJ.PivotGrid id="PivotGrid" conditionalFormatSettings= {conditionalFormatSettings}></EJ.PivotGrid> var 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<PivotViewComponent id="PivotGrid" dataSource= {dataSource}></PivotViewComponent> let dataSourceSettings: IDataOptions = { conditionalFormatSettings: [{ measure: 'In Stock', value1: 5000, conditions: 'LessThan', style: { backgroundColor: '#80cbc4', color: 'black', fontFamily: 'Tahoma', fontSize: '12px' } }] };
|
Exporting
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Excel Export | Not Applicable |
property: allowExcelExport<PivotViewComponent id="PivotGrid" allowExcelExport= {true}></PivotViewComponent>
|
Pdf Export | Not Applicable |
property: allowPdfExport<PivotViewComponent id="PivotGrid" allowPdfExport= {true}></PivotViewComponent>
|
Grid Customization
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Set width for pivot table | Not Applicable |
property: width<PivotViewComponent id="PivotGrid" width= {800}></PivotViewComponent>
|
Set height for pivot table | Not Applicable |
property: height<PivotViewComponent id="PivotGrid" height= {400}></PivotViewComponent>
|
Set row height for pivot table | Not Applicable |
property: rowHeight<PivotViewComponent id="PivotGrid" gridSettings= {{rowHeight: 60}}></PivotViewComponent>
|
Set column width for pivot table | Not Applicable |
property: columnWidth<PivotViewComponent id="PivotGrid" gridSettings= {{columnWidth: 120}}></PivotViewComponent>
|
Drag and drop column headers in pivot table | Not Applicable |
property: allowReordering<PivotViewComponent id="PivotGrid" gridSettings= {{allowReordering: true}}></PivotViewComponent>
|
Resizing the column headers in pivot table |
property: enableColumnResizing<EJ.PivotGrid id="PivotGrid" enableColumnResizing= {true}></EJ.PivotGrid>
|
property: allowResizing<PivotViewComponent id="PivotGrid" gridSettings= {{allowResizing: true}}></PivotViewComponent>
|
Wrap the cell content in pivot table | Not Applicable |
property: allowTextWrap<PivotViewComponent id="PivotGrid" gridSettings= {{allowTextWrap: true}}></PivotViewComponent>
|
Display cell border in pivot table | Not Applicable |
property: gridLines<PivotViewComponent id="PivotGrid" gridSettings= {{gridLines:'Vertical'}}></PivotViewComponent>
|
Cell selection |
property: enableCellSelection<EJ.PivotGrid id="PivotGrid" enableCellSelection= {true}></EJ.PivotGrid>
|
property: allowSelection<PivotViewComponent id="PivotGrid" gridSettings= {gridSettings}></PivotViewComponent> let gridSettings: GridSettings = { allowSelection: true, selectionSettings: { cellSelectionMode: 'Box', type: 'Multiple', mode: 'Cell' } };
|
Display overflow cell content in pivot table | Not Applicable |
property: clipMode<PivotViewComponent id="PivotGrid" gridSettings= {{clipMode: 'Clip'}}></PivotViewComponent>
|
Cell Editing |
property: enableCellEditing<EJ.PivotGrid id="PivotGrid" enableCellEditing= {true}></EJ.PivotGrid>
|
Not Applicable |
Cell double click |
property: enableCellDoubleClick<EJ.PivotGrid id="PivotGrid" enableCellDoubleClick= {true}></EJ.PivotGrid>
|
Not Applicable |
Cell context |
property: enableCellContext<EJ.PivotGrid id="PivotGrid" enableCellContext= {true}></EJ.PivotGrid>
|
Not Applicable |
Accessibility
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Localization |
property: locale<EJ.PivotGrid id="PivotGrid" locale= {'es-ES'}></EJ.PivotGrid>
|
property: locale<PivotViewComponent id="PivotGrid" locale= {'es-ES'}></PivotViewComponent>
|
Right to left |
property: enableRTL<EJ.PivotGrid id="PivotGrid" enableRTL= {true}></EJ.PivotGrid>
|
property: enableRtl<PivotViewComponent id="PivotGrid" enableRTL= {true}></PivotViewComponent>
|
Common
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Adding custom class to wrapper element |
property: cssClass<EJ.PivotGrid id="PivotGrid" cssClass= {"custom-class"}></EJ.PivotGrid>
|
property: cssClass<PivotViewComponent id="PivotGrid" cssClass= {'custom-class'}></PivotViewComponent>
|
Keeping the model values in cookies | Not Applicable |
property: enablePersistence<PivotViewComponent id="PivotGrid" enablePersistence= {true}></PivotViewComponent>
|
Event triggers when control initializing |
event: load<EJ.PivotGrid id="PivotGrid" load= "onLoad"></EJ.PivotGrid> function onLoad(){ }
|
event: load<PivotViewComponent id="PivotGrid" load= this.onLoad.bind(this)></PivotViewComponent> onLoad(): void { }
|
Event Triggers before the pivot engine starts |
event: beforePivotEnginePopulate<EJ.PivotGrid id="PivotGrid" beforePivotEnginePopulate= "onBeforePivotEnginePopulate"></EJ.PivotGrid> function onBeforePivotEnginePopulate(){ }
|
event: enginePopulating<PivotViewComponent id="PivotGrid" enginePopulating= this.onEnginePopulating.bind(this)></PivotViewComponent> onEnginePopulating(): void { }
|
Event Triggers after the pivot engine populated |
event: afterPivotEnginePopulate<EJ.PivotGrid id="PivotGrid" afterPivotEnginePopulate= "onAfterPivotEnginePopulate"></EJ.PivotGrid> function onAfterPivotEnginePopulate(){ }
|
event: enginePopulated<PivotViewComponent id="PivotGrid" enginePopulated= this.onEnginePopulated.bind(this)></PivotViewComponent> onEnginePopulated(): void { }
|
Event Triggers after the control populated with data source |
event: renderSuccess<EJ.PivotGrid id="PivotGrid" renderSuccess= "onRenderSuccess"></EJ.PivotGrid> function onRenderSuccess(){ }
|
event: dataBound<PivotViewComponent id="PivotGrid" dataBound= this.onDataBound.bind(this)></PivotViewComponent> onDataBound(): void { }
|
Event Triggers after the control created | Not Applicable |
event: created<PivotViewComponent id="PivotGrid" created= this.created.bind(this)></PivotViewComponent> created(): void { }
|
Event Triggers when destroy the control | Not Applicable |
event: destroyed<PivotViewComponent id="PivotGrid" destroyed= this.destroyed.bind(this)></PivotViewComponent> destroyed(): void { }
|
Event Triggers the cell clicked in pivot table |
event: cellClick<EJ.PivotGrid id="PivotGrid" cellClick= "onCellClick"></EJ.PivotGrid> function onCellClick(){ }
|
event: cellClick<PivotViewComponent id="PivotGrid" cellClick= this.onCellClick.bind(this)></PivotViewComponent> onCellClick(): void { }
|