Gird: Enum filter dropdown - Selection

powertec-dan commented 2 weeks ago

Please help me to understand what I'm doing wrong.

The example seems so simple yet I must be missing something.

When I specify a field in a grid which is an Enum, the dropdown does not get filled with the values available from the Enum:

I'm using v3.0.0.preview-1 on a .NET 6 Server application. Chrome browser.

Cheers, Dan

gvreddy04 commented 2 weeks ago

@powertec-dan Thank you for using BlazorBootstrap. Please share a sample code to reproduce the issue with minimal steps. I'll take a look.

powertec-dan commented 1 week ago

I can get the sample code to work just fine. I thought it might have been something to do with the Enum being returned by an extension method. But I tested that theory and that worked as well. So, while I keep digging for what is different in my environment to the sample code, I did find a different problem.

When you have an enum that has enough elements to push the drop down below the bottom of the grid, it doesn't close up properly once the item is selected, and after that, any other enum drop down stops working as well..

`@page "/usertest"

<GridColumn TItem="User" HeaderText="Id" PropertyName="Id">
    @context.Id
</GridColumn>
<GridColumn TItem="User" HeaderText="User Name" PropertyName="Name">
    @context.Name
</GridColumn>
<GridColumn TItem="User" HeaderText="DOB" PropertyName="DOB">
    @context.DOB
</GridColumn>
<GridColumn TItem="User" HeaderText="Status" PropertyName="Status" FilterTextboxWidth="170">
    @context.Status
</GridColumn>
<GridColumn TItem="User" HeaderText="BigEnum" PropertyName="BigEnum" FilterTextboxWidth="170">
    @context.BigEnum
</GridColumn>

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

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

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

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

private IEnumerable<User> GetUsers()
{
    return new List<User>

{ new User { Id = 107, Name = "Alice", DOB = new DateOnly(1998, 11, 17), Status = UserStatus.Registered }, new User { Id = null, Name = "Bob", DOB = new DateOnly(1985, 1, 5), Status = UserStatus.Verified }, new User { Id = 106, Name = "John", DOB = new DateOnly(1995, 4, 17), Status = UserStatus.Registered }, new User { Id = 104, Name = "Pop", DOB = new DateOnly(1985, 6, 8), Status = UserStatus.Registered }, new User { Id = 105, Name = "Ronald", DOB = new DateOnly(1991, 8, 23), Status = UserStatus.VerificationPending }, new User { Id = 102, Name = "Line", DOB = new DateOnly(1977, 1, 12), Status = UserStatus.VerificationPending }, new User { Id = 101, Name = "Daniel", DOB = new DateOnly(1977, 1, 12), Status = UserStatus.Registered }, new User { Id = 108, Name = "Zayne", DOB = new DateOnly(1991, 1, 1), Status = UserStatus.Verified }, new User { Id = 109, Name = "Isha", DOB = null, Status = UserStatus.Verified }, new User { Id = 110, Name = "Vijay", DOB = new DateOnly(1990, 7, 1), Status = UserStatus.Verified }, }; }

public record class User
{
    public int? Id { get; set; }
    public string? Name { get; set; }
    public DateOnly? DOB { get; set; }
    public UserStatus Status { get; set; }
    public BigEnum BigEnum { get; set; } = BigEnum.BigEnum1;
}

public enum UserStatus
{
    Registered,
    VerificationPending,
    Verified
}

public enum BigEnum
{
    BigEnum1,
    BigEnum2,
    BigEnum3,
    BigEnum4,
    BigEnum5,
    BigEnum6,
    BigEnum7,
    BigEnum8,
    BigEnum9,
    BigEnum10,
    BigEnum11,
    BigEnum12,
    BigEnum13,
    BigEnum14,
    BigEnum15,
    BigEnum16,
    BigEnum17,
    BigEnum18,
    BigEnum19,
    BigEnum20,
    BigEnum21,
    BigEnum22,
    BigEnum23,
    BigEnum24,
    BigEnum25,
    BigEnum26,
    BigEnum27,
    BigEnum28,
    BigEnum29,
    BigEnum30,
    BigEnum31,
    BigEnum32,
    BigEnum33,
    BigEnum34,
    BigEnum35,
    BigEnum36,
    BigEnum37,
    BigEnum38,
    BigEnum39,
    BigEnum40
}

}`

powertec-dan commented 1 week ago

Some more notes: With the BigEnum, it works ok unless you scroll to an item in the drop down that is below the bottom of the grid. Once you have scrolled, then the dropdown doesn't clear any more. At that point all other enum drop downs are broken.

Next: I have another test that chains two enums via an extension method (Setting one main enum, derives a series of other enums via extensions methods). When doing this, the derived enum dropdown works once. Then all enum dropdowns no longer function even if the filter is cleared.

The code to setup the extension method is as below (The test just adds the Category column to the grid, so I won't post that again):

`
public record class User { public int? Id { get; set; } public string? Name { get; set; } public DateOnly? DOB { get; set; } public UserStatus Status { get; set; } public UserCategory Category => Status.GetCategory(); public BigEnum BigEnum { get; set; } = BigEnum.BigEnum1; }

public enum UserStatus
{
    Registered,
    VerificationPending,
    Verified
}

public enum UserCategory
{
    NotEnrolled,
    Enrolled,
    Disqualified
}

public enum BigEnum
{
    BigEnum1,
    BigEnum2,
    BigEnum3,
    BigEnum4,
    BigEnum5,
    BigEnum6,
    BigEnum7,
    BigEnum8,
    BigEnum9,
    BigEnum10,
    BigEnum11,
    BigEnum12,
    BigEnum13,
    BigEnum14,
    BigEnum15,
    BigEnum16,
    BigEnum17,
    BigEnum18,
    BigEnum19,
    BigEnum20,
    BigEnum21,
    BigEnum22,
    BigEnum23,
    BigEnum24,
    BigEnum25,
    BigEnum26,
    BigEnum27,
    BigEnum28,
    BigEnum29,
    BigEnum30,
    BigEnum31,
    BigEnum32,
    BigEnum33,
    BigEnum34,
    BigEnum35,
    BigEnum36,
    BigEnum37,
    BigEnum38,
    BigEnum39,
    BigEnum40
}

public static class UserStatusExtensions
{
    public static UserCategory GetCategory(this UserStatus status)
    {
        return status switch
        {
            UserStatus.Registered => UserCategory.NotEnrolled,
            UserStatus.VerificationPending => UserCategory.NotEnrolled,
            UserStatus.Verified => UserCategory.Enrolled,
            _ => UserCategory.Disqualified
        };
    }
}
`

gvreddy04 commented 1 week ago

@powertec-dan Thank you for your detailed feedback. I'll fix this.

retslig commented 1 week ago

I have the same problem, my enum for Status does not show anything when I click on it. See screen shot below.

       <Grid TItem="Person"
              AllowRowClick="true"
              AllowFiltering="true"
              AllowSorting="true"
              AllowPaging="true"
              PageSize="25"
              Class="table table-hover table-bordered table-striped"
              DataProvider="PersonDataProvider"
              HeaderRowCssClass="bg-primary text-white border-bottom-0"
              OnRowClick="OnRowClick"
              Responsive="true">

            <GridColumn TItem="Person" HeaderText="FirstName" PropertyName="FirstName" SortString="FirstName" SortKeySelector="item => item.FirstName" FilterTextboxWidth="100">
                @context.FirstName
            </GridColumn>
            <GridColumn TItem="Person" HeaderText="LastName" PropertyName="LastName" SortString="LastName" SortKeySelector="item => item.LastName" FilterTextboxWidth="100" IsDefaultSortColumn="true" SortDirection="SortDirection.Descending">
                @context.LastName
            </GridColumn>
            <GridColumn TItem="Person" HeaderText="Status" PropertyName="Status" SortString="Status" SortKeySelector="item => item.Status" FilterTextboxWidth="100">
                @context.Status
            </GridColumn>
            <GridColumn TItem="Person" HeaderText="CompanyApproved" PropertyName="CompanyApproved" SortString="CompanyApproved" SortKeySelector="item => item.CompanyApproved" FilterTextboxWidth="100">
                @context.CompanyApproved
            </GridColumn>
        </Grid>`

public class Person : LmsBaseEntity
{
    public string? FirstName { get; set; }
    public string? LastName { get; set; }
    public string? Title { get; set; }
    public string? ProfileImage { get; set; }
    public bool? AgeVerification { get; set; }
    public bool? TermsVerification { get; set; }
    public StatusType Status { get; set; }
    ...

public enum StatusType
{
    Active = 1,
    Disabled = 2
}

Missing Enums

vikramlearning / blazorbootstrap

Gird: Enum filter dropdown - Selection #757