Search results

Drill-through grid's cell edit type in React Pivot Table component

24 May 2022 / 2 minutes to read

Using the drillThrough event in the pivot table, you can define the edit type of a particular column in the grid present inside the drill-through dialog. To do so, check the column name in the drillThrough event and then specify the edit type of that column using the gridColumns.editType event argument.

The gridColumns.editType property must be set based on the column’s data type. For example, the string data type will not be applicable for the numeric text box edit type.

In the below example, the data type of the Country column is set to DropDownList.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
import { DrillThrough, 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' }]
        };
    }
    drillThrough(args) {
        for (var i = 0; i < args.gridColumns.length; i++) {
            if (args.gridColumns[i].field === 'Country') {
                args.gridColumns[i].editType = 'dropdownedit';
                //args.gridColumns[i].editType = 'numericedit';
                //args.gridColumns[i].editType = 'textedit';
                //args.gridColumns[i].editType = 'booleanedit';
                //args.gridColumns[i].editType = 'datepickeredit';
                //args.gridColumns[i].editType = 'datetimepickeredit';
            }
        }
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotObj = d} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} allowDrillThrough={true} editSettings={{ allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }} drillThrough={this.drillThrough.bind(this)}><Inject services={[DrillThrough]}/> </PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));
Copied to clipboard
import { DrillThrough, 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' }]
  }
  public pivotObj: PivotViewComponent;
  drillThrough(args: BeginDrillThroughEventArgs): void {
for (var i = 0; i < args.gridColumns.length; i++) {
  if (args.gridColumns[i].field === 'Country') {
    args.gridColumns[i].editType = 'dropdownedit';
    //args.gridColumns[i].editType = 'numericedit';
    //args.gridColumns[i].editType = 'textedit';
    //args.gridColumns[i].editType = 'booleanedit';
    //args.gridColumns[i].editType = 'datepickeredit';
    //args.gridColumns[i].editType = 'datetimepickeredit';
  }
}
  }
  render() {
return <PivotViewComponent  ref={d => this.pivotObj = d!} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} allowDrillThrough={true}editSettings={{ allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal'}} drillThrough={this.drillThrough.bind(this)} ><Inject services={[DrillThrough]}/> </PivotViewComponent>
  }
};

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