Legacy BackendAdapter Filter, Paging, Sort issues with dataStateChange

[Denny]

I have a Legacy Backend Adapter that talks with an API, I am trying to use Filter, Page, and Sort using the dataStateChange but it's not working, to be able to use Page  I am trying to pass an object as a DataResult (result and count) but the items are not shown. I don't know if I am missing something or I am doing something wrong. I left you a code example. 

Thanks in advance.

https://stackblitz.com/edit/react-p4buwv-ue8i1b

[Mohammed Farook J]

Hi Denny, 

Thanks for contacting Syncfusion support. 

We have validated the provided code and we suspect that you have handled dataOpearation as incorrect. So we suggest you to use  in created event to provide this skip and take value to dataStateChange event. We have prepared the sample with your requirement. Please refer the following sample and demo, 

Sample: https://stackblitz.com/edit/react-p4buwv-gbpuxy?file=index.js 

Sample browser demo: https://ej2.syncfusion.com/react/demos/#/material/grid/custom-binding 

 

Please get back to us, If you need further assistance on this.       

 

Regards, 

J Mohammed Farook 

[Denny]

Thanks for the quick response, your solution works but it's calling the API without stopping and that cause my UI freeze, I let you the example check the console.

https://stackblitz.com/edit/react-p4buwv-shxfha

Thanks in advance.

[Mohammed Farook J]

Hi Denny, 

 

From your first update sample, we found that you have used react setState method to provide the dataSource to Grid (i.e this.setState({ repositories: result });). This setState is used to re-render the component when some changes appear in it. So Grid will refreshed after bind the dataSource. Also dataStateChanged Grid event of the Grid will trigger while Grid is refreshing. So this repeated action continuously performed in your sample and this is the root case of the issue. We have modified your sample and in this sample we have provided the dataSource to the Grid by using the Grid instance. 

 

Sample1: https://stackblitz.com/edit/react-p4buwv-aknynw?file=index.js 

 

Sample2: https://stackblitz.com/edit/react-p4buwv-stngsa?file=index.js 

 

Regards, 

J Mohammed Farook 

 

[Denny]

Hi J Mohammed Farook and thanks for the quick response

I changed my code using your example, but now I am a little stuck on how to perform CRUD operations, I was following this example (https://ej2.syncfusion.com/react/documentation/grid/data-binding.html#perform-crud-operations) using the dataSourceChanged and the dataStateChange, but without any success, I left you my example here, and thanks in advance.

https://stackblitz.com/edit/react-p4buwv-ng8grx

[Mohammed Farook J]

Hi Denny, 

 

From your sample, we found that you did not inject the Edit module. You need to inject Edit module to perform the crud actions in Grid. Also we could see that you have used our rest api service to perform crud actions. But this service only has read only access. So you cannot perform crud actions with this service. So please use your service to achieve your requirement. Please refer the following code snippet, 

 

import { render } from 'react-dom'; 

import * as React from 'react'; 

import { GridComponent, ColumnsDirective, CommandColumn, ColumnDirective, Page, Filter, Inject, Edit } from '@syncfusion/ej2-react-grids'; 

import { DataManager } from '@syncfusion/ej2-data'; 

 

export class Filtering extends React.Component { 

  constructor() { 

  super(...arguments); 

  this.dataStateChange({skip: 0,take: 10}); 

  } 

 

       dataSourceChanged(state) { 

        if (state.requestType === 'delete') { 

 

                     // handle your service here 

                      

              } 

       } 

 

  render() { 

    return (<div className='control-pane'> 

      <div className='control-section row'> 

 

        <GridComponent 

          dataSourceChanged={this.dataSourceChanged.bind(this)} > 

 

                ... 

 

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

        </GridComponent> 

      </div> 

    </div>); 

  } 

} 

render(<Filtering />, document.getElementById('sample')); 

 

 

Refer the following link to know about required modules to perform the actions, 

 

https://ej2.syncfusion.com/react/documentation/grid/module.html 

 

Also we could see that Edit module is not injected in our help documentation code. We have already logged documentation task to edit that document.   This will be available in any of our upcoming release.  

 

Regards, 

J Mohammed Farook