Reloading syncfusion table from empty state to non-empty state shows the last page

[Celia Lin]

Hello,

We have implemented syncfusion pagination table with filters in a React application. Functionality includes when a filter is selected, the syncfusion table reloads with new items, filters can also be unchecked or reset and the syncfusion table automatically reloads with all items.

One issue we noticed is, when users click on the filter with no associated items, the table shows no item as expected. However, when users uncheck or reset the filters, the syncfusion table reloads with expected items but always navigates to the last page. The expected behavior is navigating to the first page instead.

We have confirmed on our end, pageSettings property on syncfusion grid is not stateful and only be passed in on table initial load. That being said, on filter selection or reset, there is no update on pageSettings on our end.

const pageSettings = {

currentPage: 1,

pageSize: 10,

pageSizes: ['10', '15', '20'],

};

We have further narrowed down the cause where the pageSettings was updated by the syncfusion code below, current codebase is from syncfusion 17.4, but same code was found in latest version 20.2.

// Render.prototype.dataManagerSuccess if (!len && dataArgs.count && gObj.allowPaging && args && args.requestType !== 'delete') {

gObj.prevPageMoving = true; gObj.pageSettings.totalRecordsCount = dataArgs.count; if (args.requestType !== 'paging') { gObj.pageSettings.currentPage = Math.ceil(dataArgs.count / gObj.pageSettings.pageSize); } gObj.dataBind(); return;

}

Seeing this has been a syncfusion functionality for a while, we are wondering if the above behavior for our use case is expected or if there is a way we could stop the the grid from navigating to the last page? Please also feel free to let us know if you need more information or clarification on this.

Thanks.

[Rajapandiyan Settu]

Hi Celia,

Thanks for contacting Syncfusion support.

We are unable to understand the reported problem from our side. So, kindly share the below details to provide a better solution.

1. Explain your problem in detail with a video demo (highly recommended).
2. Share the complete code you have used.
3. Which type of data-binding you have used? (local/remote)
4. Which type of Filter you have used? (FilterBar/ Excel/ Menu)

Regards,

Rajapandiyan S

[Celia Lin]

Hi Rajapandiyan,

Thank you for reaching out, we have attached a gif demo and detailed explanation is included as follows.

1. Explain your problem in detail with a video demo 

The attached gif shows a syncfusion table with a few filtering support, functionalities include:

• • On a syncfusion table, initially the table has items loaded.
  • Checking filter filters with items ​fires api request, the returned result is a non-empty list and items are loaded into the syncfusion table.
  • Checking filter filters with no item fires api request, the returned result is an empty list and syncfusion table loads with no item.

The problem we are seeing can be reproducible with the following steps:

• • Check filter with no items, the syncfusion table loads with no item
    
  • Uncheck filter with no items, syncfusion reloads with items
  • Notice pagination index is changed to the last page instead of the first page

However, it behaves differently with filter with items:

• • Check filter with items, the syncfusion table loads with items
    
  • Uncheck filter with items, syncfusion reloads with all items
  • Notice pagination index is changed to the first page

On our code, we do not explicitly make any changes to pageSettings which contains the pagination parameters including the index. After some investigation, we found that the pagination index is changed by the syncfusion code we showed above.

- Which type of data-binding you have used? (local/remote)

The syncfusion table binds to remote data.

- Which type of Filter you have used?

We use React FormGroup​ (i.e., Filter with Items, Filter with no items) to group sub filters, each sub filter (the ones with value key* shown in the video) is React FormControlLabel with checkbox as control and labels.

Hopefully this explains the problem and please let us know if further information is needed.

Thanks

Attachment: syncfusion_9c7d89d3.7z

[Rajapandiyan Settu]

Hi Celia,

Thanks for sharing the details.

By analyzing the Gif file we found that you are performing the filter operation externally using a custom component. We would like to know the actions behind the checkbox (placed outside of the Grid) change.

1. Share the complete code behind when the checkbox is checked/unchecked.
2. How could you bind the filtered data to the Grid? Are you using grid.dataSource property for this?
3. Are you using filterByColumn/ filterSettings.column method to perform filtering in Grid?
4. If possible, share the issue reproducible sample which will be very helpful to resolve it earlier.

Regards,

Rajapandiyan S

[Celia Lin]

Hi Rajapandiyan,

1. Share the complete code behind when the checkbox is checked/unchecked.

Here is the pseudocode for the checkbox, essentially the checkbox check/uncheck status is driven by react state values

<Checkbox

checked={stateValue}

onChange={({ target: { checked } }) => {

handleFilterChange(() => {updateStateValues});

}}

/>

2. How could you bind the filtered data to the Grid? Are you using grid.dataSource property for this?



Yes we are using grid.dataSource property to bind the filtered data to the Grid.

The way it was done is, the grid's dataSource property binds to a react state value, on filter change, an api call is made and the result is set to the state value that binds to the grid.

3. Are you using filterByColumn/ filterSettings.column method to perform filtering in Grid?

No we are not using these methods.

Would the above information explain the flow?



[Rajapandiyan Settu]

Hi Celia,

Thanks for sharing the details.

We have prepared a simple sample based on your requirement (“dynamically update the Grid dataSource on checkbox change event”) and tried to replicate the reported problem. But it was unsuccessful from our side. The Grid Component is loaded properly with the previous pageSettings. Find the below sample for your reference,

Sample: https://stackblitz.com/edit/react-xa25ij-uti2iu?file=component%2Fapp.jsx

Kindly try to replicate the issue in the provided sample or share the issue sample which will be very helpful for us.

Regards,

Rajapandiyan S

[Celia Lin]

Hi Rajapandiyan, 

Thank you for providing the sandbox environment, I have tried to reproduce the issue with the sandbox and I have a few questions which will help troubleshooting:

1. I have noticed that whenever checking/unchecking a filter checkbox, the table stays in the same page. I.e., Switching to page 3 and check one checkbox, notice the table stays at page 3 instead of switching to page 1. Is this the expected behavior on syncfusion grid? Currently the way I got around it was refreshing the grid by passing in key prop and tie the prop with a value which changes whenever there is a change on any checkbox selection.
2. It seems the issue can be specific to using remote data on the grid, i.e., calling apis to fetch data for the grid, checking/unchecking checkboxes will fire another api call and reload the grid with new data. I am wondering if your team has a mock request that we could use together to replicate the issue, or if your team has a sandbox that provides this functionality.

This is the sandbox I've been using so far: https://stackblitz.com/edit/react-xa25ij-xvi4pa?file=component/app.jsx

Thanks,

Celia

[Rajapandiyan Settu]

Hi Celia,

Thanks for sharing the details.

Query #1: I have noticed that whenever checking/unchecking a filter checkbox, the table stays in the same page.

Yes, The Grid will always maintain the previous settings (pageSettings, filterSettings, sortSettings, etc.,) when it is refreshed. This is the default behavior of Grid. If you want to move the Grid to first page when changing the dataSource, you can use goToPage method.

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

        case 'Data 1':

          var data1 = orderData.slice(50, 100);

          setGridData(data1);

          grid.goToPage(1);  // navigate to first page

          break;

 

Query #2: It seems the issue can be specific to using remote data on the grid

We have updated the data after the api call and are unable to replicate the issue from our side. Find the sample for your reference.

Sample: https://stackblitz.com/edit/react-xa25ij-qcqobx?file=component%2Fapp.jsx

Kindly share the complete code file. If possible, share the issue reproducible sample, which will be very helpful to resolve it earlier.

Regards,

Rajapandiyan S