We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Refresh offline Data

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.


    <div id="app">
        <ejs-grid id="products_grid" ref='grid' :dataSource='data' :allowPaging="true" >
                <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>

    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]


    @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";

5 Replies 1 reply marked as answer

VG Verum Genus May 9, 2023 09:56 PM UTC

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
    }, 10000);

And this

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

And this:

mounted() {
setInterval(() => {
constquery = newDataManager().executeQuery();
constnewData = newDataManager({

      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() {

And this:

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

I am out of ideas and hoping you can help please

SS Srinivas SF4141 May 11, 2023 06:03 AM UTC

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];


    }, 6000);


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

Please get back to us if you need further assistance.


Srinivas Raju.

OP Oleksandr Pyschurnikov May 11, 2023 10:15 PM UTC

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 : borysenkomakim@gmail.com

Looking forward to hearing from you.

Best Regards

VG Verum Genus May 12, 2023 02:53 AM UTC

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

Marked as answer

SG Suganya Gopinath Syncfusion Team May 16, 2023 05:43 AM UTC

Hi Verum Genus, 

We are glad to know that the issue resolved. 

We are marking this ticket as solved. 

Live Chat Icon For mobile
Up arrow icon