vikramlearning / blazorbootstrap

An Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.
https://docs.blazorbootstrap.com/
Apache License 2.0
686 stars 33 forks source link

Grid Filter does not work. #768

Closed PristinoVivek closed 3 months ago

PristinoVivek commented 3 months ago

Have used your sample code for Grid filtering. Visually shows Filter icon but missing astrics, on typing filter criteria it does not do anything.

adding sample code used:

@page "/GridExamples"

<Grid @ref="grid" TItem="Employee1" Class="table table-hover table-bordered table-striped" DataProvider="EmployeesDataProvider" AllowFiltering="true" Responsive="true">

<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>

@code { BlazorBootstrap.Grid grid = default!; private IEnumerable employees = default!;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);
}

private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
{
    if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
        employees = GetEmployees(); // call a service or an API to pull the employees

    return await Task.FromResult(request.ApplyTo(employees));
}

private IEnumerable<Employee1> GetEmployees()
{
    return new List<Employee1>
    {
        new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
        // new Employee1 { Id = null, 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 },
        new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
        new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
        new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
        // new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = null, IsActive = true },
        new Employee1 { Id = 110, Name = "Vijay", Designation = null, DOJ = new DateOnly(1990, 7, 1), IsActive = true },
    };
}

public class Employee1
{
    public int Id;
    public string Name;
    public string Designation;
    public DateOnly DOJ;
    public bool IsActive;

}

}

image

gvreddy04 commented 3 months ago

@PristinoVivek Thank you for using BlazorBootstrap. Please provide the below details.

.NET Version: [e.g. .NET 6, .NET 7, .NET 8] BlazorBootstrap: [e.g. 2.0.0, 2.1.0, 2.2.0, 3.0.0-preview1] Blazor WebAssembly / Server: [e.g. WebAssembly, Server] Blazor Interactive Render Mode: [e.g. Auto, Server, WebAssembly, None] Blazor Interactivity Location: [e.g. Global, Per page/component] Link to the example referred:

PristinoVivek commented 3 months ago

@gvreddy04 - Thank you for the response. Please find below details as requested.

.NET Version: .NET 8 BlazorBootstrap: 3.0.0-preview1 Blazor WebAssembly / Server: Server Blazor Interactive Render Mode: Server Blazor Interactivity Location: Global Link to the example referred: https://demos.blazorbootstrap.com/grid#data-parameter-assign-collection (used first one: Client side filtering, paging, and sorting)

Lucasharskamp commented 3 months ago

I've had this issue as well; the filter request does appear in the GridDataProviderRequest so that isn't the problem.

gvreddy04 commented 3 months ago

@PristinoVivek I can replicate the issue. The issue is with the Employee1 model properties. Please see the expected model and screenshots for reference.

Expected Model

{
    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; }
}

Screenshots:

image

image

PristinoVivek commented 3 months ago

Thank you. Issue Resolved.