dataSourceChanged CRUD event is not triggered

[SOWMYA MUNAGANURI]

Hello,

I have followed your documentation and video tutorial to fetch Rest API building . The link to video is  https://www.youtube.com/watch?v=lGEPmY0bOws

I did not use DataManager. When ever I perform CRUD operation, I wanted to see event on console. I am attaching example code of mine. I don't see "state" on console. function dataSourceChanged() => having console.log(state). I don't see state and its events on console. Thats basic to perform other operations like "Update" "Delete" and "Add" 

This problem is already in forums.  https://www.syncfusion.com/forums/150147/datasourcechanged-crud-event-not-being-triggered. I tried solution in that link too. It didn't work. 

Hope to find better solution.

Thanks in advance.

=====================================================

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

import {

  GridComponent,

  ColumnDirective,

  ColumnsDirective,

  Page,

  Inject,

  Edit,

  EditSettingsModel,

  Toolbar,

  ToolbarItems,

  dataStateChange,

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

import { getOrders, addOrder, updateOrder, deleteOrder } from './orderService';

import './App.css';

const App: React.FC = () => {

  const editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true };

  const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

  const [data, setData] = useState();

  useEffect(() => {

    refreshGrid();

  }, []);

  function refreshGrid() {

    console.log("Hi")

    getOrders()

      .then(

        data => {

          setData(data);

        }

      );

      console.log(data)

  }

  function dataStateChange(args: any){

    refreshGrid();

  }

  function dataSourceChanged(state: any) { 

    console.log(state)

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

      console.log(state);

      addOrder(state.data)

        .then(res => state.endEdit());

    } else if (state.action === "edit") {

      updateOrder(state.data)

      .then(res => state.endEdit());

    } else if (state.requestType === "delete") {

      deleteOrder(state.data[0].OrderID)

      .then(res => state.endEdit());

    }

  }

  return (

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

      <GridComponent dataSource={data}

        allowPaging={true}

        editSettings={editOptions}

        toolbar={toolbarOptions}

        dataSourceChanged={dataSourceChanged}

        dataStateChange = {dataStateChange}

      >

        <ColumnsDirective>

        <ColumnDirective field='WID' headerText='Well ID' width='110'  allowEditing={false} isPrimaryKey={true}/>

              <ColumnDirective field='DPWellName' headerText='Wll Name' width='250' />

              <ColumnDirective field='Cat' headerText='CAT' width="110" editType='dropdownedit' />

              <ColumnDirective field='WaterOutWellName' headerText='WaterOut WellName' width='250' />

              <ColumnDirective field='Project' headerText='Project' width='200' editType='dropdownedit'  />

              <ColumnDirective field='ProductionTank' headerText='Production Tank' width='150' />

              <ColumnDirective field='MarketingArea' headerText='Marketing Area' width='120' />

              <ColumnDirective field='Route' headerText='Route' width='110'/>

              <ColumnDirective field='Length' headerText='Length' width='110' editType='dropdownedit'/>

              <ColumnDirective field='Bench' headerText='Bench' width='120' editType='dropdownedit'/>

              <ColumnDirective field='WI' headerText='WI' width='120' editType= 'numericedit'/>

              <ColumnDirective field='NRI' headerText='NRI' width='120' />

              <ColumnDirective field='FirstGasIP' headerText='FirstGas IP' width='120' editType= 'numericedit'/>

              <ColumnDirective field='FirstOilIP' headerText='FirstOil IP' width='120' editType= 'numericedit'/>

              <ColumnDirective field='GasDe' headerText='GasDe' width='90' editType= 'numericedit'/>

              <ColumnDirective field='GasB' headerText='GasB' width='90' editType= 'numericedit'/>

              <ColumnDirective field='OilDe' headerText='OilDe' width='90' editType= 'numericedit'/>

              <ColumnDirective field='OilB' headerText='OilB' width='90' editType= 'numericedit'/>

              <ColumnDirective field='PeakGasIP' headerText='PeakGasIP' width='120' editType= 'numericedit'/>

              <ColumnDirective field='PeakOilIP' headerText='PeakOilIP' width='120' editType= 'numericedit'/>

              <ColumnDirective field='TypeCurve' headerText='TypeCurve' width='120'/>

              <ColumnDirective field='SHLFNL' headerText='SHLFNL' width='90'/>

              <ColumnDirective field='SHLFSL' headerText='SHLFSL' width='90'/>

              <ColumnDirective field='SHLFWL' headerText='SHLFWL' width='90'/>

              <ColumnDirective field='SHLFEL' headerText='SHLFEL' width='90'/>

              <ColumnDirective field='SHLSec' headerText='SHLSec' width='90'/>

              <ColumnDirective field='SHLBlk' headerText='SHLBlk' width='90'/>

              <ColumnDirective field='SHLTwnshp' headerText='SHLTwnshp' width='90'/>

        </ColumnsDirective>

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

      </GridComponent>

    </div>

  );

}

export default App;

[Sujith Kumar Rajkumar]

Hi Sowmya, 

Greetings from Syncfusion support. 

 

We checked the reported problem but unfortunately could 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, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/155075/ze/GridApplication1831484614  

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

Since we could not see any case where the arguments are not received in the event can we schedule a web meeting to directly check the problem in your machine. Our team will schedule the meeting based on your availability so please confirm it. 

Let us know if you have any concerns. 

Regards, 

Sujith R 

[Jordon Carter]

Hi, when I add an external data source to the grid component,  dataSourceChange stops working Any help would be greatly appreciated. Thank you.

[Rajapandi Ravi]

Hi Jordon, 

For every grid actions(such as filter, page etc.,) we have triggered the dataStateChange event and in that event arguments we have send the corresponding action details(like skip, take, filter field, value, sort direction etc.,)  based on that you can perform the action in your service and return data as result and count object. Please refer the below the below sample and screenshot for more information. 

Sample: https://www.syncfusion.com/downloads/support/forum/155075/ze/GridApplication1831484614 

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

Screenshot: 

 

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

1)    Please share how you are bind the data to the Grid. 

2)    Please share your complete Grid rendering code. 

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

Regards, 

Rajapandi R