Configure data grid options in editing mode in the Vue Pivot Table

The Vue Pivot Table component provides the ability to configure various data grid options when working with drill-through functionality in editing mode. When users double-click on value cells (cells containing aggregated data), the component displays the underlying raw data in a drill-through grid popup. The beginDrillThrough event allows users to access and configure grid features such as sorting, grouping, and filtering before displaying the drill-through grid popup.

Implementation

The beginDrillThrough event occurs when users double-click on any value cell in the pivot table. This event provides access to the grid instance and its configuration options before displaying the drill-through popup, enabling users to customize the grid behavior according to their requirements.

Grid features are segregated into individual feature-wise modules. For example, to use the sorting feature, the Sort module must be injected using the Grid.Inject(Sort) method.

<template>
  <div id="app">
    <ejs-pivotview :dataSourceSettings="dataSourceSettings" :height="height" :editSettings="editSettings"
      :beginDrillThrough="beginDrillThrough"> </ejs-pivotview>
  </div>
</template>
<script setup>
import { PivotViewComponent as EjsPivotview } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';
import { Grid, Sort, Filter, Group, Inject } from '@syncfusion/ej2-grids';

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

const beginDrillThrough = (args) => {
  if (args.gridObj) {
    Grid.Inject(Sort, Filter, Group);
    let gridObj = args.gridObj;
    gridObj.allowGrouping = true;
    gridObj.allowSorting = true;
    gridObj.allowFiltering = true;
    gridObj.filterSettings = { type: 'CheckBox' };
  }
};

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>
<template>
  <div id="app">
    <ejs-pivotview :dataSourceSettings="dataSourceSettings" :height="height" :editSettings="editSettings"
      :beginDrillThrough="beginDrillThrough"> </ejs-pivotview>
  </div>
</template>
<script>
import { PivotViewComponent } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';
import { Grid, Sort, Filter, Group } from '@syncfusion/ej2-grids';

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' }
    }
  },
  methods: {
    beginDrillThrough: function (args) {
      if (args.gridObj) {
        Grid.Inject(Sort, Filter, Group);
        let gridObj = args.gridObj;
        gridObj.allowGrouping = true;
        gridObj.allowSorting = true;
        gridObj.allowFiltering = true;
        gridObj.filterSettings = { type: 'CheckBox' };
      }
    },
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>