GoToPageAsync and ClearFilteringAsync refreshes the grid twice

Question

We have enabled pagination and filter for our blazor grid. Whenever the user navigates to a different page or filters the current page and then changes the datasource of the grid, the filter and the page numbers are retained when the grid loads the new data.

We have used ClearFilteringAsync() and GoToPageAsync(1) to fix this issue. But the grid refreshes twice before displaying the correct data.

Is there any other way to solve this issue without the grid refreshing multiple times?

Naveen Palanivel · Accepted Answer

Hi Saravana Kumar,

sorry for the inconvenience,

We want to let you know that,  if you use paging and filtering in the
grid, and then you change the grid's data source, the applied paging and
filtering will be persist. This is the default behavior. If you want to reset
this to the default state, you can use "ClearFilteringAsync" and
"GoToPageAsync". But combining these and passing them as a single
request is not possible. This is because when you use these actions separately
as public methods, they each work on their own. As a result, two requests will
be sent, and this is the default behaviorRegards,Naveen Palanivel

Andre Putz · Answer

I want to know that too :)

Naveen Palanivel · Answer

Hi SaravanaKumar ,

From your query, We suspect that when user switches to a different page
or applies filters, you want to load new data into the grid. We also prepared
simple sample attached in this forum and before proceeding further with your
requirement kindly share the below details to validate further at our end.
 Share us the
     entire Grid code snippet along with model class 
 Share the
     details about,  how you changed the datasource after paging or
     filtering 
 Please share if we missed any replication procedure in
     attached sample 
 Share us the video demonstration of the issue.
 If possible share us an simple issue reproduceable
     sample or try to modify the above mentioned sample.
The above-requested details will be very helpful for us to
validate the reported query at our end and provide the solution as early as
possibleRegards,Naveen PalanivelAttachment: Blazor_68784dde.zip

SaravanaKumar Nararajan · Answer

We are using api to load the data into the grid using the SfDataManager Url property. We are using ODataV4Adaptor to load paginated data.

We have a dropdown and whenever the value changes, we update the "Query" of the sfgrid which loads new data into the grid.

I have modified the attached sample to give an idea on how we load the data without the api. With

DataSource property, I am unable to reproduce this issue.

Let me know if you have any other questions.

Attachment: Blazor_24_3_2023_modified_2677b85d.zip

Naveen Palanivel · Answer

Hi SaravanaKumar,

Based on your update, we understand that your
are using ODataV4 adaptor to render the grid data. We have prepared a sample
with ODataV4 sample and change the the dataSource on external button click. we
were unable to replicate the reported problem. To validate further please share
the runnable issue reproducible sample or try to modify the above mentioned
sample.Please let us
know if you have any concerns.Regards,Naveen PalanivelAttachment: OdataNew_32dbd63c.zip

SaravanaKumar Nararajan · Answer

I have modified the attached code to reproduce the issue. Run the application and then go to the last page (20th page in the grid). Now click on "Search" button. The grid tries to display the 1st page initially (for less than a sec) followed by the search data. In this sample, it happens very quickly since the data is loaded from a local file system.

In our case, this behavior is clearly visible when we have more number of columns (12+) and the data comes from a database through the api.

Let me know if you have further questions.

Attachment: OdataNew_529b7dba.zip

Naveen Palanivel · Answer

Hi SaravanaKumar,

From you update we understand that when we press the search button to load different data to grid by using query, initially the grid will briefly display the first page (for less than a second), and then it will load and display the search results. To overcome the issue , we set the go to pageasync in the Databound event . Please refer the code snippet and sample for your reference.

public bool flag = false;

private void SearchForProducts()

{

flag = true;

RemoteDataQueryGrid = new Query().Where("OrganizationName", "contains", "fff");

}

private void ClearSearch()

{

Grid.ClearFilteringAsync();

RemoteDataQueryGrid = new Query();

}

public List<Organization> Organizations { get; set; } = new List<Organization>();

public void DataBound()

{

if(flag == true)

{

Grid.GoToPageAsync(1);

}

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

Attachment: OdataNew_e1b16f69.zip

Andre Putz · Answer

If I got, the solution is to put flags to avoid double refreshes, am I right? Because the component really does this. So is needed to put workarounds for getting better performance, right?

Naveen Palanivel · Answer

Hi Andre,

Yes, in order to achieve better performance, it is necessary to implement
workarounds.Please let us know if you have any concerns.Regards,Naveen Palanivel

SaravanaKumar Nararajan · Answer

Hi Naveen,

Sorry for the late reply. The grid actually calls the api twice. First time for clearing the filter and/or to go to the first page. Second time for the new search. The grid actually displays the old search data without pagination and filters and then displays the new search data (That's why it looks like the grid refreshes twice)

With these flags, the grid will now call the api and load the data (with filter and will take you to the page of the old search data). Then again since we clear the filter and use gotopageasync(1), it will call the api to clear the filter and to go to the first page.

Is there a way to control when and how the grid calls the api? Like for any new search, call the api only once without any filter and load the first page by default.

Please let us know.

Regards,

SaravanaKumar