How to capture OnClick of RadzenDataGridColumn's filter?

Radzen.Blazor Components
1

Consider Radzen's FilterOperator.Custom example: Blazor DataGrid Component - Custom Filtering | Free UI Components by Radzen

<RadzenDataGridColumn Title="Work Status" Property="WorkStatus" Type="typeof(IEnumerable<string>)" Sortable=true
                      FilterValue="@selectedWorkStatus" FilterOperator="FilterOperator.Custom" LogicalFilterOperator="@workStatusOperator">
    <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="@(()=>OnSelectedWorkStatusChange(column))" @bind-Value=@workStatusOperator TValue="LogicalFilterOperator">
                    <Items>
                        <RadzenSelectBarItem Text="Any" Value="@(LogicalFilterOperator.Or)" />
                        <RadzenSelectBarItem Text="All" Value="@(LogicalFilterOperator.And)" />
                    </Items>
                </RadzenSelectBar>
            </RadzenStack>
            <RadzenListBox AllowClear="true" @bind-Value=@selectedWorkStatus Multiple="true" AllowSelectAll=true Style="width:100%; height:200px;"
                           Change="@(()=>OnSelectedWorkStatusChange(column))" Data=@workStatuses />
            <div class="rz-grid-filter-buttons">
                <RadzenButton ButtonStyle="ButtonStyle.Secondary" Text="Clear" Click="@(() => WorkStatusFilterClear(column))" />
                <RadzenButton ButtonStyle="ButtonStyle.Primary" Text="Close" Click="@(() => WorkStatusFilterClose(column))" />
            </div>
        </div>
    </FilterTemplate>
</RadzenDataGridColumn>

How to capture the event of clicking on filter icon that brings up RadzenStack or RadzenListBox with filter options?

I want to capture it and update content of Data=@workStatuses if a user decides to interact with the particular column. The closest I came by is @onfocus event, but it behaves differently than @onclick - when @onfocus triggers, the RadzenListBox has already rendered with old content.

2

I'm afraid there is no such event.

3

That's unfortunate! What is the proposed workaround? Set AllowPaging="false" and create a custom button that resembles default filter icon and wire OnClick() on it? In this case where can I find rzi rz-grid-filter-icon icon?

4

Not aware of a workaround.

5

I have found the proper way to do it:

In the grid properties set the following:

FilterPopupRenderMode="PopupRenderMode.OnDemand"

Now for the column:

         <RadzenDataGridColumn>
             <FilterTemplate>
                 <YourCustomComponentWithListBoxInside>
                    //handle your logic in OnInitializedAsync, it will trigger just as you click on the filter icon
                 </YourCustomComponentWithListBoxInside>
             </FilterTemplate>
         </RadzenDataGridColumn>

Inside the component:

<div>
    <div class="rz-grid-filter">
        @if (isLoading)
        {
            <RadzenProgressBarCircular ProgressBarStyle="ProgressBarStyle.Dark" ShowValue="false" Mode="ProgressBarMode.Indeterminate" />
        }
        else
        {
            <RadzenListBox ValueChanged="@((IEnumerable<T> value) => selectedItems = value)"
                           Value="selectedItems"
                           AllowClear="true"
                           Multiple="true"
                           AllowSelectAll="true"
                           Style="width:100%; height:200px;"
                           Data="@availableItems" />
            <div class="rz-grid-filter-buttons">
                <RadzenButton ButtonStyle="ButtonStyle.Primary" Text="Apply" Click="@OnApply" />
                <RadzenButton ButtonStyle="ButtonStyle.Secondary" Text="Clear" Click="@OnClear" />
            </div>
        }
    </div>
</div>

    protected override async Task OnInitializedAsync()
    {
        //whatever you want to populate availableItems async
        await base.OnInitializedAsync();
    }