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
