Vue TreeGrid spinner issues

[Liraz]

Hi,

I am using the TreeGrid component and binding the data from the vuex store - means it acts like local dataSource.
In the vuex store I have the data, which is empty, and this data is fetched from the server when loading the application. I also have isLoading variable, to indicate the loading data state.
I am calling the TreeGrid showSpinner() and hideSpinner() according to the value of the isLoading variable in the store.

I have multiple issues:

1. When the TreeGrid component is rendered and also the data is fetched from the server - there are 2 spinners shown in the TreeGrid, the first comes from the “internal behavior” of the TreeGrid, and the second comes when calling to the showSpinner().
2. When the TreeGrid component is rendered after the data is fetched and stored in the store – unnecessary spinner is shown (comes from the “internal behavior” of the TreeGrid).

Please advise.

Thanks,

store.js:

import { createStore } from 'vuex'

const store = createStore({
  state: {
    data: [],
    isLoading: false
  },
  getters: {
    data: state => state.data,
    isLoading: state => state.isLoading
  },
  actions: {
    loadData({ commit }) {
      commit('setisLoading', true)
      fetch(url, requestObject).then(data => {
        commit('setData', data)
        commit('setisLoading', false)
      })
    },
  },
  mutations: {
    setData(state, data) {
      state.data = data
    },
    setisLoading(state, isLoading) {
      state.isLoading = isLoading
    },
  },
  strict: true
})

export default store

MyTreeGrid.vue:

<template>
<ejs-treegrid
  ref="treegrid"
  :dataSource="data"
  :columns='columns'
  height='100%'
  treeColumnIndex='1'
  idMapping="id"
  parentIdMapping="parentId"
  hasChildMapping="hasChildren">
</ejs-treegrid>
</template>

<script>

import {mapActions, mapGetters} from "vuex";

export default {
  data() {
    let columns =  [
      {field: 'name', headerText: 'Name', textAlign: 'Left', width: 180 },
      {field: 'owner', headerText: 'Owner', textAlign: 'Left', width: 90, },
      {field: 'creation_time', headerText: 'Creation Date', textAlign: 'Right', width: 90, type: "Date", format: 'dd/MM/yyyy hh:mm a' },
    ]
    return {
      columns,
    }
  },
  computed: {
    ...mapGetters( [
      "data",
      "isLoading"
    ]),
  },
  watch: {
    isLoading(value) {
      if (value) {
        this.$refs.treegrid.showSpinner();
      } else {
        this.$refs.treegrid.hideSpinner();
      }
    }
  },
}
</script>

The 2 shown spinners in the TreeGrid:

[Farveen Sulthana Thameeztheen Basha]

Hi Liraz, 

We are working on your reported problem with high Priority and provide you further details by on or before 20^th January 2022. 

Regards, 

Farveen sulthana T 

[Farveen Sulthana Thameeztheen Basha]

Hi Liraz, 

Sorry for inconvenience caused. 

We are working on your query with high Priority and update you further details by tomorrow(21^st January 2021). Until then we appreciate your patience. 

Regards, 

Farveen sulthana T 

[Farveen Sulthana Thameeztheen Basha]

Hi Liraz,  

We appreciate your patience. 

We are able to replicate the problem when we manually render Spinner in TreeGrid component. Both Spinners has been displayed. To overcome  this, you can use custom templates on the Spinner instead of the default Spinner by specifying the template in the setSpinner method. 

Refer to the documentation link:- 

https://ej2.syncfusion.com/vue/documentation/spinner/template/ 

Also you can hide default Spinner of the TreeGrid by overriding the below CSS:- 

Refer to the code below:- 

<style> 

      .e-treegrid .e-spinner-pane {  

             display: none;  

      } 

</style> 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Liraz]

Hi,

Thanks for your help. What I will do is to hide the default spinner of the TreeGrid, and add my own customized spinner.

For that purpose, I am using your Spinner component, and want to append it to the TreeGrid’s header. I am doing the following:

<template>
<ejs-treegrid ref=”treegrid” :dataSource="data" :columns=”columns” :created=”onCreated”></ejs-treegrid>
</template>

<script>
import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-vue-popups';
import { data, columns } from ‘./source.js’

export default {
data() {
return {
    data: data,
    columns: columns,
};
},
methods: {
  createSpinner() {
      createSpinner({
        target: this.$refs.treegrid.$el.getElementsByClassName("e-gridheader")[0]
      })       
  },
showSpinner() {
  showSpinner(this.$refs.treegrid.$el.getElementsByClassName("e-gridheader")[0])
},
hideSpinner() {
  hideSpinner(this.$refs.treegrid.$el.getElementsByClassName("e-gridheader")[0])
},
onCreated() {
  this.createSpinner()
},
},
};
</script>

Now, I need to show / hide the customized spinner by using the TreeGrid events. Which events should I use?

Thanks,

[Farveen Sulthana Thameeztheen Basha]

Hi Liraz, 

Thanks for your update. 

Query#:- I need to show / hide the customized spinner by using the TreeGrid events. Which events should I use? 

You can use created event for showing the customized spinner and use dataBound or beforeDataBound event to hide the Spinner. Refer to the API links below:- 

https://ej2.syncfusion.com/vue/documentation/api/treegrid/#created 

https://ej2.syncfusion.com/vue/documentation/api/treegrid/#databound 

https://ej2.syncfusion.com/vue/documentation/api/treegrid/#beforedatabound 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Liraz]

Thank you for your help.

[Farveen Sulthana Thameeztheen Basha]

Hi Liraz, 

Thanks for your update. Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T