EnableQueryString in SfGrid

Hi,

Could you please provide a demo of what EnableQueryString does in GridPageSettings? 


Thanks in advance
Eugene

5 Replies 1 reply marked as answer

VN Vignesh Natarajan Syncfusion Team August 17, 2020 08:32 AM UTC

Hi Eugene,  
 
Greetings from Syncfusion support.  
 
Query: “Could you please provide a demo of what EnableQueryString does in GridPageSettings?  
 
EnableQueryString property of GridPageSettings is used to send the current page settings along with the page url. So that while navigation from different page to Grid, Grid’s current page will be defined based on the value passed in the url. (i.e.) {defaulturl}/2 will render the Grid will second page records, when paging is enabled. 
 
Now this behavior can be achieved using CurrentPage property and OnActionBegin event of the Grid. In OnActionBegin event, we have prevented the default paging action and updated the url querystring to fetch the corresponding page records. 
 
Refer the below code example.  
 
@page "/" 
@page "/{CurrentPage:int}" 
  
@inject NavigationManager Navigate 
@using Syncfusion.Blazor 
@using Syncfusion.Blazor.Data 
@using Syncfusion.Blazor.Grids 
@using BlazorApp1.Data 
  
<SfGrid TValue="Orders" AllowPaging="true"> 
    <GridEvents OnActionBegin="ActionBegin" TValue="Orders"></GridEvents> 
    <GridPageSettings CurrentPage="@CurrentPage"></GridPageSettings> 
    <SfDataManager Url="api/Values" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager> 
. . .. . . . 
</SfGrid> 
  
@code{ 
    public void ActionBegin(ActionEventArgs<Orders> Args) 
    { 
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Paging) 
        { 
            Args.Cancel = true// prevent the default action. 
            Navigate.NavigateTo($"/{Args.CurrentPage}"); // navigate to required page. 
        } 
    } 
    private int _page = 1; 
    [Parameter] 
    public int CurrentPage 
    { 
        get { return _page; } 
        set { _page = value == 0 ? 1 : value; } 
    } 
} 
 
 
Kindly download the sample from below  
 
 
Please get back to us if you have further queries.  
    
Regards, 
Vignesh Natarajan 
 


Marked as answer

EK Eugene Kudryavtsev August 17, 2020 09:03 AM UTC

Hi Vignesh,

Thank you very much for the reply and the code sample.

Initially, I asked the question because I'm implementing a master-detail with SfGrid as master and a separate page as details, much like the one for doctors list/details in your appointment-planer demo (https://blazor.syncfusion.com/showcase/appointmentplanner/doctors). A common scenario is the one where you have lots of records, the user filters them out and goes to a certain page (let's say page 3), then clicks on one of the filtered records and lands on the details page of that record. Naturally, I'd like the user to be able to navigate back to the filtered and paginated list that was previously displayed. 

Therefore, the EnableQueryString only part of the job. 

So another question: how can I have the filtered/paginated URL in the browser history, so that EnableQueryString is set to the filtered/paginated records?

Kind regards
Eugene


VN Vignesh Natarajan Syncfusion Team August 18, 2020 10:48 AM UTC

Hi Eugene,  
 
Thanks for the update.  
 
Query: “Naturally, I'd like the user to be able to navigate back to the filtered and paginated list that was previously displayed.  how can I have the filtered/paginated URL in the browser history, 
 
We understand that you want to maintain the state of the Grid once you navigate back to Grid page from other page. We suggest you to achieve your requirement using Persistence (State manintenance) feature of Grid. State maintenance is used to maintain grid state using the browser local storage. Refer our UG documentation for your reference 
 

Kindly get back to us if you have further queries or if above solution does not resolve your query.  
 
Regards, 
Vignesh Natarajan  
  



MC Mason Channer September 19, 2021 07:57 PM UTC

If I do Args.Cancel=true to prevent default action. Then PageSizes selection does not work and shows negative values.

Why is this? and why do we need to prevent the default action when using QueryString?


public void ActionBegin(ActionEventArgs<Orders> Args)
{
if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Paging)
{
Args.Cancel = true; // prevent the default action.
Navigate.NavigateTo($"/{Args.CurrentPage}"); // navigate to required page.
}
}
Screenshot 2021-09-19 125643.png


VN Vignesh Natarajan Syncfusion Team September 20, 2021 07:16 AM UTC

Hi Mason, 
 
Greetings from Syncfusion support.  
 
Query: “Why is this? and why do we need to prevent the default action when using QueryString? 
 
By default when EnableQuerySring is enabled in Grid, current page details will passed as parameter in URL string (Remote DataSource with SfDataManager), So that we can easily navigate to that particular page by typing the page number in page url . We have achieved that behavior by preventing the default paging and using NavigateTo NavigationManager.  
 
So that, when next page button is clicked in  Grid pager, default pager is prevented. NavigationManager is used to Navigate between Grid pages. We are not able to reproduce the reported issue (sample provided in first update) at our end. So kindly share more details about the issue you are facing. It will be very helpful for us to validate the reported query at our end and provide solution as early as possible.   
 
Regards, 
Vignesh Natarajan 


Loader.
Up arrow icon