NextJS 13 React DataGrid dataSourceChanged isn't triggered

[Sascha Affolter]

I am new to Syncfusion, so I followed the code on https://github.com/SyncfusionExamples/handling-crud-actions-using-fetch-api-and-react-grid-events/blob/master/after/src/App.tsx.

In NextJS 13 and React, I have the issue that when I change or add a DataGrid row, the event dataSourceChanged isn't triggered. Here's the code:

"use client";

import React, { useState, useEffect } from "react";

import {

  GridComponent,

  ColumnDirective,

  ColumnsDirective,

  Page,

  Inject,

  Edit,

  Toolbar,

} from "@syncfusion/ej2-react-grids";

function getLeistungen() {

  return [

    {

      id: 1,

      Leistungen: "Leistungen 1",

      Stundensatz: 120.0,

      Verechenbar: "true",

      Bemerkungen: "",

    },

    {

      id: 2,

      Leistungen: "Leistungen 2",

      Stundensatz: 160.0,

      Verechenbar: "false",

      Bemerkungen: "Lorem ipsum, dolor sit amet consectetur adipisicing elit.",

    },

    {

      id: 3,

      Leistungen: "Leistungen 3",

      Stundensatz: 150.0,

      Verechenbar: "true",

      Bemerkungen: "",

    },

    {

      id: 4,

      Leistungen: "Leistungen 4",

      Stundensatz: 140.0,

      Verechenbar: "true",

      Bemerkungen: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",

    },

  ];

}

const LeistungenPage = () => {

  const editOptions = {

    allowEditing: true,

    allowAdding: true,

    allowDeleting: true,

  };

  const toolbarOptions = ["Add", "Edit", "Delete", "Update", "Cancel"];

  const [data, setData] = useState();

  useEffect(() => {

    refreshGrid();

  }, []);

  function refreshGrid() {

    setData(getLeistungen());

  }

  function dataSourceChanged(state) {

    console.log(state);

  }

  return (

    <div style={{ margin: "10%", marginTop: "5%" }}>

      <GridComponent

        dataSource={data}

        allowPaging={true}

        pageSettings={{ pageSize: 6 }}

        editSettings={editOptions}

        toolbar={toolbarOptions}

        dataSourceChanged={dataSourceChanged}

      >

        <ColumnsDirective>

          <ColumnDirective

            field="id"

            headerText="Id"

            textAlign="Left"

            width="40"

            isPrimaryKey={true}

          />

          <ColumnDirective

            field="Leistungen"

            headerText="Leistungen"

            textAlign="Right"

            width="200"

          />

          <ColumnDirective

            field="Stundensatz"

            headerText="Stundensatz"

            width="80"

            format="C2"

            textAlign="Right"

          />

          <ColumnDirective

            field="Verechenbar"

            headerText="Verechenbar"

            width="80"

          />

          <ColumnDirective

            field="Bemerkungen"

            headerText="Bemerkungen"

            textAlign="right"

            width="200"

          />

        </ColumnsDirective>

        <Inject services={[Page, Edit, Toolbar]} />

      </GridComponent>

    </div>

  );

};

export default LeistungenPage;

Any Help is appreciated.

[Hemanthkumar S]

Hi Sascha Affolter,

Greetings from Syncfusion support.

Query: In NextJS 13 and React, I have the issue that when I change or add a DataGrid row, the event dataSourceChanged isn't triggered.

Based on your information, it appears you are encountering an issue where the dataSourceChanged event is not being triggered. It's crucial to understand that this event is triggered when adopting the Custom binding approach. Upon reviewing your provided code, we observed that you are setting the Grid's dataSource as an array of objects (getLeistungen) instead of using result and count. To adopt the Custom binding approach successfully, we recommend setting the Grid's dataSource in the form of result (representing the current view data) and count (representing the total record count).

For more information about the Custom binding approach, please refer to the below documentation.

Custom binding: https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding#custom-binding

For more information about the CRUD operations in the Custom binding approach, please refer to the below documentation.

Perform CRUD operations: https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding#perform-crud-operations

Regards,

Hemanth Kumar S

[Sascha Affolter]

I've already tried custom binding through the Fetch-API, but it didn't work either. 

I suspect that not triggering this event is related to NextJS 13, where it simply wasn't integrated properly. In the end, "Mr. ChatGPT" made me a reasonable suggestion to work around the whole thing...

[Hemanthkumar S]

Hi Sascha Affolter,

We are pleased to hear that the issue has been resolved on your end. Feel free to return to us if you require further assistance. We will mark this forum as solved.

Regards,

Hemanth Kumar S