Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
146352 | Aug 1,2019 07:30 AM UTC | Aug 9,2019 09:53 AM UTC | Vue | 9 |
![]() |
Tags: Data Grid |
In a Vue.js application I have a Syncfusion Data Grid which is bound to a local array of items. The array itself is static, but the items in the array have their values updated by the application.
The data array and the items it contains are reactive (If I bind a simple HTML table to the data the cells are re-rendered when the data changes)
However th Syncfusion grid does not react to the data changes. Is there a way to make the grid react when bound row data changes? To be clear the dataSource does not change, but the contents do.
Thanks
[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-column field="OrderID" headerText="Order ID" width="120" textAlign="Right"></e-column>
<e-column
field="OrderDate"
headerText="Order Date"
width="130"
format="yMd"
textAlign="Right"
></e-column>
<e-column field="Freight" headerText="Freight" width="120" format="C2" textAlign="Right"></e-column>
<e-column
field="ShippedDate"
headerText="Shipped Date"
width="130"
format="yMd"
textAlign="Right"
></e-column>
<e-column field="ShipCountry" headerText="Ship Country" width="150"></e-column>
</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) {
this.state.gridOrderData = [{
OrderID: 12121,
CustomerID: "VINET",
OrderDate: "1996-07-04T00:00:00.000Z",
ShippedDate: "1996-07-16T00:00:00.000Z",
Freight: 32.38,
ShipName: "Vins et alcools Chevalier",
ShipAddress: "59 rue de l'Abbaye",
ShipCity: "Reims",
ShipRegion: null,
ShipCountry: "France"
},
{
OrderID: 233434,
CustomerID: "dfdfdf",
OrderDate: "1996-07-05T00:00:00.000Z",
ShippedDate: "1996-07-10T00:00:00.000Z",
Freight: 11.61,
ShipName: "Toms Spezialitäten",
ShipAddress: "Luisenstr. 48",
ShipCity: "Münster",
ShipRegion: null,
ShipCountry: "Germany"
},
{
OrderID: 3434545,
CustomerID: "dfdfdf",
OrderDate: "1996-07-08T00:00:00.000Z",
ShippedDate: "1996-07-12T00:00:00.000Z",
Freight: 65.83,
ShipName: "Hanari Carnes",
ShipAddress: "Rua do Paço, 67",
ShipCity: "Rio de Janeiro",
ShipRegion: "RJ",
ShipCountry: "Brazil"
},
{
OrderID: 454534,
CustomerID: "dfdfdf",
OrderDate: "1996-07-08T00:00:00.000Z",
ShippedDate: "1996-07-15T00:00:00.000Z",
Freight: 41.34,
ShipName: "Victuailles en stock",
ShipAddress: "2, rue du Commerce",
ShipCity: "Lyon",
ShipRegion: null,
ShipCountry: "France"
},
{
OrderID: 10252,
CustomerID: "SUPRD",
OrderDate: "1996-07-09T00:00:00.000Z",
ShippedDate: "1996-07-11T00:00:00.000Z",
Freight: 51.3,
ShipName: "Suprêmes délices",
ShipAddress: "Boulevard Tirou, 255",
ShipCity: "Charleroi",
ShipRegion: null,
ShipCountry: "Belgium"
},
{
OrderID: 10253,
CustomerID: "HANAR",
OrderDate: "1996-07-10T00:00:00.000Z",
ShippedDate: "1996-07-16T00:00:00.000Z",
Freight: 58.17,
ShipName: "Hanari Carnes",
ShipAddress: "Rua do Paço, 67",
ShipCity: "Rio de Janeiro",
ShipRegion: "RJ",
ShipCountry: "Brazil"
},
{
OrderID: 10254,
CustomerID: "CHOPS",
OrderDate: "1996-07-11T00:00:00.000Z",
ShippedDate: "1996-07-23T00:00:00.000Z",
Freight: 22.98,
ShipName: "Chop-suey Chinese",
ShipAddress: "Hauptstr. 31",
ShipCity: "Bern",
ShipRegion: null,
ShipCountry: "Switzerland"
},
{
OrderID: 10255,
CustomerID: "RICSU",
OrderDate: "1996-07-12T00:00:00.000Z",
ShippedDate: "1996-07-15T00:00:00.000Z",
Freight: 148.33,
ShipName: "Richter Supermarkt",
ShipAddress: "Starenweg 5",
ShipCity: "Genève",
ShipRegion: null,
ShipCountry: "Switzerland"
},
{
OrderID: 10256,
CustomerID: "WELLI",
OrderDate: "1996-07-15T00:00:00.000Z",
ShippedDate: "1996-07-17T00:00:00.000Z",
Freight: 13.97,
ShipName: "Wellington Importadora",
ShipAddress: "Rua do Mercado, 12",
ShipCity: "Resende",
ShipRegion: "SP",
ShipCountry: "Brazil"
},
{
OrderID: 10257,
CustomerID: "HILAA",
OrderDate: "1996-07-16T00:00:00.000Z",
ShippedDate: "1996-07-22T00:00:00.000Z",
Freight: 81.91,
ShipName: "HILARION-Abastos",
ShipAddress: "Carrera 22 con Ave. Carlos Soublette #8-35",
ShipCity: "San Cristóbal",
ShipRegion: "Táchira",
ShipCountry: "Venezuela"
},
{
OrderID: 10258,
CustomerID: "ERNSH",
OrderDate: "1996-07-17T00:00:00.000Z",
ShippedDate: "1996-07-23T00:00:00.000Z",
Freight: 140.51,
ShipName: "Ernst Handel",
ShipAddress: "Kirchgasse 6",
ShipCity: "Graz",
ShipRegion: null,
ShipCountry: "Austria"
}];
}
}
};
</script>
|
[App.Vue]
methods: {
btnClick(args) {
this.state.gridOrderData[0].ShipCountry = 'UK';
this.state.gridOrderData = [...this.state.gridOrderData];
}
}
|
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.
This page will automatically be redirected to the sign-in page in 10 seconds.