I have a grid with both Template and Property Columns (code below only showing a single column.) The grid seems to work as expected with sorting and filtering. However, I want a way to clear all filters. I know how I would do this and it is just clearing each of the variables tied to each of the filtered columns (like filterProjectName
below.) So, I need to UI to display a button when there is at least 1 filter in place. I have code in the Filtered data property that determines if we have any filters and then totals them up. This always seems to be a step behind what is actual (the @CurrentFilters.Count
below.) Despite the Console.WriteLine
that shows the correct number when the property returns.
Here is my HTML:
<label class="ms-3">Filters: @CurrentFilters.Count</label>
<div class="fs-08">
<QuickGrid @ref="MyWorkGrid" Items="FilteredQuickProjects" ItemKey="@(p => p.ProjectId)" Pagination="QuickPagination" Class="table table-fixed table-sm table-bordered table-striped table-hover">
<TemplateColumn Title="Project Name" Class="project-name text-truncate" Sortable="true" SortBy="sortProjectName">
<ColumnOptions>
<div class="search-box">
<input type="search" class="form-control form-control-xs" autofocus @bind="filterProjectName" @bind:event="oninput" placeholder="Project Name..." />
</div>
</ColumnOptions>
<ChildContent>
<div class="d-flex justify-content-between align-items-start">
...
</div>
</ChildContent>
</TemplateColumn>
</QuickGrid>
<Paginator Value="QuickPagination" />
</div>
The code behind is:
public HashSet<string> CurrentFilters { get; set; } = new();
public QuickGrid<MyWorkViewModel> MyWorkGrid { get; set; }
public IQueryable<MyWorkViewModel> FilteredQuickProjects
{
get
{
if (!PageIsLoaded)
return MyQuickProjects;
CurrentFilters.Clear();
if (!string.IsNullOrWhiteSpace(filterProjectName))
{
result = result.Where(x => x.Name.Contains(filterProjectName, StringComparison.InvariantCultureIgnoreCase));
CurrentFilters.Add("ProjectName");
}
System.Console.WriteLine($"Total Filters: {CurrentFilters.Count}");
return result;
}
}
I put StateHasChanged()
at the end of the FilteredQuickProjects
and that had created an endless loop.
I am not sure what to do here.