Grid gets stuck in an infinite loop when the filter returns the same results on two consecutive occasions
George,
Thanks for your update
Based on your query, it seems that you are using the API to fetch data and handle the Grid actions like filtering, paging, and sorting etc. in your own API service and facing the problem. You can achieve your requirement by using the Custom Binding feature of Grid.
The custom binding feature in the React Grid enables you to manage your own custom API for handling data processing externally and then binding the resulting data to the Grid. This allows you to implement your own custom data logic to your application’s requirements. When using custom binding, the Grid expects the result of the custom logic to be an object with properties result and count. The result property should contain the data to be displayed in the Grid, while the count property indicates the total number of records in the dataset for your application.
The dataStateChange event is triggered whenever you perform actions that modify the state of the grid’s data, such as changing pages, applying sorting, or grouping. This event provides detailed information about the action performed and the current state of the grid, including parameters like page number, sorting details, and filtering criteria.
When filtering operation is performed in the Grid, the dataStateChange event is triggered with following arguments you can handle this in your service and return the result in the required format result and count.
We have already discussed about this in our documentation which can be accessed from the below link,
Documentation: https://ej2.syncfusion.com/react/documentation/grid/data-binding/remote-data#custom-binding
Since that the dataSource object differs between working and non-working states, the absence of actionArgs and enablePersistence might point to an issue with how events or lifecycle methods are being executed. Here's a potential approach to address this issue:
1) Grid Events: Verify that all necessary events for the Grid component are properly captured and handled. This includes ensuring filtering events trigger the correct actions and that state updates occur as expected.
2) DataSource Structure: By default, in our Grid component, actions such as sorting and filtering trigger the dataStateChange event, which includes the corresponding state action arguments.
Please inspect why the actionArgs and enablePersistence properties are missing in the non-working scenario. Ensure that you are correctly receiving the relevant action arguments in the dataStateChange event and that your service is properly handling the filtering action. Additionally, your server response should include the required properties—such as result and count—along with any necessary state data to maintain functionality during filtering.
3) Actionargs and enablePersistence: Please ensure on your end that while returning the filter results from your service, the actionArgs and enablePersistence properties are not being handled at the application level in a way that could lead to script errors.
4) Error Handling: Implement error handling in your API calls and ensure any errors returned from the server are dealt with, such as retrying requests or providing user feedback to prevent infinite loops.
Once these areas are reviewed and adjusted, the issue may be resolved. If you are still facing difficulties, sharing your Grid code snippets related to these aspects once you are able to will help us provide a more precise solution.
dataStateChange Method:Code Example : function dataStateChange(state: DataStateChangeEventArgs | any) { if ( state.action && (state.action.requestType == 'filterchoicerequest' || state.action.requestType == 'filterSearchBegin' || state.action.requestType == 'stringfilterrequest') ) { state.skip = 0; state.take = 1000; // Fetch filtered data execute(state).then((response: any) => { const data = response['result'] state.dataSource(data); }); } else{ // Handle other state changes like paging or sorting execute(state).then((gridData) => { grid.dataSource = gridData; }); } } |
execute Function:getData, which constructs and executes the query.function execute(state: DataStateChangeEventArgs | any): Promise<DataResult> { return getData(state); } |
getData Function:function getData(state: DataStateChangeEventArgs): Promise<DataResult> { const pageQuery = `$skip=${state.skip}&$top=${state.take}`; // Paging info // Filtering logic if (state.where) { filterQuery = `&$filter=` + state.where.map((obj) => { if (obj.isComplex && obj.predicates) { // Handle complex filters const predicates = obj.predicates.map((predObj) => { if (predObj.isComplex && predObj.predicates) { return predObj.predicates .filter((predicate) => predicate.operator === 'equal') .map((predicate) => { const value = typeof predicate.value === 'string' ? `'${predicate.value}'` : predicate.value; return `${predicate.field} eq ${value}`; }).join(' or '); } else { const value = typeof predObj.value === 'string' ? `'${predObj.value.toLowerCase()}'` : predObj.value; return predObj.operator === 'equal' ? `${predObj.field} eq ${value}` : `${predObj.operator}(tolower(${predObj.field}), '${predObj.value.toLowerCase()}')`; } }).join(' and '); return `(${predicates})`; } else { // Handle simple filter const value = typeof obj.value === 'string' ? `'${obj.value.toLowerCase()}'` : obj.value; return obj.operator === 'equal' ? `${obj.field} eq ${value}` : `${obj.operator}(tolower(${obj.field}), '${obj.value.toLowerCase()}')`; } }).join(' and '); } else { filterQuery = ''; } // Construct the full query URL ajax.url = `${BASE_URL}?${pageQuery}${sortQuery}${filterQuery}&$count=true`; // Execute the request and parse the response return ajax.send().then((response: any) => { const data: any = JSON.parse(response); return { result: data['value'], // Data array count: parseInt(data['@odata.count'], 10) // Total record count }; }); } |
Attachment: NextJS_Sample_f2f07248.zip
