Showing changing realtime data

[Hani Yasin]

Hi

in your page https://www.syncfusion.com/vue-ui-components/vue-grid 

i saw that the grid there is dynamically changing the data , how can i accomplish this 

i am not using the data manager , the local data is being updated/pushed to vuex store

Best Regards

Hani

[Hani Yasin]

any update?

[Manivel Sellamuthu]

Hi Hani , 

 

Thanks for contacting Syncfusion support. 

 

You can externally binding Grid component dataSource without DataManager by using custom data binding concept. Please find the demo and documentation for your reference. 

 

Demo : https://ej2.syncfusion.com/vue/demos/#/material/grid/custom-binding.html 

Documentation : https://ej2.syncfusion.com/vue/documentation/grid/data-binding/?no-cache=1#custom-binding 

 

 

Regards, 

Manivel 

[Hani Yasin]

Hi 

i do not want to do external binding, i want to detect datasource values changes and reflect that on the grid without re-rendering if possible

[Seeni Sakthi Kumar Seeni Raj]

Hi Hani, 

We can achieve your requirement using state property in Vue.  

To change the data to the Grid dynamically, using the vue state and dataSource onProperty change. Refer to the following code example. 

[App.Vue] 

<template> 

  <div id="app"> 

    <ejs-button iconCss="e-icons e-play-icon" v-on:click.native="btnClick">Data Update</ejs-button> 

    <ejs-grid :dataSource="this.state.gridOrderData"> 

      <e-columns> 

           .     .     .      .   

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids"; 

import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons"; 

import { data } from "./datasource"; 

 

Vue.use(GridPlugin); 

Vue.use(ButtonPlugin); 

 

export default { 

  data() { 

    return {  

      state: { 

        gridOrderData: data 

      } 

    }; 

  }, 

  provide: { 

    grid: [Page] 

  }, 

  methods: { 

    btnClick(args) { 

     // We can update Grid dataSource without Grid re-rendering using state property  

      this.state.gridOrderData = [ 

        { 

          OrderID: 12121, 

               . . . 

                   . . .  

        }, 

         .. . .  

                  . . . 

      ]; 

    } 

  } 

}; 

 

</script> 

 

Regards,  

Seeni Sakthi Kumar S