Search results

Editing

Cell edit allows you add, delete, or update the raw items or detailed data of any cells of the pivot table. The aggregation will be performed for the updated values. This feature can be enabled by setting the editSettings.allowEditing property to true.

The raw items/detailed data of any value cell can view in new window on double-clicking. CRUD operations can be performed by double-clicking the cells or using toolbar options in the newly opened report.

The available toolbar options are:

Toolbar Button Actions
Add Add a new row.
Edit Edit the current row or cell.
Delete Delete the current row.
Update Update the edited row or cell.
Cancel Cancel the edited state.

The following are the supported edit types of row data:

  • Normal
  • Dialog
  • Batch
  • Command Columns

Normal

In normal edit mode, when you start editing, the state of currently selected row is changed to edit state. You can change the cell values and save it to the data source by clicking Update toolbar button. To enable the normal edit, set the editSettings.mode to Normal.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, CellEditSettings, 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 editSettings: CellEditSettings = {
    allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Normal'
  } as CellEditSettings

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' height={280} dataSource={this.dataSource} editSettings={this.editSettings} ></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { 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.editSettings = {
            allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Normal'
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' height={280} dataSource={this.dataSource} editSettings={this.editSettings}></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

The normal edit mode is the default mode of editing.

Dialog

In dialog edit mode, when you start editing, the currently selected row data will be shown in a dialog. You can change the cell values and save it to the data source by clicking Save. To enable the dialog edit, set the editSettings.mode to Dialog.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, CellEditSettings, 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 editSettings: CellEditSettings = {
    allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Dialog'
  } as CellEditSettings

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' height={280} dataSource={this.dataSource} editSettings={this.editSettings} ></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { 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.editSettings = {
            allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Dialog'
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' height={280} dataSource={this.dataSource} editSettings={this.editSettings}></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

Batch

In batch edit mode, when you double-click the grid cell, the state of target cell is changed to edit state. You can perform bulk save (added, changed, and deleted data in the single request) to the data source by clicking the toolbar’s Update button.

To enable the batch edit, set the editSettings.mode to Batch.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, CellEditSettings, 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 editSettings: CellEditSettings = {
    allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Batch'
  } as CellEditSettings

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' height={280} dataSource={this.dataSource} editSettings={this.editSettings} ></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { 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.editSettings = {
            allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Batch'
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' height={280} dataSource={this.dataSource} editSettings={this.editSettings}></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

Command column

An additional column appended in the grid layout holds the command buttons to perform the CRUD operation. To enable the command columns, set the editSettings.allowCommandColumns to true.

The available built-in command buttons are:

Command Button Actions
Edit Edit the current row.
Delete Delete the current row.
Save Update the edited row.
Cancel Cancel the edited state.
Source
Preview
index.tsx
index.jsx
import { IDataOptions, CellEditSettings, 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 editSettings: CellEditSettings = {
    allowAdding: true, allowDeleting: true, allowEditing: true, allowCommandColumns: true
  } as CellEditSettings

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' height={280} dataSource={this.dataSource} editSettings={this.editSettings} ></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { 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.editSettings = {
            allowAdding: true, allowDeleting: true, allowEditing: true, allowCommandColumns: true
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' height={280} dataSource={this.dataSource} editSettings={this.editSettings}></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));