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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Showing changing realtime data

Thread ID:

Created:

Updated:

Platform:

Replies:

147054 Aug 30,2019 08:21 AM UTC Sep 5,2019 01:29 PM UTC Vue 4
loading
Tags: Data Grid
Hani Yasin
Asked On August 30, 2019 08:21 AM UTC

Hi

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
Replied On September 3, 2019 03:18 AM UTC

any update?

Manivel Sellamuthu [Syncfusion]
Replied On September 3, 2019 01:46 PM UTC

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. 
 
 
 
Regards, 
Manivel 


Hani Yasin
Replied On September 4, 2019 03:57 AM UTC

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 [Syncfusion]
Replied On September 5, 2019 01:29 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon