Grid content not rendering with data from Vuex 4 store

[Janno Liivak]

I just upgraded my site to Vue 3 and upgraded all Syncfusion componentse to version 19.4.48. Although I'm using Vuex 4 and see that data is retrieved from backend and stored in state and everything seems to be in order (no errors or warnings in console log), the grid shows only spinner and nothing gets rendered. Could you provide an example how to get data with new Vuex 4 logic (setup and useStore) onto the Grid. Thank you.

[Janno Liivak]

I did some more digging and seems that two properties will break the grid ... allowPaging and enablePersistence. Both break it in a different way.

When allowPaging is set to true then no matter the pageSettings (pageSize) value or load method content (even with default ones) the grid shows spinner and no data is loaded.

When enable enablePersistence is set to true then grid loads no data and many additional columns are shown with titles taken from my data source's JSON structure (which has multiple levels for related records). For example after last defined column there are vehicle.code, vehicle.name, vehicle_number_of_seats etc.

Is it a bug or am I doing something wrong?

Here is my Vue component's code:

<template>
  <div class="view-content">
    <ejs-grid
      :dataSource="odometerTransList"
      ref="odometerGrid"
      height="100%"
      :allowSorting="true"
      :allowFiltering="true"
      :filterSettings="{ type: 'Menu' }"
      :allowResizing="true"
      :editSettings="{ allowEditing: true }"
      :enablePersistence="true"
      :actionBegin="actionBegin"
    >
      <e-columns>
        <e-column
          field="registered_at"
          :headerText="$t('date')"
          width="100"
          :allowEditing="false"
          type="date"
          :format="datetimeFormat"
          editType="datepickeredit"
        >e-column>
        <e-column
          field="vehicle.code"
          :headerText="$t('vehicle')"
          width="120"
          :allowEditing="false"
        >e-column>
        <e-column
          field="driver.name"
          :headerText="$t('driver')"
          width="120"
          :allowEditing="false"
        >e-column>
        <e-column
          field="odometer_value"
          :headerText="$t('odometerValue')"
          width="120"
        >e-column>
        <e-column
          field="trip_table.code"
          :headerText="$t('workOrder')"
          width="120"
          :allowEditing="false"
        >e-column>
        <e-column
          field="trip_trans.code"
          :headerText="$t('trip')"
          width="120"
          :allowEditing="false"
        >e-column>
        <e-column
          field="trans_type"
          :headerText="$t('transType')"
          width="120"
          :allowEditing="false"
          :valueAccessor="transTypeFormatter"
        >e-column>
      e-columns>
    ejs-grid>
  div>
template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';
import {
  GridComponent,
  ColumnsDirective,
  ColumnDirective,
  Edit,
  Filter,
  Page,
  Resize,
  Sort,
} from '@syncfusion/ej2-vue-grids';

export default {
  setup() {
    const store = useStore();
    return {
      store,
      odometerTransList: computed(() => store.state.odometerRegistrations.odometerTrans),
      fetchOdometerRegistrations: () => {
        store.dispatch('odometerRegistrations/FETCH_REQUEST');
      },
      updateOdometerRegistration: (args) => {
        store.dispatch('odometerRegistrations/UPDATE_REQUEST', {
          ...args.rowData, odometer_value: args.data.odometer_value,
        });
      },
    };
  },
  name: 'OdometerList',
  components: {
    'ejs-grid': GridComponent,
    'e-columns': ColumnsDirective,
    'e-column': ColumnDirective,
  },
  created() {
    this.fetchOdometerRegistrations();
    window.addEventListener('resize', this.load);
  },
  unmounted() {
    window.removeEventListener('resize', this.load);
  },
  data() {
    return {
      pageSettings: { pageSize: 5 },
      datetimeFormat: {
        type: 'dateTime',
        format: 'dd.MM.yyyy HH:mm',
      },
    };
  },
  methods: {
    load() {
      let rowHeight = this.$refs.odometerGrid.ej2Instances.getRowHeight(); //height of the each row
      let gridHeight = this.$refs.odometerGrid.$el.clientHeight - 140; //grid height
      let pageResize = gridHeight / rowHeight; //new page size is here
      
      pageResize = pageResize >= 11 ? pageResize : 11;
      this.pageSettings = { pageSize: Math.round(pageResize) - 1 };
    },
    actionBegin(args) {
      if (args.requestType === 'save') {
        this.updateOdometerRegistration(args);
      }
    },
    transTypeFormatter(field, data) {
      return this.$t(data[field]);
    },
  },
  provide: {
    grid: [Page, Sort, Filter, Edit, Resize],
  },
};
script>

<style scoped>
.e-grid {
  width: 100%;
}
style>



[Rajapandi Ravi]

Hi Janno, 

Greetings from Syncfusion support 

Currently, we are working on this query (“Grid content not rendering with data from Vuex”) at our end. We will update the further details on or before Feb 16^th, 2022. 

We appreciate your patience until then. 

Regards, 

Rajapandi R 

[Rajapandi Ravi]

Hi Janno, 

Thanks for your patience 

Based on your query we have prepared a sample of Grid with Vue 3 and bind the complex data from Vuex as per your application structure and tried to reproduce your reported problem, but it was unsuccessful. The Grid with paging and enablePersistence was working fine at our end. Please refer the below code example and sample for more information. 

<template> 

   <ejs-grid  

      :dataSource="data"  

      :allowPaging="true" 

      :allowSorting="true" 

      :allowFiltering="true" 

      :filterSettings="{ type: 'Menu' }" 

      :allowResizing="true" 

      :pageSettings="{ pageSize: 5 }" 

      :editSettings="{ allowEditing: true }" 

      :enablePersistence="true"> 

  <e-columns> 

                <e-column field='EmployeeID' :isPrimaryKey='true' headerText='Employee ID' textAlign='Right' width=120></e-column> 

                <e-column field='Name.FirstName' headerText='First Name' textAlign='Left' width=120></e-column> 

                <e-column field='Name.LastName' headerText='Last Name' textAlign='Left' width=120></e-column> 

                <e-column field='Title' headerText='Title' textAlign='Left' width=150></e-column> 

            </e-columns> 

             </ejs-grid> 

</template> 

<script> 

import { GridComponent, ColumnsDirective, ColumnDirective, Page, Sort, Filter, Edit, Resize } from '@syncfusion/ej2-vue-grids'; 

import { useStore } from "vuex"; 

import { computed } from "vue"; 

export default { 

  setup() { 

    const store = useStore(); 

    return { 

      store, 

      data: computed(() => store.state.data), 

    }; 

  }, 

  name: 'HelloWorld', 

  components: { 

  "ejs-grid": GridComponent, 

  "e-columns": ColumnsDirective, 

  "e-column": ColumnDirective, 

}, 

data: function() { 

    return { 

    }; 

  }, 

  provide: { 

    grid: [Page, Sort, Filter, Edit, Resize], 

  } 

} 

</script> 

<style> 

@import https://cdn.syncfusion.com/ej2/material.css; 

</style> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vuex-25712496.zip 

If you still face the issue, please share any issue reproducible sample, or try to reproduce the issue with our above attached sample. 

Regards, 

Rajapandi R