Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
laurentiustamate94 opened this issue Apr 27, 2024 · 1 comment

Comments

@laurentiustamate94
Copy link

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
image

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants