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

dataSourceChanged CRUD event not being triggered


I've been following along with your video tutorial (2min 40 mark about Custom Services)
Handling CRUD Operations

I've created a test REACT project on my MAC (running node.js).  In doing so, I've essentially copied everything in the video regarding customer service (no DataManager).  Whenever I attempt a CRUD operation and check console output, I don't see any events being fired.  For the example code below, I've essentially copied the code you used in the video, except I didnt use the typescript notation (please note I also attempted this with typescript but I still had same behavior.

>> When page loads, the getAllData call successfully returns and renders the data
>> when i check chrome debugger, I can see that the gridComponent has the "dataSourceChanged" bound to dataSourceChanged function
>> when I click Add and Save or Edit/Update, I dont see the "state" in the console.log output as shown in the youTube video

import React, { useState, useEffect } from "react";
import { getProductFeatureData } from "./Helper";
import {
} from "@syncfusion/ej2-react-grids";
import {
} from "./Crud.js";

function cleanGridData(data) {
if (data != null) {
for (var index = 0; index < data.length; index++) {
if (data[index].type == "link") {
data[index].content = data[index].content[0];
if (data[index].type == "logs" || data[index].type == "commands") {
data[index].content = JSON.stringify(data[index].content);
if (Array.isArray(data[index].category)) {
data[index].category = data[index].category.join(",");
return data;

function DataGrid() {
const cellSettings = { wrapMode: "Content" };
const editOptions = {
allowEditing: true,
allowAdding: true,
allowDeleting: true
//mode: "Dialog"
const toolbarOptions = ["Add", "Edit", "Delete", "Update", "Cancel"];

const [data, setData] = useState();
useEffect(() => {
getAllData().then(data => {
}, []);

function dataSourceChanged(state) {
if (state.action === "add") {

return (
<div className="section panel panel--loose panel--bordered">
<div style={{ margin: "1%", marginTop: "2%" }}>
<ColumnDirective field="_id" visible={false} />
<ColumnDirective field="product" visible={true} width="50" />
<ColumnDirective field="feature" visible={true} width="80" />
<ColumnDirective field="title" headerText="Title" width="150" />
<ColumnDirective field="content" headerText="Content" width="200" />
<Inject services={[Edit, Toolbar]} />
export default DataGrid;

The json returned from "getAllData" has the following structure

"product": "PROD1",
"feature": "PROD1-FEATURE1",
"category": ["doc", "training", "tshoot"],
"audience": "internal",
"title": "Troubleshooting PROD1-FEATURE1",
"description": "ARTICLE DESCRIPTION",
"content_type": "link",
"content": [
"display_name": "PROD1-DISPLAY-NAME"
"product": "PROD2",
"feature": "PROD2-FEATURE1",
"category": ["doc", "training", "tshoot"],
"audience": "internal",
"title": "Troubleshooting PROD2-FEATURE1",
"description": "ARTICLE DESCRIPTION",
"content_type": "link",
"content": [
"display_name": "PROD2-DISPLAY-NAME"

9 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 23, 2019 07:03 AM

Hi Jorge, 

Greetings from Syncfusion support. 

Based on your query, We have prepared a sample but we are unable to reproduce the issue at our end. Please refer the below sample link and screenshot for more information. 


You can get the required arguments in dataSourceChange event. Please refer the watch window in  below screenshot. And here we have called the endEdit() in dataSourceChnaged event. Once you call the endEdit then it trigger dataSateChange event here we called the refreshGrid() method it helps to prevent from spinning when adding a new record. 


If you still had the issue,  Please share the below details that will be helpful for us to provide better solution  

  1. Please try to reproduce the issue with our above attached sample.

Seeni Sakthi Kumar S 

SM SOWMYA MUNAGANURI June 10, 2020 11:23 AM

Hi Jorge,

I have seen your post. I got same issue while performing CRUD operations. How did you get through this problem using Syncfusion ?

Your response would be helpful. I am stuck with this issue now. 

Sowmya Munaganuri

SK Sujith Kumar Rajkumar Syncfusion Team June 11, 2020 05:17 AM

Hi Sowmya, 

We have already posted the response for this query in the following forum - https://www.syncfusion.com/forums/155075/datasourcechanged-crud-event-is-not-triggered. So please check it. 

Let us know if you have any concerns. 

Sujith R 

MH Mohammad Hoque June 23, 2020 11:46 AM

I am having the same issue with my DataGrid. My initial get request binding the grid. But when I add data or edit data like on the grid 

            dataStateChange = {dataStateChange}

my event doesn't fire. 

function dataStateChange(argsany){

function dataSourceChanged(stateany) {
  if (state.action === "add") {

I look at your supplied code and it works. But when I get the data from my Api, it doesn't fire.

I am using React functional components with TypeScript. 

TS Thiyagu Subramani Syncfusion Team June 24, 2020 06:48 AM

Hi Mohammad, 

Thanks for contacting Syncfusion support. 

Based on your reported information we suspect that “DataSourceChanged CRUD(Add, Edit, Delete )event not being triggered” and its worked when you using our supplied code,  but it is does not triggered when you get the data from your own Api.  

If it is correct please confirm us and share below details then only we provide appropriate solution as soon as possible. 

1. Share your code block for getting data from Api. 

2. Share complete grid rendering code. 

3. Share video demonstration of your issue. 

4. Please share the issue reproducing sample. 

Please get back to us, if you need any further assistance. 

Thiyagu S. 

AS Ashritha August 5, 2020 10:18 PM


I am also facing the issue with dataSourceChanged in react project. On performing crud operations, dataSourceChanged event is not triggering. Please find the below screenshots for the reference.

Attachment: dataSourceChangedIssue_cd8a86fb.zip

TS Thiyagu Subramani Syncfusion Team August 6, 2020 11:24 PM

Hi Ashritha,  

Greetings from Syncfusion support.  
We checked the reported problem based on your information but we did not reproduce it from our end as the dataSourceChanged event arguments were properly received. Please check the below image and updated sample for your reference,  


Note: Run the server using ‘node server.js’ command in the root folder of the above application and then start the react app  

If you still face the issue, please share the below details that will be helpful for us to provide better solution.  

1.  If possible, please reproduce the issue with our above attached sample. 

2.  Video demonstration of your issue.   

Please get back to us, if you need any further assistance. 

Thiyagu S  

FI Filipp September 28, 2020 09:16 AM

Hi, Syncfusion support team. I took an example your code and tried to trigger dataSourceChanged event in the attached video. As you can see, the "state" variable was never logged to the console.

Attachment: 20200928_170742_b819e9d.rar

SM Shalini Maragathavel Syncfusion Team October 1, 2020 08:42 AM

Hi Filipp , 

Sorry for the  inconvenience caused. 
We have validated the query and we are able to reproduce the reported problem in our GitHub sample. We will fix the issue and it will be refreshed in online in any of our upcoming releases.  
For your convenience we created a sample for your requirement. Please find the sample from the below link, 
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 react application can be launched using ‘npm start’ command 

More details can be checked in the below help documentation link, 

If you are performing custom binding in the Grid, please ensure to bind the data as a result(JSON data source) and count(Total data count) object format.  
Shalini M.  

Live Chat Icon For mobile
Up arrow icon