Hello everyone, I am pretty new in Blazor and Radzen components and I am still learning it but I would like to share what I found looking at your example grid filter On the filter on WorkStatus on the second table if I choose some values from the list and then click clear the filter not get cleared. Anyway I used the example and tried to learn little bit for my project and I am facing a strange behaviour, my grid object load all data from a simple table called CheckList with various columns with some string and numbers, one of the columns on this table is a foreign key for another table that I use for keep a simple text description (DescrizioneTipo), the table is called TipoCheckList. I had to filter this column using a custom filter in the RadzenDataGridColumn like the code here (I'm using the last 4.29.2):
<RadzenDataGridColumn TItem="Checklist" Property="IdTipoChecklist" Title="Tipo" Width="280px" FilterProperty="IdTipoChecklist"
Type="typeof(IEnumerable<int>)" FilterOperator="FilterOperator.Custom" LogicalFilterOperator="@tipochecklistOperator">
<FilterTemplate Context="column">
<div class="rz-grid-filter">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Stretch" JustifyContent="JustifyContent.SpaceBetween">
<span class="rz-grid-filter-label">Filter</span>
<RadzenSelectBar Style="margin-top:-6px;" Change="@(()=>OnTipochecklistChange(column))" @bind-Value=@tipochecklistOperator TValue="LogicalFilterOperator">
<Items>
<RadzenSelectBarItem Text="Any" Value="@(LogicalFilterOperator.Or)" />
<RadzenSelectBarItem Text="All" Value="@(LogicalFilterOperator.And)" />
</Items>
</RadzenSelectBar>
</RadzenStack>
<RadzenListBox @ref="listboxtipochecklist" AllowClear=true @bind-Value=@selectedtipi Multiple="true" AllowSelectAll=true Style="width:100%; height:200px;"
Change="@(()=>OnTipochecklistChange(column))" Data=@listatipochecklist TextProperty="DescrizioneTipo" ValueProperty="IdTipoChecklist" />
<div class="rz-grid-filter-buttons">
<RadzenButton ButtonStyle="ButtonStyle.Secondary" Text="Clear" Click="@(() => TipochecklistFilterClear(column))" />
<RadzenButton ButtonStyle="ButtonStyle.Primary" Text="Close" Click="@(() => TipochecklistFilterClose(column))" />
</div>
</div>
</FilterTemplate>
<Template>
@(context.IdTipoChecklist != null ? listatipochecklist.FirstOrDefault(i => i.IdTipoChecklist == context.IdTipoChecklist).DescrizioneTipo : Enumerable.Empty<string>())
</Template>
<EditTemplate Context="_checklist">
<RadzenDropDown @bind-Value="_checklist.IdTipoChecklist" TextProperty="DescrizioneTipo" ValueProperty="IdTipoChecklist" Data="@listatipochecklist"
Style="width: 100%; max-width: 280px;" Name="DropDownTextValueProperties" />
</EditTemplate>
</RadzenDataGridColumn>
The data for the filter coming is declared like this:
private List<TipoChecklist> listatipochecklist = new List<TipoChecklist>();
private IEnumerable<int>? selectedtipi;
I get a reference for the radzenlistbox too and I will explain later why.
RadzenListBox<IEnumerable<int>?> listboxtipochecklist;
I added the event handlers for change, close and clear filter
async Task OnTipochecklistChange(RadzenDataGridColumn<Checklist> column)
{
if (selectedtipi?.Any() == true)
{
whereExpression = string.Join($" {Enum.GetName(typeof(LogicalFilterOperator), tipochecklistOperator).ToLowerInvariant()} ",
selectedtipi.Select(s => $"IdTipoChecklist == \"{s}\" "));
}
else
{
whereExpression = null; // Change 1
selectedtipi = null;
}
await column.SetCustomFilterExpressionAsync(whereExpression);
}
private async Task TipochecklistFilterClear(RadzenDataGridColumn<Checklist> column)
{
if (selectedtipi != null)
{
selectedtipi = null;
listboxtipochecklist.Reset(); // Change 2
await OnTipochecklistChange(column);
}
await column.CloseFilter();
}
private async Task TipochecklistFilterClose(RadzenDataGridColumn<Checklist> column)
{
await column.CloseFilter();
}
So without the comments with CHANGE the behaviour is like this,
I load grid, open the filter, select one option for the custom filtered column and close. open the filter again and CLEAR, open the filter again and select another option and as magic the previous option become selected as well as the new one. I inspected the selectedtipi and seems that it get populated again from the previous selected value (even more then once, because if I select 2 times the same column it will display another IENUMERABLE item with the same value selected)
I was able to fix it only using the 2 changes I show in code, the first one on the whereExpression I set NULL because if keep "" empty string the icon of filter will remain highlighted like if a filter is still present and active. The last change was the only fix that prevent the multiple items appear checked even when I clear the selectedtipi enumerable list.
I am sorry for my bad english I hope you understand what I did and if I did something wrong please tell me how to fix it. Best regards,