Boolean columns in DataGrid - Filter does not work properly

Radzen.Blazor Components
1

Hello Team,

I wanted to report that, when the Filtermode.Simple is active and you have a bool column, the checkbox control that filters data on top of the column, does not work properly.

In particular, when you click it, data are filtered, but the control always shows the "unchecked" status.

Thank you. Best regards,

2

Worked normally on our demo:

image
image1920×1080 256 KB

image
image1920×1080 268 KB

3

Hello @enchev

this is very very strange... I found the problem in my project, so before opening this thread I did a test with an empty project.

I have created a new Blazor Server Project in .NET 5.0, and added a reference to the Radzen.Blazor library, version 3.13.4.
Then I modified the standard example of Microsoft in the "fetchdata" page, using the RadzenDataGrid instead the table. Also in that case I have the problem.

Here the code:

@page "/fetchdata"

@using TestForRadzenMenuAndDialogs.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <RadzenDataGrid TItem="WeatherForecast" Data="@forecasts"
                    AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                    FilterMode="FilterMode.Simple" AllowPaging="true"
                    AllowSorting="true" PageSize="3">
        <Columns>

            <RadzenDataGridColumn TItem="WeatherForecast" Title="Date" Property="Date"></RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="WeatherForecast" Title="TemperatureC" Property="TemperatureC"></RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="WeatherForecast" Title="TemperatureF" Property="TemperatureF"></RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="WeatherForecast" Title="Summary" Property="Summary"></RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="WeatherForecast" Title="IsHot" Property="IsHot"></RadzenDataGridColumn>

        </Columns>
    </RadzenDataGrid>
}

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

In the example I have just added a property to the Forecast Class:

 public bool IsHot => TemperatureC > 21;

I have just used the component as is. Do you have any advice?

Thank you.

4

Maybe you need normal property with getter and setter.

5

I tried:

 public bool IsHot { get; set; } = true;

same behavior... I am perplexed... :thinking:
I haven't done anything special, the project is empty and my code looks similar to yours. There must be something wrong somewhere else... I will compare it with your demo.

6

Good morning @enchev,

I have found where the problem could be.
In the demo, in the_Host.cshml page there is:

    <link href="_content/Radzen.Blazor/css/standard.css" rel="stylesheet">
    <!-- Include the base version if you are using Bootstrap already
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="_content/Radzen.Blazor/css/default-base.css" rel="stylesheet">
-->

In the demo you use the standard.css file. In my project, since I already use bootstrap I use the default-base.css.

If I use the standard.css file the component works, but actually I'm using bootstrap, so I I should continue to use the default-base.css and the component should work also in this case.

What do you think?

Thank you. Best regards,

7

Filtering is unrelated to CSS. Why exactly do you think that filtering does not work?

8

Because with the default-base.css + bootstrap.min.css the icon in the checkbox header of the column does not appear. The filter works, but the checkbox is always empty:

example_20211209

Thank you,

9

Got it. There is indeed a problem in all themes but Standard. Use this CSS rule as a fix:

.rz-cell-filter .rz-cell-filter-label .rz-chkbox-box.rz-state-active {
   background-color: #3f8cb3;
}
10

Thank you @korchev. It works! :blush: