Filter Doesn't Open

Radzen.Blazor Components
1

Technically it opens, but then gets closed.

On the Save Settings Page:

Hide the Title column
Click on the Employee ID filter, and it doesn't open.

In `RadzenDataGridHeaderCell.razor#ToggleFilter, the close for other popups is closing the popup it just opened.

There's something about Title's headerCell... hidden it has Employee ID's headerCell

Title - headerCell: Employee ID 1 - UniqueID: x1HVuctg2E <------------- has the same popup 
Employee ID - headerCell: Employee ID 1 - UniqueID: x1HVuctg2E <------------- has the same popup

unhidden:

Title - headerCell: Title 1 - UniqueID: x1HVuctg2E
Employee ID - headerCell: Employee ID 2 - UniqueID: EBbNnpE9SE

            Grid.allColumns
                .ToList()
                .ForEach(x => Console.WriteLine($"ToggleFilter: {x.Title} - headerCell: {x.headerCell?.ColumnIndex} - UniqueID: {x.headerCell?.popup?.UniqueID}"));
2

You can remove FilterPopupRenderMode="PopupRenderMode.OnDemand" setting until we fix this - we will do our best to include fix in our next update on Monday.

1 Like
3

Was this fixed? I'm not sure if its related to this or not, but the CheckBoxList popup isn't opening after hiding/unhiding columns.

If you use the code pasted below:

  • Hide the Employee column
  • Unhide the Employee column
  • Click the Title Filter and it doesnt open
  • Hide the Employee column again
  • Filter now opens, but filtering gives an error

Happens when FilterPopupRenderMode is set to either Initial or OnDemand

I used Blazor DataGrid Component - Multiple Selection | Free UI Components by Radzen as the base and added AllowColumnPicking and FilterMode.CheckBoxList

@using Radzen
@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inherits DbContextPage

<RadzenCard Variant="Variant.Outlined" class="rz-my-4">
    <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
        <RadzenCheckBox @bind-Value=@allowRowSelectOnRowClick Name="CheckBox1" />
        <RadzenLabel Text="Allow row select on row click" Component="CheckBox1" />
        <RadzenButton Text="Clear selected rows" Click="@(args => selectedEmployees = null)" />
    </RadzenStack>
</RadzenCard>

<RadzenDataGrid @ref="grid" AllowRowSelectOnRowClick="@allowRowSelectOnRowClick" AllowFiltering="true" FilterPopupRenderMode="PopupRenderMode.OnDemand" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowPaging="true" PageSize="4"
            AllowSorting="true" Data="@employees" ColumnWidth="200px"


            FilterMode="FilterMode.CheckBoxList"
            AllowColumnPicking="true"



            SelectionMode="DataGridSelectionMode.Multiple" @bind-Value=@selectedEmployees >
    <Columns>
        <RadzenDataGridColumn Width="60px" Sortable="false" Filterable="false">
            <HeaderTemplate>
                <RadzenCheckBox TabIndex="-1" TriState="false" TValue="bool?" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "Select all items" }})"
                   Value="@(selectedEmployees == null || selectedEmployees?.Any() != true ? false : !employees.All(i => selectedEmployees.Contains(i)) ? null : employees.Any(i => selectedEmployees.Contains(i)))"
                   Change="@(args => selectedEmployees = args == true ? employees.ToList() : null)" />
            </HeaderTemplate>
            <Template Context="data">
                <RadzenCheckBox TabIndex="-1" TriState="false" Value="@(selectedEmployees != null && selectedEmployees.Contains(data))" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "Select item" }})"
                    TValue="bool" Change=@(args => { if(!allowRowSelectOnRowClick) { grid.SelectRow(data); }}) />
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="@nameof(Employee.Photo)" Title="Employee" Sortable="false" Filterable="false">
            <Template Context="data">
                <RadzenImage Path="@data.Photo" Style="width: 40px; height: 40px;" class="rz-border-radius-2 rz-me-2" AlternateText="@(data.FirstName + " " + data.LastName)" />
                @data.FirstName @data.LastName
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="@nameof(Employee.Title)" Title="Title" />
        <RadzenDataGridColumn Property="@nameof(Employee.EmployeeID)" Title="Employee ID" />
        <RadzenDataGridColumn Property="@nameof(Employee.HireDate)" Title="Hire Date" FormatString="{0:d}" />
        <RadzenDataGridColumn Property="@nameof(Employee.City)" Title="City" />
        <RadzenDataGridColumn Property="@nameof(Employee.Country)" Title="Country" />
    </Columns>
</RadzenDataGrid>

@code {
    bool allowRowSelectOnRowClick = true;
    IEnumerable<Employee> employees;
    IList<Employee> selectedEmployees;
    RadzenDataGrid<Employee> grid;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        employees = dbContext.Employees;
    }
}
4

Yes, here is the commit:

5

Ok. Do you want me to create a new post for this error? Did you try the snippet?

6

No need to open different thread, still looks like different issue - I was able to reproduce it.

1 Like
7

Fixed in our just released update.

8

Thanks for the fast update.
Now applying a filter gives an error:

Add FilterMode=FilterMode.CheckBoxList to Blazor DataGrid Component - Multiple Selection | Free UI Components by Radzen

and try to apply a filter on the Title column

9

The error is raised since the query cannot be translated to SQL - if you use ToList() you will not get any errors:

image
image1920×1080 181 KB

image
image1920×1080 240 KB