Drill-through grid cell edit type in the Vue Pivot Table component

The drill-through feature in the Pivot Table allows users to view the raw data behind aggregated values by opening a detailed grid dialog. When this dialog appears, you can customize the edit behavior of specific columns to provide appropriate input controls based on their data types.

Using the drillThrough event in the Pivot Table, you can define the edit type for any column in the drill-through grid. This is accomplished by checking the column name within the event handler and setting the appropriate edit type using the gridColumns.editType event argument.

Edit type options

The following edit types are available for different data types:

• NumericTextBox - For integer, double, and decimal data types.
• TextBox - For string data type.
• DropDownList - To display all unique values for that field.
• CheckBox - For boolean data type.
• DatePicker - For date data type.
• DateTimePicker - For date time data type.

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

Implementation example

The following example demonstrates how to set the Country column to use a DropDownList edit type in the drill-through grid:

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-pivotview :dataSourceSettings="dataSourceSettings" :height="height" :editSettings="editSettings" :drillThrough="drillThrough"> </ejs-pivotview>
    </div>
</template>

<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, DrillThrough } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';

    const  dataSourceSettings= {
        dataSource: pivotData,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
      }
      const  height= 350
      const editSettings= { allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Normal' }
    
  provide('pivotview',  [DrillThrough]);

  const  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';
            }
        }
    };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-pivotview :dataSourceSettings="dataSourceSettings" :height="height" :editSettings="editSettings" :drillThrough="drillThrough">
    </ejs-pivotview>
  </div>
</template>
<script>
import { PivotViewComponent, DrillThrough } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';

export default {
  name: "App",
  components: {
    "ejs-pivotview": PivotViewComponent
  },
  data() {
    return {
      dataSourceSettings: {
        dataSource: pivotData,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
      },
      height: 350,
      editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Normal' }
    }
  },
  provide: {
    pivotview: [DrillThrough]
  },
  methods: {
    drillThrough: function (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';
        }
      }
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>