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

22 Jan 20266 minutes to read

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>