Show field list when pivot table empty in Vue Pivotview component

19 Apr 20233 minutes to read

When there are no fields in a pivot table’s row, column, value, and filter axes, a field list can still be displayed. To do so, use the dataBound event and call the onShowFieldList method as shown below.

app.vue

<template>
    <div id="app">
        <ejs-pivotview :dataSourceSettings="dataSourceSettings" :height="height" :showFieldList="showFieldList" :dataBound="ondataBound"> </ejs-pivotview>
    </div>
</template>

<script>
import Vue from "vue";
import { PivotViewPlugin, FieldList } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';

Vue.use(PivotViewPlugin);

export default {
  data () {
    return {
      dataSourceSettings: {
        dataSource: pivotData,
        expandAll: false,
        allowLabelFilter: true,
        allowValueFilter: true,
        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,
      showFieldList: true
    }
  },
  methods: {
    ondataBound: function() {
     let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
     pivotGridObj.pivotFieldListModule.dialogRenderer.fieldListDialog.target = document.body;
     if (pivotGridObj && pivotGridObj.dataSourceSettings.values.length === 0) {
        (pivotGridObj.pivotFieldListModule.dialogRenderer as any).onShowFieldList();
     }
    }
  },
  provide: {
        pivotview: [FieldList]
    }
}
</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>