DataStateChange and DataSourceChanged not triggered
3 Replies
Hi Sandra,
Thanks for contacting Syncfusion support.
Based on your shared information, when the custom binding approach is implemented in the Grid the dataStateChange(Grid action ( sorting, paging, filtering etc.))/dataSourceChanged(CRUD action(Add, Edit, Update, Delete)) event will be triggered for the corresponding action along with the query details returned in the event arguments perfectly but we unsuccessful to reproduce your reported issue at our end. The argument is accessed with the name ‘state’ in the documentation and it will return the corresponding action details from the source with which you can handle the action in your server and return back the response to the Grid. This case can be checked in the above shared sample for reference.
So when the CRUD action is performed in the Grid, the action details will be returned in the dataSourceChanged event as shown in the below image,
And in this event you can update the details in your server and on success of this action you need to call the state’s(The dataSourceChanged event argument) endEdit method in order to update the changes in the Grid(This will trigger the dataStateChange event which will fetch the updated data from the server).
Here the “OrderService” mentioned in the specified line is a service file that is written for handling the actions like, CRUD, Sort, Page, etc. in the Grid. So we have prepared a Grid sample with local server(for fetching data) to demonstrate this case for your reference. You can find it below,
Note: Before launching the above application, the express server needs to be started using the ‘node server.js’ command from the application’s root folder and then the Vue application can be launched using ‘npm run dev’ command. These actions need to be performed after installing the node modules.
The dataSourceChanged is a Grid event so you can define it same like the dataStateChange is defined which is demonstrated below for your reference,
|
<template>
<ejs-grid ref="grid" :dataSource="data" :dataSourceChanged="dataSourceChanged" :dataStateChange="dataStateChange"></ejs-grid>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { getOrders, addOrder, updateOrder, deleteOrder } from "./orderService";
Vue.use(GridPlugin);
export default {
name: 'app',
data() {
...
},
methods: {
dataStateChange: function (state) {
...
},
dataSourceChanged: function (state) {
...
}
}
}
</script> |
For using custom binding, you need to bind the response data(Grid data) returned from your API as an object of result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property. On setting the data source in this format, the ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering.., and the ‘dataSourceChanged’ event will be triggered while performing CRUD action in Grid. So using this you can send the queries in your required format to your API, process and return the result and then assign the returned result to the Grid’s dataSource property as an object of result and count properties.
More details on custom binding with online demo sample can be checked in the below links,
Custom binding documentation: https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#custom-binding
Online demo sample: https://ej2.syncfusion.com/vue/demos/#/material/grid/custom-binding.html
Note: The ‘dataStateChange’ event will not be triggered on Grid initial render. So for this case you need to return the data in the above mentioned format on initialization and assign it to the Grid’s dataSource property.
If still facing the issue please share your issue reproducing sample or reproduce the issue above provided sample, Syncfusion package version, and video demonstration of your issue then only we provide the appropriate solution as soon as possible.
Please get back to us if your require any further assistance.
Regards,
Thiyagu S
Hi Sandra,
We had shared you a local Vue sample for your requirement since we have created a local server to fetch and update data for the Grid. We will not be able to demonstrate the CRUD action case with online sample since it is not handled in our hosted data service which is why we shared the local sample. So we have explained how the custom binding works in the previously shared sample and also addressed your queries below,
Query – 1: “I have a problem in the code, the "dataSource.json" file does not seem to be included anywhere in the App.vue, so I can't ahev any data in the grid.”
As mentioned above we have used a local node server for fetching and updating the data in the shared sample, so initially you need to start this server using the following command – “node server.js”. This file is present in the root folder of the sample and in that file we have accessed the dataSource.json file as shown in the below image,
So in the Vue mounted event we have manually invoked the dataStateChange event handler(defined for the Grid’s dataStateChange event) from where the action for retrieving data(written in the OrderService.ts file) is called.
This is demonstrated below,
|
mounted() {
// Used vue mounted hook to send initial request for fetching data from server
let state = { skip: 0, take: 12 };
this.dataStateChange(state);
},
methods: {
dataStateChange: function (state) {
getOrders().then(gridData => {
...
});
},
} |
The getOrders method called above(written in the OrderService file) will make the server request for fetching the data from the hosted service(which in this case is the local node server that is launched initially) and returning it back. So its URL is provided for fetching data as shown in the below code snippet,
|
// get
export function getOrders() {
return fetch(baseUrl + "/orders").then(res => res.json()).then(data => {
// Response data is returned back
return data;
});
} |
The returned data is finally set as the Grid’s dataSource property value as demonstrated below,
|
<ejs-grid :dataSource="data" :dataStateChange="dataStateChange"></ejs-grid>
<script>
...
methods: {
dataStateChange: function (state) {
getOrders().then(gridData => {
this.data = gridData;
});
},
}
</script> |
Query – 2: “Moreover, it seems like all the import needed are not present. I have an error with the ‘dataSourceChanged’ which is not included in the import, you have the import DataStateChangeEventArgs,”
The ‘DataStateChangeEventArgs’ is just the argument type of the dataStateChange event arguments and it can be referenced like below,
|
import { GridPlugin, DataStateChangeEventArgs } from "@syncfusion/ej2-vue-grids";
methods: {
dataStateChange: function (state: DataStateChangeEventArgs) {
getOrders().then(gridData => {
this.data = gridData;
});
},
} |
This is only used for preventing type mismatch issues while accessing the event arguments.
Query – 3: “Moreover, can you please give me a full example of this. I don't understand how I have to do that ? In your zip.file, the "action" attribute is not set in the orderService.ts file, so I don't know/can't see how to do it.”
By “action” details we just meant the corresponding Grid action(Page, Sort, etc.) queries that is returned on performing the corresponding action. And it does not mean an argument with the name of action will be received in the event.
Note: We have used the service - ‘OrderService’ here to handle these actions but you do not have to use the same thing as you can use your own approach and handle these cases.
For your reference, please follow the below steps to launch the previously shared sample for understanding the workflow implemented here,
- Install npm packages.
- Run the following command in the sample root folder – “node server.js”.
- Then, run the sample application using the following command – “npm run dev”.
Let us know if you have any concerns.
Regards,
Sujith R
SIGN IN To post a reply.
