After using dataSourceChanged, spinning wheel keeps running

[Yagnesh]

I was unable to fire dataSourceChanged, later I've realised that we need to pass dataSource as {count:5, result: data} in order to make dataSourceChanged fire.

Now I'm receiving event properly but whenever grid updates (Editing/Deleting grid item, Changing pages etc) spinning wheel comes and keeps running forever.

I've used grid as common component and using it on another class components and all settings are passed as props. Let me know if I'm doing anything wrong here....

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import '../global/static/styles.scss'
import Topbar from '../components/topbar'
import AppTable from '../components/apptable'
import * as tableData from '../data.json'
import { dashboardTableColumns } from '../components/table-configs/table-columns'

class Dashboard extends Component {
  constructor(props) {
    super(props)

    this.state = {
      partyTableData: []
    }
  }

  grid = null

  async componentDidMount() {
    try {
      this.setState({ partyTableData: tableData.partyTableData })
    } catch (e) {
      toast.error(e)
    }
  }

  async handleDataSourceChange(dataState) {
    console.log('handleDataSourceChange', dataState)
    if (dataState.action === 'add') {
      console.log('Added', dataState.endEdit)
    } else if (dataState.action === 'edit') {
      console.log('Updated', dataState.endEdit)
    } else if (dataState.requestType === 'delete') {
      console.log('Deleted', dataState.endEdit)
    }

    // above logs get's printed and I'm getting endEdit function in log as well, so endEdit must be fired below

    dataState.endEdit()
  }

  dataStateChange(state) {
    if (this.grid) {
      this.grid.dataSource = { count: this.state.partyTableData.length, result: this.state.partyTableData }
    }
  }

  render() {
    return (
      <>
        xs={1} className="m-0">
          
        
        xs={11} className="m-0 p-4">
          

                          ref={(gridRef) => this.grid = gridRef}
              dataSource={{ count: this.state.partyTableData.length, result: this.state.partyTableData }}
              columns={dashboardTableColumns}
              gridProps={{
                allowPaging: true,
                allowFiltering: true,
                allowGrouping: true,
                pageSettings: {
                  pageSize: 6
                },
                editSettings: {
                  allowEditing: true,
                  allowAdding: true,
                  allowDeleting: true
                },
                toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
                dataStateChange: this.dataStateChange.bind(this),
                dataSourceChanged: this.handleDataSourceChange.bind(this),
                filterSettings: {
                  ignoreAccent: true,
                  type: 'Excel'
                }
              }}
            />
          

        
      
    )
  }
}

export default withRouter(Dashboard)

export const dashboardTableColumns = [
  {
    field: 'name',
    title: 'Party Name',
    props: {
      isPrimaryKey: true
    }
  },
  {
    field: 'mobileNo',
    title: 'Mobile No.',
  },
  {
    field: 'place',
    title: 'Place',
    props: {
      editType: 'dropdownedit'
    }
  },
  {
    field: 'lot',
    title: 'Lot',
    props: {
      editType: 'numericedit'
    }
  },
  {
    field: 'thaan',
    title: 'Thaan',
    props: {
      editType: 'numericedit'
    }
  },
  {
    field: 'weight',
    title: 'Weight',
    props: {
      editType: 'numericedit'
    }
  }
]

import React, { Component } from 'react'
import {
  GridComponent,
  ColumnDirective,
  ColumnsDirective,
  Page,
  Filter,
  Group,
  Edit,
  Inject,
  Toolbar
} from '@syncfusion/ej2-react-grids'
import '../App.css'

class AppTable extends Component {
  grid = null

  constructor(props) {
    super(props)
  }

  render() {
    return (
              ref={g => this.grid = g}
        dataSource={this.props.dataSource || {}}
        {...(this.props.gridProps || {})}
      >
        
          {
            (this.props.columns || []).map((columnData, idx) => {
              return (
                                  key={`${columnData.field}_${idx}`}
                  field={columnData.field}
                  headerText={columnData.title}
                  {...(columnData.props || {})}
                />
              )
            })
          }
        
        services={[Page, Filter, Group, Edit, Toolbar]}/>
      
      )
  }
}

export default AppTable

Attachment: SyncFusion_issue_2c4de83e.rar

[Sujith Kumar Rajkumar]

Hi Yagnesh, 

 

Greetings from Syncfusion support. 

 

From the provided information and shared code snippet we could see that you are using custom binding approach and binding the data as an object of result and count to the Grid’s dataSource property. With custom binding, you need to handle the Grid actions from your end and update the response data to the dataSource property for updating in the Grid. We have explained the custom binding approach in detail below for your case, 

 

When the custom binding is implemented in the Grid the dataStateChange(Grid action)/dataSourceChanged(CRUD action) event will be triggered for the corresponding action along with the query details returned in the event arguments. These event arguments will return the corresponding action details from the source with which you can handle the action in your server and return back the response to the Grid. 

 

So when the filter/sort/page actions are performed in the Grid, the action details will be returned in the dataStateChange event as shown in the below image(shows filter action details), 

 

 

 

From this event you can form the filter/page/sort queries in the format as required by your server and make the custom API call to your service(can be checked in the below shared documentation where we have made the API call for this approach), process the action, return back the response and bind it to the Grid dataSource as an object of ‘result’ and ‘count’. 

 

Similarly when the CRUD action is performed in the Grid, the action details will be returned in the dataSourceChanged event as shown in the below image, 

 

 

 

And in this event you can update the details in your server and on success of this action you need to call the state’s(The dataSourceChanged event argument) endEdit method in order to update the changes in the Grid. This will automatically trigger the dataStateChange event from where you need to call method for fetching the updated data from the server and assigning it to the Grid data as an object of ‘result’ and ‘count’. 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridCustomBindingWithCRUD-117474173 

 

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 on custom binding can be checked in the below documentation links, 

 

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

 

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

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

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Yagnesh]

Thanks for the very details response, I'll surely look into this along with the reference you've provided. Will update once I get any updates.

Btw I've gone through youtube playlist on data grid. As far as I know, We surely need to rely on using custom binding for achieving this right? (CRUD operation and live filtering, Live filtering seems to work if I use filter templates) but I'm wondering what will be best way to use this along with redux.

For ex: Instead of doing live updates, I want to save all changelogs in redux store (add, edit, delete etc) so that I get to do bulk action in grid at first and then do verification later on by using changelogs derived from redux store. Is there other best practice for this in syncfusion grid system or custom binding is only way to go :)

BTW Kudos to team syncfusion, for availing community edition along with support <3 I'm focusing on syncfusion instead of react table for my next project all thanks to this.

Regards,

Yagnesh S.

[Sujith Kumar Rajkumar]

Hi Yagnesh, 

 

Thank you so much for taking the time to provide your feedback. We really try our best to serve the developer community with this community edition. We are happy to hear that you are focusing on Syncfusion for your project, and will be glad to assist. 

 

As for your query, we are not clear on your exact requirement from the provided information. When the custom binding approach is used the Grid actions including CRUD needs to be handled by your side as mentioned in our previous update. So the corresponding event will be triggered for each action like, add, edit, delete where you need to handle these individual actions. However if your requirement is to perform multiple CRUD actions like add, edit, delete and save the changes as a batch, then we suggest you to use the batch edit functionality of the Grid. We have explained this functionality below for your reference, 

 

The Grid’s batch editing functionality allows to perform multiple CRUD actions like add, edit, delete on the Grid rows and on performing each action the changes will be pushed into a batch changes variable within the source. Because of this the save action will not be called after performing each edit as user can perform multiple CRUD actions and save the changes as a whole. So when each change occurs it will only be updated in a virtual storage when the update action is performed these changes are updated to the Grid’s data source. 

 

More details on this can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#batch 

 

However if you do not wish to handle the Grid actions from your side but need to update the bulk changes alone to your server when needed, then we suggest you to use local data binding(set the JSON data directly to the Grid’s dataSource and the Grid will handle all the actions). Here you can retrieve the CRUD changes in the actionComplete event argument, store them in a global variable and when required you can update the entire changes to your server using API call. 

 

More details on local data binding can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#local-data 

 

API: https://ej2.syncfusion.com/angular/documentation/api/grid/#actioncomplete 

 

If we misunderstood your query or if you require any further assistance, then please get back to us. 

 

Regards, 

Sujith R 

[Yagnesh]

Hello and again thanks for the updates.

I've already experienced and tested batch edit while watching playlist, it seems it's only good for doing some things compared to my current use case, also local binding seems more relatable to my current usecase.

For ex:
Assume I have data coming from API which I'll store in redux store as original data. Now I'll create shallow clone and store it in redux store as well which will ultimately become dataSource for my data grid (result and count pairs ofcourse).

Now let's say I'm doing 5x row insert, 2x update and 1x row deletion. I will do that update on that shallow copy of redux store resulting instant update in data grid visual as well.

But now I have changed data and original data in redux store, from which I can generate changelogs.

If I approve that changelogs only then API will be called to do that same changes in original data and if I just refreshes without confirming changelogs, It'll retain same.

• Now I'm thinking to achieve this by using dataSourceChanged event as you've mentioned but is there any other better solution to address usecases like these where we are simply doing "local binding like changes" but instead of doing it on local json, we do it on redux or etc.

Regards,
Yagnesh.

[Sujith Kumar Rajkumar]

Hi Yagnesh, 

 

You’re welcome. 

 

For your use case scenario we suggest you to use either the custom binding or local data binding approach. So if you are using custom binding you would have to perform the changes on the local data source from your end and provide the updated data to the Grid on performing Grid actions and on local data binding you do not need to update the Grid data source as the actions will be performed by the Grid itself. So using the local binding approach if needed you can do the CRUD actions performed on the Grid(which can be identified using the actionComplete event as mentioned in our previous update) separately on your redux data and maintain it for your API changes. You can also retrieve the updated data source(with all the CRUD changes performed) from the Grid’s dataSource property for making changes to your API without having to update/maintain the changes in the redux store. 

 

So we suggest you to use one of the above approaches which best suits your case to achieve your requirement. 

 

Regards, 

Sujith R 

[Yagnesh]

Hello Sujith!

Thanks for sharing the insights, I'm thinking to give local binding a first try since it seems first choice but if it doesn't fulfill the requirement then will go with custom bindings,

Also I'll be sharing final update here for future references once I achieve my use case. Thanks for all the information that's has been shared here.

Regards

Yagnesh!

[Sujith Kumar Rajkumar]

Hi Yagnesh, 

 

Thanks for the update. We are glad to hear that the provided information helped resolve your query. 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R