Search results

Perform cell selection and get selected cells information

You can select any cell/row by setting the property gridSettings.allowSelection as true where the selected cells can be highlighted. It can be done through mouse down or arrow keys.

Selection mode

It supports four types of selection mode that can be set by the property gridSettings.selectionSettings.mode. They are,

  • Row: The Row value is set by default, and allows you to select only rows.
  • Column: Allows you to select only columns.
  • Cell: Allows you to select only cells.
  • Both: Allows you to select rows and columns at the same time.

Selection type

It supports two types of selection that can be set by the property gridSettings.selectionSettings.type. They are,

  • Single: The Single value is set by default, and it only allows selection of a single row or a column or a cell.
  • Multiple: Allows you to select multiple rows or cells. To perform the multi-selection, press and hold CTRL key and click the desired rows or columns or cells. To select range of rows or cells, press and hold the SHIFT key and click the rows or columns or cells.

Event

The event cellSelected fires on every cell/row/column on selected/deselected operations and it provides the selected cells information with its corresponding column and row headers.

Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent, GridSettings, PivotCellSelectedEventArgs } 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 gridSettings: GridSettings = {
    allowSelection: true,
    selectionSettings: { mode: 'Both', type: 'Multiple' }
  } as GridSettings;

  public dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    filters: [],
    formatSettings: [{ name: 'Amount', format: 'C2', useGrouping: false, minimumSignificantDigits: 1, maximumSignificantDigits: 3 }],
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
  }

  onCellSelected(args: PivotCellSelectedEventArgs): void {
    //args.selectedCellsInfo -> get selected cells information.
    //args.pivotValues -> get the pivot values of the pivot grid.
  }
  public pivotGridObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotGridObj = d!} id='PivotView' height={280} dataSource={this.dataSource} gridSettings={this.gridSettings} cellSelected={this.onCellSelected}></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.gridSettings = {
            allowSelection: true,
            selectionSettings: { mode: 'Both', type: 'Multiple' }
        };
        this.dataSource = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            data: pivotData,
            expandAll: false,
            filters: [],
            formatSettings: [{ name: 'Amount', format: 'C2', useGrouping: false, minimumSignificantDigits: 1, maximumSignificantDigits: 3 }],
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
        };
    }
    onCellSelected(args) {
        //args.selectedCellsInfo -> get selected cells information.
        //args.pivotValues -> get the pivot values of the pivot grid.
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotGridObj = d} id='PivotView' height={280} dataSource={this.dataSource} gridSettings={this.gridSettings} cellSelected={this.onCellSelected}></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));