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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

dataSourceChanged CRUD event not being triggered

Thread ID:





150147 Dec 20,2019 09:22 PM UTC Oct 1,2020 01:42 PM UTC JavaScript - EJ 2 9
Tags: Grid
Jorge Rivera
Asked On December 20, 2019 09:22 PM UTC


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"

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 23, 2019 12:03 PM UTC

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 

Replied On June 10, 2020 04:23 PM UTC

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

Sujith Kumar Rajkumar [Syncfusion]
Replied On June 11, 2020 10:17 AM UTC

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 

Mohammad Hoque
Replied On June 23, 2020 04:46 PM UTC

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. 

Thiyagu Subramani [Syncfusion]
Replied On June 24, 2020 11:48 AM UTC

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. 

Replied On August 6, 2020 03:18 AM UTC


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

Thiyagu Subramani [Syncfusion]
Replied On August 7, 2020 04:24 AM UTC

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  

Replied On September 28, 2020 02:16 PM UTC

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

Shalini Maragathavel [Syncfusion]
Replied On October 1, 2020 01:42 PM UTC

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.  


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