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

Gird: Enum filter dropdown - Selection #757

Closed
powertec-dan opened this issue Jun 17, 2024 · 5 comments · Fixed by #805
Closed

Gird: Enum filter dropdown - Selection #757

powertec-dan opened this issue Jun 17, 2024 · 5 comments · Fixed by #805
Assignees
Labels

Comments

@powertec-dan
Copy link

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:

image

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

Cheers,
Dan

@gvreddy04
Copy link
Contributor

@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
Copy link
Author

powertec-dan commented Jun 17, 2024

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

image `@page "/usertest"

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

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

powertec-dan commented Jun 17, 2024

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

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

@gvreddy04 gvreddy04 changed the title No items in Enum filter dropdown Gird: Enum filter dropdown - Selection Jun 21, 2024
@gvreddy04 gvreddy04 added the bug Something isn't working label Jun 21, 2024
@gvreddy04 gvreddy04 added this to the 3.0.0-preview.2 milestone Jun 21, 2024
@gvreddy04 gvreddy04 self-assigned this Jun 21, 2024
@retslig
Copy link

retslig commented Jun 21, 2024

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

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

Successfully merging a pull request may close this issue.

3 participants