Pagination stays at bottom

Hi All,

I'm using SfGrid whith Allow Paging="true", everything loads fine and I got multiples pages.

When I scroll down until the last row of page 1 everything is fine, but when I click on page 2 on the pagination buttons at the bottom and the grid goes to the second page, the grid stays on the last position that was on the page 1, the last few rows (bottom of the list) instead of going to the top again so I can see the first rows from top, and scrolls down again.

If you guys can help me to figure out what settings need to add to when go to next page the list stays on top always.


Thanks 

Regards,

Luis


1 Reply 1 reply marked as answer

PS Prathap Senthil Syncfusion Team June 5, 2023 07:10 AM UTC

Hi Luis,

We understand that when you scroll down to the last row on page 1 and then click on page 2 using the pagination buttons, the grid remains at the last position from page 1 instead of going back to the top. You would like the grid to always start from the top when navigating to the next page. To achieve the desired behavior, we recommend using the OnActionBegin event with the request type "paging" and the Grid's public method ScrollIntoViewAsync().Kindly refer to the below code snippet and sample for your reference.

 

<SfGrid @ref="Grid" TValue="Order" DataSource="@Orders" AllowPaging="true" Height="300">

    <GridPageSettings PageSizes="true"></GridPageSettings>

    <GridEvents OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents>

</SfGrid>

 

@code {

    public List<Order> Orders { get; set; }

    SfGrid<Order>? Grid { get; set; }

    protected override void OnInitialized()

    public void ActionBeginHandler(ActionEventArgs<Order> args)

    {

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Paging && args.PreviousPage > 0)

        {

            Grid.ScrollIntoViewAsync(0,0);

        }

    }

}


Documentation:
https://blazor.syncfusion.com/documentation/datagrid/events#onactionbegin
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ScrollIntoViewAsync_System_Int32_System_Int32_System_Int32_

Regards,
Prathap S


Attachment: DataGrid_63a1357e.zip

Marked as answer
Loader.
Up arrow icon