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

Showing changing realtime data


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

4 Replies

HY Hani Yasin September 2, 2019 10:18 PM

any update?

MS Manivel Sellamuthu Syncfusion Team September 3, 2019 08:46 AM

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. 

HY Hani Yasin September 3, 2019 10:57 PM

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

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 5, 2019 08:29 AM

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. 

  <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"> 
           .     .     .      .   
import Vue from "vue"; 
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids"; 
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons"; 
import { data } from "./datasource"; 
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, 
               . . . 
                   . . .  
         .. . .  
                  . . . 
Seeni Sakthi Kumar S 

Live Chat Icon For mobile
Up arrow icon