Active indicator for filter for QuickGrid
- Dominant language
- C#
- Stars
- 38.4k
- Forks
- 10.9k
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 276
Description
### Is there an existing issue for this?
- [X] I have searched the existing issues
### Is your feature request related to a problem? Please describe the problem.
I'm trying to add an activity indicator to the filter in the quickgrid, but it requires copying css and custom HeaderTemplates. Currently, there is no indication if a filter is active and if you have more than one filter in a grid you need to search for the active one yourself.
Steps to get this working, in this code I want to modify the color of the filter indicator to something other than black
1. To render the current header template the following markup code needs to copied into your own HeaderTemplate
https://github.com/dotnet/aspnetcore/blob/268a2dfc29b33e3fdb73cbac6eb198c05314d77e/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/Columns/ColumnBase.razor#L20-L42
Unfortunately the isolated css for the col-title is not using ::deep, which means that the css needs to be copied too (the css for col-options-button is ::deep).
Otherwise the output looks like this:

Slightly simplified it looks like this (including the actual search box):
```csharp
```
2. Add a field to the css for the button (e.g.@m_UserNameOptionsActive)
3. Add css which modifies the color
```css
.col-filter-active {
filter: invert(29%) sepia(80%) saturate(2378%) hue-rotate(207deg) brightness(98%) contrast(102%);
}
```
4. Add code which sets the variable
```css
if (!string.IsNullOrEmpty(m_UserNameFilter))
{
result = result.Where(c => c.UserName.Contains(m_UserNameFilter, StringComparison.CurrentCultureIgnoreCase));
m_UserNameOptionsActive = "col-filter-active";
}
else
{
m_UserNameOptionsActive = null;
}
```
Now the filter indicator color should change color to something like this, if the variable is not empty

As described above, the steps are fairly involved, you need to copy css around, add a unique variable/field to each property you want that method to work for and you need to modify the filter code to enable/disable it.
It would be nice to have that out of the box
### Describe the solution you'd like
This is just the way I did it, based on the example above, there might be a better ways, I'm rather new to the whole blazor thingie.
1. Change the isolated css in https://github.com/dotnet/aspnetcore/blob/main/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/Columns/ColumnBase.razor.css to be ::deep, just like the css in https://github.com/dotnet/aspnetcore/blob/main/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.css so I don't need to copy the css around
2. Add internal logic which enables some variable to be set if the oninput event output is not empty
I think the minimum viable approach here is to atleast do the css ::deep thing, everything else could be just an example on the nice https://aspnet.github.io/quickgridsamples/filtering page.
### Additional context
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.