Search results

Drill Operation

Expand All

Pivot Grid allows you to either expand or collapse all headers that are displayed in rows and columns using expandAll property. To display Pivot Grid with all headers at collapsed state, set the property expandAll to false.

By default, all headers in rows and columns are in expanded state.

Source
Preview
index.tsx
import { IDataOptions, IDataSet, 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 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' dataSource={this.dataSource}></PivotViewComponent>
  }
};

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

Drill Up/Down

Also, you can expand/collapse specific header(s) in each fields under row and column using the drilledMembers property through code behind. The settings required to expand/collapse specific header(s) during initial rendering are:

  • name: It allows to set the field name, whose members needs to be drilled.
  • items: It allows to set the members which needs to be drilled.

The drilledMembers option always work in vice-versa manner with respect to the property expandAll in Pivot Grid. For example, if expandAll is set to true, then the drilledMembers will be set in collapsed state.

Source
Preview
index.tsx
import { IDataOptions, IDataSet, 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 dataSource: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    data: pivotData as IDataSet[],
    expandAll: false,
    drilledMembers: [{ name: 'Country', items: ['France'] }],
    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}></PivotViewComponent>
  }
};

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