Pagination - Pagination should reset to first page when column sorting occurs #1099

New Issue

claunia · 2026-01-29T17:48:55Z

claunia commented

2026-01-29 17:48:55 +00:00

Originally created by @djatkinsrealis on GitHub (Jan 19, 2024).

It is standard behavior e.g. such as in eBay or Amazon website dashboards, to reset to the first page when sorting (or filtering) changes. For instance if you sort by a value column, you expect to see the lowest or highest value displayed first, whereas now you see whatever value happens to occur at the top of current page number you were on. I note Telerik's Grid has the same issue.

Currently sorting does not alter pagination (specifically the current page number), leaving you on a page that does not relate to your sorting preference.

We propose resetting the current page number to the first page number, when the sorting changes.

Note: I attempted to implement this change, simply using conditional awaited calls to the 2 pagers async FirstPage() methods, and testing the change within the DataGrid demos, but it resulted in the pages not responding to paging, or sorting, or even the demo menus, after a few selections. Seemed like a deadlock, so instead I made the changes as show below (not await and reset the current page). I could use some advice on the correct way to implement such a change, but will post a PR of this change for reference/testing.

    /// <summary>
    /// Orders the DataGrid by property name.
    /// </summary>
    /// <param name="property">The property name.</param>
    public void OrderBy(string property)
    {
        var p = IsOData() ? property.Replace('.', '/') : PropertyAccess.GetProperty(property);

        var column = allColumns.ToList().Where(c => c.GetSortProperty() == property).FirstOrDefault();

        if (column != null)
        {
            SetColumnSortOrder(column);
            topPager?.FirstPage();
            bottomPager?.FirstPage();
            CurrentPage = 0;
            Sort.InvokeAsync(new DataGridColumnSortEventArgs<TItem>() { Column = column, SortOrder = column.GetSortOrder() });
            SaveSettings();
        }

        if (LoadData.HasDelegate && IsVirtualizationAllowed())
        {
            Data = null;
#if NET5_0_OR_GREATER
            ResetLoadData();
#endif
        }

        InvokeAsync(ReloadInternal);
    }

Originally created by @djatkinsrealis on GitHub (Jan 19, 2024). It is standard behavior e.g. such as in eBay or Amazon website dashboards, to reset to the first page when sorting (or filtering) changes. For instance if you sort by a value column, you expect to see the lowest or highest value displayed first, whereas now you see whatever value happens to occur at the top of current page number you were on. I note Telerik's Grid has the same issue. Currently sorting does not alter pagination (specifically the current page number), leaving you on a page that does not relate to your sorting preference. **We propose resetting the current page number to the first page number, when the sorting changes.** Note: I _attempted_ to implement this change, simply using conditional awaited calls to the 2 pagers _async_ FirstPage() methods, and testing the change within the DataGrid demos, but it resulted in the pages not responding to paging, or sorting, or even the demo menus, after a few selections. Seemed like a deadlock, so instead I made the changes as show below (not await and reset the current page). I could use some advice on the correct way to implement such a change, but will post a PR of this change for reference/testing. /// <summary> /// Orders the DataGrid by property name. /// </summary> /// <param name="property">The property name.</param> public void OrderBy(string property) { var p = IsOData() ? property.Replace('.', '/') : PropertyAccess.GetProperty(property); var column = allColumns.ToList().Where(c => c.GetSortProperty() == property).FirstOrDefault(); if (column != null) { SetColumnSortOrder(column); topPager?.FirstPage(); bottomPager?.FirstPage(); CurrentPage = 0; Sort.InvokeAsync(new DataGridColumnSortEventArgs<TItem>() { Column = column, SortOrder = column.GetSortOrder() }); SaveSettings(); } if (LoadData.HasDelegate && IsVirtualizationAllowed()) { Data = null; #if NET5_0_OR_GREATER ResetLoadData(); #endif } InvokeAsync(ReloadInternal); }

claunia closed this issue

2026-01-29 17:48:55 +00:00

claunia commented

2026-01-29 17:48:56 +00:00

@enchev commented on GitHub (Jan 19, 2024):

Hi @djatkinsrealis,

Changing this behavior will be huge breaking change for a lot of Radzen.Blazor users which is highly undesirable. You can easily achieve the same using the provided API:

<RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center" Class="rz-p-4 rz-border-radius-1" Style="border: var(--rz-grid-cell-border);">
    <RadzenCheckBox @bind-Value="@resetPaging" Name="resetPaging" />
    <RadzenLabel Text="Reset to first page on sort" Component="resetPaging" Class="rz-me-6" />
</RadzenStack>

<RadzenDataGrid @ref="grid" AllowColumnResize="true" PageSize="5" AllowPaging="true" 
    AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="400px" Sort="@OnSort">
    <Columns>
        <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" SortOrder="SortOrder.Descending" Width="150px" />
        <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px" />
        <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" Width="150px" />
        <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" Width="150px" />
        <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
    </Columns>
</RadzenDataGrid>

@code {
    RadzenDataGrid<Employee> grid;
    IEnumerable<Employee> employees;
    bool resetPaging;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        employees = dbContext.Employees;
    }

    async Task OnSort(DataGridColumnSortEventArgs<Employee> args)
    {
        if (resetPaging)
        {
            await grid.FirstPage();
        }
    }
}

@enchev commented on GitHub (Jan 19, 2024): Hi @djatkinsrealis, Changing this behavior will be huge breaking change for a lot of Radzen.Blazor users which is highly undesirable. You can easily achieve the same using the provided API: ``` <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center" Class="rz-p-4 rz-border-radius-1" Style="border: var(--rz-grid-cell-border);"> <RadzenCheckBox @bind-Value="@resetPaging" Name="resetPaging" /> <RadzenLabel Text="Reset to first page on sort" Component="resetPaging" Class="rz-me-6" /> </RadzenStack> <RadzenDataGrid @ref="grid" AllowColumnResize="true" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="400px" Sort="@OnSort"> <Columns> <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" SortOrder="SortOrder.Descending" Width="150px" /> <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px" /> <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" Width="150px" /> <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" Width="150px" /> <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" /> </Columns> </RadzenDataGrid> @code { RadzenDataGrid<Employee> grid; IEnumerable<Employee> employees; bool resetPaging; protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); employees = dbContext.Employees; } async Task OnSort(DataGridColumnSortEventArgs<Employee> args) { if (resetPaging) { await grid.FirstPage(); } } } ```

claunia commented

2026-01-29 17:48:56 +00:00

@djatkinsrealis commented on GitHub (Jan 19, 2024):

@enchev fair enough, and thanks for the alternative fix. I have pushed an additional PR to retain default behavior. Saves repeating the above code for every grid 👍

@djatkinsrealis commented on GitHub (Jan 19, 2024): @enchev fair enough, and thanks for the alternative fix. I have pushed an additional PR to retain default behavior. Saves repeating the above code for every grid 👍

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1099