dataSourceChanged event not fired - DataGrid

[Dario]

Hey there!
Im facing a problem with datagrid, edit actions doesnt fire dataSourceChanged event, i need to perform some calls in order to persist the data. Please check the example.

Example
https://codesandbox.io/s/charming-swirles-x859h?file=/src/App.js

[Balaji Sekar]

Hi Dario, 

 

Greetings from the Syncfusion support. 

 

We have validated your query with the information provided and you have bound the Grid data source in JSON objects structure but the dataSourceChange event can be trigger while binding the Grid dataSource with promise. We have discussed this in our Help Documentation already. For more information please refer to the documentation below. 

 

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

Regards, 

Balaji Sekar 

[Prajwol]

So what should be changed on this code to fire event?

[Rajapandi Ravi]

Hi Prajwol, 

Thanks for the update 

We would like to inform you that by default Grid dataSourceChanged event will be called only when we binding the Grid data as result and count pair. For grid actions such as paging, grouping, sorting, etc., the dataStateChange event is invoked. You have to query and resolve data using your service in this event based on this event arguments.  

 

The dataSourceChanged event will be triggered for updating the grid data. You can perform the save operation based on the event arguments and you need to call the endEdit method to indicate the completion of save operation. Please refer the below Sample, API, Documentation and screenshot for more information. 

 

Sample: https://codesandbox.io/s/react-data-grid-datasourcechanged-not-firing-forked-vmh9e 

API:        https://ej2.syncfusion.com/react/documentation/api/grid/#datasourcechanged 

 

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

                              https://ej2.syncfusion.com/react/documentation/grid/data-binding/#handling-grid-actions 

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

 

Screenshot: 

 

 

 

Regards, 

Rajapandi R

[Jan Paholik]

Hi,

I have the same problem - that dataSourceChanged ​event is not fired after data was edited. I looked at the CodeSandbox solution you provided in the previous reply and I think I have implemented it correctly but I can't get the event method to be executed.

Note: In the codesandbox playground I adjusted versions of packages to the versions I have installed and in codesandbox it works but in my code it does not.

Any help would be appreciated.

Here is my code (simplyfied):

import React, { FC, useEffect, useMemo, useState } from 'react'
import {
  ColumnDirective,
  ColumnsDirective,
  CommandColumn,
  CommandModel,
  Edit,
  Filter,
  Grid,
  GridComponent,
  Group,
  Inject,
  Page,
  Resize,
  Sort,
  TextAlign,
} from '@syncfusion/ej2-react-grids'
// ... other imports​

export interface Props {
  connections: ConnectionDto[]
  // other props
}

export type ConnectionGridItem = ConnectionDto & {
  idFlattened: string
  arrival: string
  departure: string
  lineTypeDescription: string
}

const gridPageSize = 40

const ConnectionsGrid: FC<Props> = (props) => {
  const { t } = useTranslation()

  const gridConnections: ConnectionGridItem[] = useMemo(() => {
    return props.connections.map((_) => ({
      ..._,
      idFlattened: `${_.id.id}|${_.id.ttIndex}`,
      arrival: numberTimeToString(_.arrivalTime),
      departure: numberTimeToString(_.departureTime),
      lineTypeDescription: getLineTypeDescription(t, _.lineType),
    }))
  }, [props.connections, t])

  const nameOfConnection = nameofFactory<ConnectionGridItem>()

  const alignRightProps = {
    headerTextAlign: 'Left' as TextAlign,
    textAlign: 'Right' as TextAlign,
  }

  const commands: CommandModel[] = [
    { type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },
    { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },
    { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } },
  ]

  function dataSourceChanged(state: any) {
    console.log(state)
    state.endEdit()
  }

  return (
    <GridComponent
      dataSource={gridConnections}
      // allowGrouping
      // allowFiltering
      // allowSorting
      allowPaging
      editSettings={{ allowEditing: true, allowEditOnDblClick: false }}
      pageSettings={{ pageSize: gridPageSize }}
      dataSourceChanged={dataSourceChanged}
    >
      <ColumnsDirective>
        <ColumnDirective
          field={nameOfConnection('idFlattened')}
          headerText={'ID'}
          autoFit
          allowEditing={false}
          isPrimaryKey={true}
        />
        <ColumnDirective
          field={nameOfConnection('lineType')}
          headerText={t('Type')}
          autoFit
          allowEditing={false}
        />
        <ColumnDirective
          field={nameOfConnection('lineNumber')}
          headerText={t('Line')}
          autoFit
          allowEditing={false}
          {...alignRightProps}
        />
        <ColumnDirective
          field={nameOfConnection('name')}
          headerText={t('Connection')}
          autoFit
          allowEditing={false}
          {...alignRightProps}
        />
        <ColumnDirective
          field={nameOfConnection('provider')}
          headerText={t('Provider')}
          allowEditing={false}
        />
        <ColumnDirective
          field={nameOfConnection('lineName')}
          headerText={t('Line name')}
          allowEditing={false}
        />
        <ColumnDirective
          field={nameOfConnection('platform')}
          headerText={t('Platform')}
          autoFit
          {...alignRightProps}
        />
        <ColumnDirective
          field={nameOfConnection('arrival')}
          headerText={t('Arrival')}
          autoFit
          allowEditing={false}
          {...alignRightProps}
        />
        <ColumnDirective
          field={nameOfConnection('departure')}
          headerText={t('Departure')}
          autoFit
          allowEditing={false}
          {...alignRightProps}
        />
        <ColumnDirective headerText={t('Edit')} width='100' commands={commands} />
      </ColumnsDirective>

      <Inject services={[Group, Filter, Sort, Resize, Page, Edit, CommandColumn]} />
    </GridComponent>
  )
}

export default ConnectionsGrid



[Jan Paholik]

Colleague of mine gave me an advice to look to the type of which the data was passed to the GridComponent in the codesandbox example. 

Before when I read comments in this thread I did not get what it meant that ​dataSourceChanged event will be called only when we binding the Grid data as result and count pair. 

However when I saw object that was used to pass the data there I understood what it meant.

So we need to pass it like this to make dataSourceChanged ​event work:

import { DataResult } from '@syncfusion/ej2-react-grids'

const gridData: DataResult = {
  result: data, // array with data to be displayed in the grid
  count: data.length
}

return <GridComponent dataSource={gridData} ... >...</GridComponent>

[Rajapandi Ravi]

Hi Jan,

We are happy to hear that you have found the solution at your end.

By default, Grid dataSourceChanged event will be called only when we are binding the Grid data as result and count pair. Please refer to the below documentation for more information.

Documentation: https://ej2.syncfusion.com/react/documentation/api/grid/#datasourcechanged

Please get back to us if you need further assistance.

Regards,

Rajapandi R

[Younus]

Many many thanks. i stuck with this problem long time. But you solve it thanks

[Rajapandi Ravi]

Hi Younus,

We are happy to hear that our suggested solution was helpful to resolve the problem.

Please get back to us if you need further assistance.

Regards,

Rajapandi R