Removing last item from the last page of Grid does not navigate back to the new last page

[laurentiustamate94]

Describe the bug User experience is incomplete if user manipulates the contents of a Grid.

To Reproduce Steps to reproduce the behavior:

1. Click "Add Employee" button
2. Navigate to the 2nd page
3. Click the "Remove Employee" button
4. Pagination updates to have only one page but does not navigate back to it. Numbering of items is also wrong.

Expected behavior When the last element of the last page gets removed, user should be navigated back to the "new" last page and page numbering should be updated.

Screenshots

Versions (please complete the following information):

• .NET Version: .NET 8
• BlazorBootstrap: 2.2.1
• Blazor Interactive Render Mode: Auto
• Blazor Interactivity Location: Global

Sample code

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="AddEmployee"> Add Employee </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Danger" @onclick="RemoveEmployee"> Remove Employee </Button>

<Grid @ref="grid" TItem="Employee1" AllowPaging="true" PageSize="5" class="table table-hover table-bordered table-striped mt-3" Data="employees">
    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
        @context.Id
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
        @context.Name
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
        @context.Designation
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
        @context.DOJ
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
        @context.IsActive
    </GridColumn>
</Grid>

@code {
    Grid<Employee1> grid = default!;
    private List<Employee1>? employees;

    protected override void OnInitialized()
    {
        employees = new List<Employee1> {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }
        };
    }

    private async Task AddEmployee()
    {
        // for the same employees collection, we are adding an object
        // explicit grid refresh required
        employees!.Add(CreateEmployee());
        await grid.RefreshDataAsync();
    }

    private async Task RemoveEmployee()
    {
        employees!.Remove(employees.Last());

        await grid.RefreshDataAsync();
    }

    private Employee1 CreateEmployee()
    {
        var emp = new Employee1();
        emp.Id = employees!.Max(x => x.Id) + 1;
        emp.Name = $"Employee {emp.Id}";
        emp.Designation = $"QA Engineer {emp.Id}";
        emp.DOJ = new DateOnly(new Random().Next(1970, 2000), new Random().Next(1, 12), new Random().Next(1, 25));
        emp.IsActive = true;
        return emp;
    }

    public record class Employee1
    {
        public int Id { get; set; }
        public string? Name { get; set; }
        public string? Designation { get; set; }
        public DateOnly DOJ { get; set; }
        public bool IsActive { get; set; }
    }
}

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Edge
• Version: 124.0.2478.51 (Official build) (64-bit)

[gvreddy04]

@laurentiustamate94 Thank you for using BlazorBootstrap. We will investigate your scenario.