Search results

Calculated Field in React Pivot Table component

08 Dec 2022 / 14 minutes to read

Allows end user to create a new calculated field in the pivot table, based on available fields from the bound data source or using simple formula with basic arithmetic operators. It can be added at runtime through the built-in dialog, invoked from Field List UI. To do so, set the allowCalculatedField property to true in the pivot table. End user can now see a “CALCULATED FIELD” button enabled in Field List UI automatically, which on clicking will invoke the calculated field dialog and perform necessary operation.

Calculated field can also be included in the pivot table through code behind using the calculatedFieldsSettings. The required properties to create a new calculate field are:

  • name: It allows to indicate the calculated field with a unique name.
  • formula: It allows to set the formula.
  • formatSettings: It helps to set the number format for the resultant value.

To use calculated field option, you need to inject the CalculatedField module in pivot table.

The calculated field is applicable only for value fields. Also, calculated field created through code behind will be automatically listed in the UI dialog as well.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
import { CalculatedField, FieldList, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.dataSourceSettings = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            dataSource: pivotData,
            expandAll: false,
            filters: [],
            drilledMembers: [{ name: 'Country', items: ['France'] }],
            formatSettings: [{ name: 'Amount', format: 'C0' }, { name: 'Total', format: 'C2' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }, { name: 'Total', caption: 'Total Units', type: 'CalculatedField' }],
            calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotObj = d} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} allowCalculatedField={true} showFieldList={true}><Inject services={[CalculatedField, FieldList]}/> </PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));
Copied to clipboard
import { CalculatedField, FieldList, IDataOptions, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';

class App extends React.Component<{}, {}>{

  public dataSourceSettings: IDataOptions = {
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
dataSource: pivotData as IDataSet[],
expandAll: false,
filters: [],
drilledMembers: [{ name: 'Country', items: ['France'] }],
formatSettings: [{ name: 'Amount', format: 'C0' }, { name: 'Total', format: 'C2' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }, { name: 'Total', caption: 'Total Units', type: 'CalculatedField' }],
calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
  }
  public pivotObj: PivotViewComponent;
  render() {
return <PivotViewComponent  ref={d => this.pivotObj = d!} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} allowCalculatedField={true} showFieldList={true}><Inject services={[CalculatedField, FieldList]}/> </PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));

Meanwhile, user can also view calculated field dialog in UI by invoking createCalculatedFieldDialog method on an external button click which is shown in the below code sample.

To use calculated field option, you need to inject the CalculatedField module in pivot table.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { CalculatedField, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.dataSourceSettings = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            dataSource: pivotData,
            expandAll: false,
            filters: [],
            drilledMembers: [{ name: 'Country', items: ['France'] }],
            formatSettings: [{ name: 'Amount', format: 'C0' }, { name: 'Total', format: 'C2' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }, { name: 'Total', caption: 'Total Units', type: 'CalculatedField' }],
            calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
        };
    }
    render() {
        return <div><div className="col-md-9"> <PivotViewComponent ref={d => this.pivotObj = d} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} allowCalculatedField={true}><Inject services={[CalculatedField]}/> </PivotViewComponent></div>
<div className='col-lg-3 property-section'><ButtonComponent cssClass='e-primary' onClick={this.btnClick.bind(this)}>Calculated Field</ButtonComponent></div></div>;
    }
    btnClick() {
        this.pivotObj.calculatedFieldModule.createCalculatedFieldDialog();
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));
Copied to clipboard
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { CalculatedField, IDataOptions, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';

class App extends React.Component<{}, {}>{

  public dataSourceSettings: IDataOptions = {
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
dataSource: pivotData as IDataSet[],
expandAll: false,
filters: [],
drilledMembers: [{ name: 'Country', items: ['France'] }],
formatSettings: [{ name: 'Amount', format: 'C0' }, { name: 'Total', format: 'C2' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }, { name: 'Total', caption: 'Total Units', type: 'CalculatedField' }],
calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
  }
  public pivotObj: PivotViewComponent;
  render() {
return <div><div className="col-md-9"> <PivotViewComponent  ref={d => this.pivotObj = d!} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} allowCalculatedField={true}><Inject services={[CalculatedField]}/> </PivotViewComponent></div>
<div className='col-lg-3 property-section'><ButtonComponent cssClass='e-primary' onClick={this.btnClick.bind(this)}>Calculated Field</ButtonComponent></div></div>
  }

  btnClick(): void {
this.pivotObj.calculatedFieldModule.createCalculatedFieldDialog();
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));

Editing through the field list and the grouping bar

User can also modify the existing calculated field using the built-in edit option available directly in the field list (or) grouping bar. To do so, click the “Edit” icon available in the calculated field button. Now the calculated field dialog is opened and the current calculated field name, formula and format can be changed at runtime.

"Editing the calculated field

Editing the calculated field formula

Renaming the existing calculated field

Existing calculated field can be renamed only through the UI at runtime. To do so, open the calculated field dialog, select the target field and click “Edit” icon. User can now see the existing name getting displayed in the text box at the top of the dialog. Now, change the name based on user requirement and click “OK”.

Editing the calculated field

Renaming the calculated field

Editing the existing calculated field formula

Existing calculated field formula can be edited only through the UI at runtime. To do so, open the calculated field dialog, select the target field and click “Edit” icon. User can now see the existing formula getting displayed in a multiline text box at the bottom of the dialog. Now, change the formula based on user requirement and click “OK”.

Editing the calculated field

Editing the calculated field formula

Reusing the existing formula in a new calculate field

While creating a new calculated field, if user wants to the add the formula of an existing calculated field, it can be done easily. To do so, simply drag-and-drop the existing calculated field to the “Formula” section.

Dragging the existing calculated field

Drag field to formula

Reusing the existing calculated field formula

Apply the format to the calculated field values

Values in a new or existing calculated field can be formatted via the calculated field UI or code behind. The formatSettings property in code-behind can be used to specify the desired format. For more information about the supported formats refer here.

To apply format to calculated field values at runtime via UI, a built-in dropdown under the “Format” label is available, from which the user can select the pre-defined format options listed below.

  • Standard - Denotes the numeric type.
  • Currency - Denotes the currency type.
  • Percent - Denotes the percentage type.
  • Custom - Denotes the custom format. For example: “C2”. This shows the value “9584.3” as “$9584.30.”
  • None - Denotes that no format will be applied.

By default, None will be selected from the dropdown.

Applying format through calculated field dialog UI

In addition, you can specify the desired custom formats by selecting the Custom option from the “Format” dropdown.

Applying custom format through calculated field dialog UI

Supported operators and functions for the calculated field formula

Below is a list of operators and functions that can be used in the formula to create the calculated fields.

  • + – addition operator.
Copied to clipboard
 Syntax: X + Y
  • - – subtraction operator.
Copied to clipboard
Syntax: X - Y
  • * – multiplication operator.
Copied to clipboard
Syntax: X * Y
  • / – division operator.
Copied to clipboard
Syntax: X / Y
  • ^ – power operator.
Copied to clipboard
Syntax: X^2
  • < - less than operator.
Copied to clipboard
Syntax: X < Y
  • <= – less than or equal operator.
Copied to clipboard
Syntax: X <= Y
  • > – greater than operator.
Copied to clipboard
Syntax: X > Y
  • >= – greater than or equal operator.
Copied to clipboard
Syntax: X >= Y
  • == – equal operator.
Copied to clipboard
Syntax: X == Y
  • != – not equal operator.
Copied to clipboard
Syntax: X != Y
  • | – OR operator.
Copied to clipboard
Syntax: X | Y
  • & – AND operator.
Copied to clipboard
Syntax: X & Y
  • ? – conditional operator.
Copied to clipboard
Syntax: condition ? then : else
  • isNaN – function that checks if the value is not a number.
Copied to clipboard
Syntax: isNaN(value)
  • !isNaN – function that checks if the value is a number.
Copied to clipboard
Syntax: isNaN(value)
  • abs – function that returns the absolute value of a number.
Copied to clipboard
Syntax: abs(number)
  • min – function that returns the minimum value.
Copied to clipboard
Syntax: min(number1, number2)
  • max – function that returns the maximum value.
Copied to clipboard
Syntax: max(number1, number2)

Also, you can use JavaScript Math object properties and methods directly to the formula.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
import { CalculatedField, FieldList, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.dataSourceSettings = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            dataSource: pivotData,
            expandAll: false,
            filters: [],
            drilledMembers: [{ name: 'Country', items: ['France'] }],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }, { name: 'Total', caption: 'Total Units', type: 'CalculatedField' }],
            calculatedFieldSettings: [{ name: 'Total', formula: 'Math.round("Sum(Amount)") > abs("Sum(Sold)") ? min("Sum(Amount)", "Sum(Sold)") : Math.sqrt("Sum(Sold)")' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotObj = d} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} allowCalculatedField={true} showFieldList={true}><Inject services={[CalculatedField, FieldList]}/> </PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));
Copied to clipboard
import { CalculatedField, FieldList, IDataOptions, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';

class App extends React.Component<{}, {}>{

  public dataSourceSettings: IDataOptions = {
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
dataSource: pivotData as IDataSet[],
expandAll: false,
filters: [],
drilledMembers: [{ name: 'Country', items: ['France'] }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }, { name: 'Total', caption: 'Total Units', type: 'CalculatedField' }],
calculatedFieldSettings: [{ name: 'Total', formula: 'Math.round("Sum(Amount)") > abs("Sum(Sold)") ? min("Sum(Amount)", "Sum(Sold)") : Math.sqrt("Sum(Sold)")' }]
  }
  public pivotObj: PivotViewComponent;
  render() {
return <PivotViewComponent  ref={d => this.pivotObj = d!} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} allowCalculatedField={true} showFieldList={true}><Inject services={[CalculatedField, FieldList]}/> </PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));

Event

CalculatedFieldCreate

The event calculatedFieldCreate fires while closing the dialog on “OK” button click. It allows to customize the new or existing calculated field information obtained from the dialog. It has the following parameters

  • calculatedField: It holds the new or existing calculated field information obtained from dialog.
  • calculatedFieldSettings: It holds the calculatedFieldSettings property of the pivot report.
  • cancel: It is a boolean property and by setting this to true , the customization done in calculated field dialog won’t be applied to calculated field.

In the below sample, creating a calculated field without setting the format is restricted.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
import { CalculatedField, FieldList, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.dataSourceSettings = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            dataSource: pivotData,
            expandAll: false,
            filters: [],
            drilledMembers: [{ name: 'Country', items: ['France'] }],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }, { name: 'Total', caption: 'Total Units', type: 'CalculatedField' }],
            calculatedFieldSettings: [{ name: 'Total', formula: 'Math.round("Sum(Amount)") > abs("Sum(Sold)") ? min("Sum(Amount)", "Sum(Sold)") : Math.sqrt("Sum(Sold)")' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotObj = d} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} allowCalculatedField={true} showFieldList={true} calculatedFieldCreate={this.calculatedFieldCreate.bind(this)}><Inject services={[CalculatedField, FieldList]}/> </PivotViewComponent>;
    }
    calculatedFieldCreate(args) {
        if (args.calculatedField.formatString === '') {
            args.cancel = true;
        }
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));
Copied to clipboard
import { CalculatedField, FieldList, IDataOptions, IDataSet, Inject, PivotViewComponent, CalculatedFieldCreateEventArgs } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';

class App extends React.Component<{}, {}>{

  public dataSourceSettings: IDataOptions = {
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
dataSource: pivotData as IDataSet[],
expandAll: false,
filters: [],
drilledMembers: [{ name: 'Country', items: ['France'] }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }, { name: 'Total', caption: 'Total Units', type: 'CalculatedField' }],
calculatedFieldSettings: [{ name: 'Total', formula: 'Math.round("Sum(Amount)") > abs("Sum(Sold)") ? min("Sum(Amount)", "Sum(Sold)") : Math.sqrt("Sum(Sold)")' }]
  }
  public pivotObj: PivotViewComponent;
  render() {
return <PivotViewComponent  ref={d => this.pivotObj = d!} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} allowCalculatedField={true} showFieldList={true} calculatedFieldCreate={this.calculatedFieldCreate.bind(this)}><Inject services={[CalculatedField, FieldList]}/> </PivotViewComponent>
  }
  calculatedFieldCreate(args: CalculatedFieldCreateEventArgs) {
    if(args.calculatedField.formatString === '') {
        args.cancel = true;
    }
}
};

ReactDOM.render(<App />, document.getElementById('pivotview'));

ActionBegin

The event actionBegin triggers when clicking calculated field button, calculated field edit icon and context menu in the tree view inside the calculated field dialog. This allows user to identify the current action being performed at runtime. It has the following parameters:

  • dataSourceSettings: It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on.
  • actionName: It holds the name of the current action began. The following are the UI actions and their names:
Action Action Name
Calculated field button Open calculated field dialog
Edit icon in calculated field Edit calculated field
Context menu in the tree view inside the calculated field dialog Calculated field context menu
  • fieldInfo: It holds the selected field information.

Note: This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change.

  • cancel: It allows user to restrict the current action.

In the below sample, the calculated field button click action, that is, opening of the calculated field dialog can be restricted by setting the args.cancel option to true in the actionBegin event.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
import { FieldList, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.dataSourceSettings = {
            dataSource: pivotData,
            expandAll: false,
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
            filters: [],
            calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotObj = d} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} actionBegin={this.actionBegin.bind(this)} allowCalculatedField={true} showFieldList={true}><Inject services={[CalculatedField, FieldList]}/></PivotViewComponent>;
    }
    actionBegin(args) {
        if (args.actionName == 'Open calculated field dialog') {
            args.cancel = true;
        }
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));
Copied to clipboard
import { FieldList, IDataOptions, IDataSet, Inject, PivotViewComponent, PivotActionBeginEventArgs } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';

class App extends React.Component<{}, {}>{

  public dataSourceSettings: IDataOptions = {
dataSource: pivotData as IDataSet[],
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
filters: [],
calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
  }
  public pivotObj: PivotViewComponent;
  render() {
return <PivotViewComponent  ref={d => this.pivotObj = d!} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} actionBegin={this.actionBegin.bind(this)} allowCalculatedField={true} showFieldList={true} ><Inject services={[CalculatedField, FieldList]} /></PivotViewComponent>
  }
  actionBegin(args: PivotActionBeginEventArgs): void {
    if (args.actionName == 'Open calculated field dialog') {
        args.cancel = true;
    }
}
};

ReactDOM.render(<App />, document.getElementById('pivotview'));

ActionComplete

The event actionComplete triggers when the calculated field is completely created or edited. This allows user to identify the current UI action being completed at runtime. It has the following parameters:

  • dataSourceSettings: It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on.
  • actionName: It holds the name of the current action completed. The following are the UI actions and their names:
Action Action Name
Calculated field button Calculated field applied
Edit icon in calculated field Calculated field edited
  • fieldInfo: It holds the selected field information.

Note: This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change.

  • actionInfo: It holds the unique information about the current UI action. For example, if the edit action is completed, this event will be triggered, and the argument will display information such as the entire calculated field information and its formula, including the field name.
Source
Preview
index.jsx
index.tsx
Copied to clipboard
import { FieldList, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.dataSourceSettings = {
            dataSource: pivotData,
            expandAll: false,
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
            filters: [],
            calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotObj = d} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} actionComplete={this.actionComplete.bind(this)} allowCalculatedField={true} showFieldList={true}><Inject services={[CalculatedField, FieldList]}/></PivotViewComponent>;
    }
    actionComplete(args) {
        if (args.actionName == 'Calculated field applied') {
            // Triggers when the calculated field is applied.
        }
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));
Copied to clipboard
import { FieldList, IDataOptions, IDataSet, Inject, PivotViewComponent, PivotActionCompleteEventArgs } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';

class App extends React.Component<{}, {}>{

  public dataSourceSettings: IDataOptions = {
dataSource: pivotData as IDataSet[],
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
filters: [],
calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
  }
  public pivotObj: PivotViewComponent;
  render() {
return <PivotViewComponent  ref={d => this.pivotObj = d!} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} actionComplete={this.actionComplete.bind(this)} allowCalculatedField={true} showFieldList={true} ><Inject services={[CalculatedField, FieldList]} /></PivotViewComponent>
  }
  actionComplete(args: PivotActionCompleteEventArgs): void {
    if (args.actionName == 'Calculated field applied') {
        // Triggers when the calculated field is applied.
    }
}
};

ReactDOM.render(<App />, document.getElementById('pivotview'));

ActionFailure

The event actionFailure triggers when the current UI action fails to achieve the desired result. It has the following parameters:

  • actionName: It holds the name of the current action failed. The following are the UI actions and their names:
Action Action Name
Calculated field button Open calculated field dialog
Edit icon in calculated field Edit calculated field
Context menu in the tree view inside the calculated field dialog Calculated field context menu
  • errorInfo: It holds the error information of the current UI action.
Source
Preview
index.jsx
index.tsx
Copied to clipboard
import { FieldList, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.dataSourceSettings = {
            dataSource: pivotData,
            expandAll: false,
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
            filters: [],
            calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotObj = d} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} actionFailure={this.actionFailure.bind(this)} allowCalculatedField={true} showFieldList={true}><Inject services={[CalculatedField, FieldList]}/></PivotViewComponent>;
    }
    actionFailure(args) {
        if (args.actionName == 'Open calculated field dialog') {
            // Triggers when the current UI action fails to achieve the desired result.
        }
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));
Copied to clipboard
import { FieldList, IDataOptions, IDataSet, Inject, PivotViewComponent, PivotActionFailureEventArgs } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';

class App extends React.Component<{}, {}>{

  public dataSourceSettings: IDataOptions = {
dataSource: pivotData as IDataSet[],
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
filters: [],
calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
  }
  public pivotObj: PivotViewComponent;
  render() {
return <PivotViewComponent  ref={d => this.pivotObj = d!} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} actionFailure={this.actionFailure.bind(this)}  allowCalculatedField={true} showFieldList={true} ><Inject services={[CalculatedField, FieldList]} /></PivotViewComponent>
  }
  actionFailure(args: PivotActionFailureEventArgs): void {
    if (args.actionName == 'Open calculated field dialog') {
        // Triggers when the current UI action fails to achieve the desired result.
    }
}
};

ReactDOM.render(<App />, document.getElementById('pivotview'));