Datagrid custom filtering

markb · August 6, 2021, 9:54am

I have a new DataGrid with a custom filter on one fields which consist of a dropdown. Changing the dropdown triggers the data grid to load the filtered data as required but, the filter controls remain visible until I click on another object on the screen.

Is there some way to close the filter window similar to what happens when the "Clear" or "Apply" buttons are used on the non-custom advanced filter window.

Thanks.

enchev · August 6, 2021, 11:06am

Do you have any errors in the browser console? I'm unable to reproduce it on our demo:
https://blazor.radzen.com/datagrid-filter-template

markb · August 6, 2021, 11:32am

Hi @enchev,

No errors no but, I am using the FilterMode of advanced on my grid whereas your screenshot looks like simple? Under the DataGrid-> Columns-> FilterTemplate, I have this template:

The DropDown being bound to page properties. When the grid is displayed, it looks like this:

When I click on the filter icon, it shows up like this:

I can change the selection in the dropdown and the grid refreshes but, the filter panel stays visible after making a selection until I click on some other part of the screen.

enchev · August 6, 2021, 4:20pm

Indeed the advanced filtering popup will be closed when you click outside of the popup. You can check also the Clear/Apply buttons code how the popup can be closed:

github.com

radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenDataGrid.razor#L644

    
      
          
          
            InvokeAsync(Reload);
                  }
              }
          }
          
          
protected async Task ClearFilter(RadzenDataGridColumn<TItem> column, bool closePopup = false)
          {
              if (closePopup)
              {
                  await JSRuntime.InvokeVoidAsync("Radzen.closePopup", $"{PopupID}{column.GetFilterProperty()}");
              }
              column.SetFilterValue(null);
              column.SetFilterValue(null, false);
              column.SetFilterOperator(null);
              column.SetSecondFilterOperator(null);
          
          
    skip = 0;
              CurrentPage = 0;
          
          
    if (LoadData.HasDelegate && IsVirtualizationAllowed())

markb · August 9, 2021, 7:56am

That looks like just what I am after - I've tried adding a button to my filter template and using the same code within an Execute C# handler but, this fails with column not being known. It appears the 2nd parameter is optional but, the first parameter PopupID is required. I can see in the code you link to that this is:

internal string PopupID
    {
        get
        {
            return $"popup{UniqueID}";
        }
    }

If I try and use this code in the page's .razor file, I get the error:

If it's not a silly question, how do I get the ID for the popup which is displayed by the custom filter template?

enchev · August 9, 2021, 3:53pm

UniqueID is a publicly accessible property of the component instance:

github.com

radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenComponent.cs#L78

    
      
              return "";
          }
          
          
Debouncer debouncer = new Debouncer();
          
          
protected void Debounce(Func<Task> action, int milliseconds = 500)
          {
              debouncer.Debounce(milliseconds, action);
          }
          
          
public string UniqueID { get; set; }
          
          
[Inject]
          protected IJSRuntime JSRuntime { get; set; }
          
          
protected bool IsJSRuntimeAvailable { get; set; }
          
          
protected override void OnInitialized()
          {
              UniqueID = Convert.ToBase64String(Guid.NewGuid().ToByteArray()).Replace("/", "-").Replace("+", "-").Substring(0, 10);            
          }