Refresh offline Data

[Verum Genus]

I have a Grid, using Offline mode. However I would like to refresh the data (without a full page reload), every 10minutes. How do I do this please.

<template>
    <h2>Products</h2>


    <div id="app">
        <ejs-grid id="products_grid"  ref='grid' :dataSource='data' :allowPaging="true"   >
            <e-columns>
                <e-column field='id' headerText='ID' textAlign='Right'  width=75></e-column>
                <e-column field='title' headerText='Title' width=120></e-column>
                <e-column field='price' headerText='Price' width=150></e-column>
            </e-columns>
        </ejs-grid>
  </div>
</template>


<script>
    import { Page,    } from "@syncfusion/ej2-vue-grids";   //CommandColumn
    import { DataManager, WebApiAdaptor  } from "@syncfusion/ej2-data";


    class cleanUpGrid extends WebApiAdaptor {
        processResponse() {
        let original = super.processResponse.apply(this, arguments);
                return original.products;
        }
    }


    export default({
        name: 'app',
        data() {
            return {
                data: new DataManager({
                url: 'https://dummyjson.com/products/',
                adaptor: new cleanUpGrid(),
                crossDomain: true,
                offline: true,
                onSuccess: console.log("Done")
                }),
            };
        },


       provide: {
            grid: [Page]
        }
    });


</script>


<style>
    @import "@syncfusion/ej2-material-theme/styles/material.css";
    @import "@syncfusion/ej2-buttons/styles/material.css";
    @import "@syncfusion/ej2-popups/styles/material.css";
    @import "@syncfusion/ej2-navigations/styles/material.css";
</style>



[Verum Genus]

By the way, these are the sort of things I have tried, I can get a grid refresh, but not a re-retrieval of the api data:

mounted() {
    setInterval(() => {
      // Refresh the grid data every 10 seconds
      this.data.refresh();
    }, 10000);
  }

And this

mounted() {
    setInterval(() => {
      // Execute a new query to refresh the grid data every 10 seconds
      this.data.executeQuery(newQuery());
    }, 10000);
  }

And this:

mounted() {
    setInterval(() => {
      constquery = newDataManager().executeQuery();
      constnewData = newDataManager({
        url:"https://dummyjson.com/products/",
        adaptor:newcleanUpGrid(),
        crossDomain:true,
        offline:true,
        query:query,
        onSuccess:console.log("Here")
      });

      newData.executeQuery().then((e) => {
        this.$refs.grid.dataSource = e.result;
      });
    }, 10000);
  }

And this:

methods: {
    refreshData() {
      this.data.dataSource.offline = false;
      this.data.executeQuery(newQuery()).then(() => {
        this.data.dataSource.offline = true;
        setTimeout(this.refreshData, 10000);
      });
    }
  },
  mounted() {
    this.refreshData();
  },

And this:

  setup() {
    let intervalId = null;
    onMounted(() => {
      intervalId = setInterval(() => {
        const grid = this.$refs.grid.widget;
        grid.showSpinner();
        grid.refresh();
      }, 10000);
    });
    watch(
      () => this.data,
      () => {
        const grid = this.$refs.grid.widget;
        grid.hideSpinner();
      }
    );
  }

I am out of ideas and hoping you can help please

[Srinivas SF4141]

Hi Verum,

Greetings from Syncfusion Support,

Based on your query, it seems that you are looking to refresh data every 10 minutes in offline mode without fully reloading the page. To achieve this, you can use the freezeRefresh method of the Grid's instance and bind it to the setInterval method in the mounted event of your Vue component.

We have provided a code snippet and a sample for your reference that demonstrates how to achieve this functionality.

mounted() {

    setInterval(() => {

      var gridObj = this.$refs.grid1.$el.ej2_instances[0];

      gridObj.freezeRefresh();

    }, 6000);

  }

Sample : https://codesandbox.io/s/syncfusion-templates-this-data-vue3-forked-pb0mk2

Please get back to us if you need further assistance.

Regards,

Srinivas Raju.

[Oleksandr Pyschurnikov]

Hi. I have 6 years experiences in vue.js, nuxt.js.

I can help you.

I hope to discuss on skype or email.

please send a message via skype.

My skype id : live:.cid.ea76050ec666dff2

my email : [e-mail]

Looking forward to hearing from you.

Best Regards

[Verum Genus]

HI Srinivas,

got it working.. thanks for that, it pointed me in the right direction..

I used the below instead of the freezeRefresh

this.$refs.grid.$el.ej2_instances[0] = "{dataSource:" + data + "}";

thanks gain for your help

[Suganya Gopinath]

Hi Verum Genus, 

We are glad to know that the issue resolved. 

We are marking this ticket as solved.