Drill through grid cell edit type in React Pivotview component

30 Jan 20236 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.

• NumericTextBox control for integer, double, and decimal data types.
• TextBox control for string data type.
• DropDownList control to show all unique values related to that field.
• CheckBox control for boolean data type.
• DatePicker control for date data type.
• DateTimePicker control for date time data type.

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

index.jsx

import { DrillThrough, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
function App() {
    let 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' }]
    };
    let pivotObj;
    function 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';
            }
        }
    }
    return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} allowDrillThrough={true} editSettings={{ allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }} drillThrough={drillThrough.bind(this)}><Inject services={[DrillThrough]}/> </PivotViewComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

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';

function App() {

  let 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' }]
  }
  let pivotObj: PivotViewComponent;
  function 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';
      }
    }
  }
  
  return (<PivotViewComponent  ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} allowDrillThrough={true}editSettings={{ allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal'}} drillThrough={drillThrough.bind(this)} ><Inject services={[DrillThrough]}/> </PivotViewComponent>);
};

export default App;
ReactDOM.render(<App />, document.getElementById('sample'));