-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
MudDataGrid: FilterTemplate for DataGridFilterMode.Simple #12802
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 15 commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
004285c
Filter Template in Simple Mode
c34a54a
Filter Template in Simple Mode - update
6b0ade7
Potential fix for pull request finding
mmaestro16 e6b917a
Merge branch 'dev' into dev
mmaestro16 4625fef
Removed unreachable code
f1ba1ea
Fix stale DataGrid filter function on column change
versile2 96546ce
Add DataGrid HeaderCell filter auto-close overloads
versile2 c83af2b
Refresh DataGrid filtering docs examples
versile2 42c8e9e
Adjusted Basic Example
versile2 384ca71
Bind DataGrid filter actions by UI owner
versile2 8030ca4
Refine DataGrid filtering docs guidance
versile2 b8be0ed
Finalize DataGrid filter UI cleanup
versile2 d111d5f
Tighten DataGrid filter state handling
versile2 6a45dd5
Merge branch 'dev' into dev
versile2 1dde9f6
Update src/MudBlazor.Docs/Pages/Components/DataGrid/Examples/DataGrid…
versile2 c174ab6
rename `CloseFilterUIAsync` -> `CloseFilterAsync`
danielchalmers File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
156 changes: 77 additions & 79 deletions
156
src/MudBlazor.Docs/Pages/Components/DataGrid/Examples/DataGridAdvancedFilteringExample.razor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,111 +1,109 @@ | ||
| @using System.Net.Http.Json | ||
| @using MudBlazor.Examples.Data.Models | ||
| @using MudBlazor.Examples.Data.Models | ||
| @namespace MudBlazor.Docs.Examples | ||
| @inject HttpClient httpClient | ||
|
|
||
| <MudDataGrid T="Element" Items="@Elements" Filterable="true" FilterMode="@DataGridFilterMode.ColumnFilterRow"> | ||
| <MudDataGrid @ref="@_dataGrid" Items="@_elements" Filterable="true" FilterMode="@_filterMode" RowsPerPage="5"> | ||
| <Columns> | ||
| <PropertyColumn Property="x => x.Number" Title="Nr" Filterable="false" /> | ||
| <PropertyColumn Property="x => x.Sign"> | ||
| <PropertyColumn Property="x => x.Sign" /> | ||
| <PropertyColumn Property="x => x.Name" /> | ||
| <PropertyColumn Property="x => x.Position" Filterable="false" /> | ||
| <PropertyColumn Property="x => x.Molar" Title="Molar mass" /> | ||
| <PropertyColumn Property="x => x.Group" Title="Category"> | ||
| <FilterTemplate> | ||
| <MudIconButton OnClick="@OpenFilter" Icon="@_icon" Size="@Size.Small" /> | ||
| <MudOverlay Visible="@_filterOpen" OnClick="@(() => _filterOpen = false)" /> | ||
| <MudPopover Open="@_filterOpen" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter" | ||
| Style="width:150px"> | ||
| <MudStack Spacing="0"> | ||
| <MudCheckBox T="bool" Label="Select All" Size="@Size.Small" Value="@_selectAll" ValueChanged="@SelectAll" /> | ||
| <MudStack Spacing="0" Style="overflow-y:auto;max-height:250px"> | ||
| @foreach (var item in context.Items) | ||
| { | ||
| <MudCheckBox T="bool" Label="@($"{item.Sign}")" Size="@Size.Small" Value="@(_selectedItems.Contains(item))" | ||
| ValueChanged="@((value) => SelectedChanged(value, item))" /> | ||
| } | ||
| </MudStack> | ||
| <MudStack Row="true"> | ||
| <MudButton OnClick="@(() => ClearFilterAsync(context))">Clear</MudButton> | ||
| <MudButton Color="@Color.Primary" OnClick="@(() => ApplyFilterAsync(context))">Filter</MudButton> | ||
| </MudStack> | ||
| </MudStack> | ||
| </MudPopover> | ||
| <MudSelect T="string" MultiSelection="true" | ||
| SelectedValues="@GetFilterValues(context.FilterDefinition!)" | ||
| SelectedValuesChanged="@(values => SetColumnFilterValues(context, values))" | ||
| FullWidth="true" Dense="true" Margin="@Margin.Dense" | ||
| Class="filter-input category-filter" | ||
| Placeholder="Filter Categories" Clearable="true"> | ||
| @foreach (var category in _categories) | ||
| { | ||
| <MudSelectItem T="string" Value="@category">@category</MudSelectItem> | ||
| } | ||
| </MudSelect> | ||
| </FilterTemplate> | ||
| </PropertyColumn> | ||
| <PropertyColumn Property="x => x.Name" /> | ||
| <PropertyColumn Property="x => x.Position" /> | ||
| <PropertyColumn Property="x => x.Molar" Title="Molar mass" /> | ||
| <PropertyColumn Property="x => x.Group" Title="Category" /> | ||
| </Columns> | ||
| <PagerContent> | ||
| <MudDataGridPager T="Element" /> | ||
| <MudDataGridPager T="Element" PageSizeOptions="new[] { 5 }" /> | ||
| </PagerContent> | ||
| </MudDataGrid> | ||
|
|
||
| @code { | ||
| IEnumerable<Element> Elements = new List<Element>(); | ||
| HashSet<Element> _selectedItems = new(); | ||
| HashSet<Element> _filterItems = new(); | ||
| FilterDefinition<Element> _filterDefinition; | ||
| bool _selectAll = true; | ||
| string _icon = Icons.Material.Outlined.FilterAlt; | ||
| <div class="d-flex justify-start mt-4"> | ||
| <MudRadioGroup T="DataGridFilterMode" Value="@_filterMode" ValueChanged="@FilterModeChanged"> | ||
| <MudRadio Dense="true" Value="@DataGridFilterMode.ColumnFilterRow" Color="Color.Primary">Column Filter Row</MudRadio> | ||
| <MudRadio Dense="true" Value="@DataGridFilterMode.ColumnFilterMenu" Color="Color.Tertiary">Column Filter Menu</MudRadio> | ||
| </MudRadioGroup> | ||
| </div> | ||
|
|
||
| bool _filterOpen = false; | ||
| @code { | ||
| private readonly List<Element> _elements = CreateElements(); | ||
| private readonly List<string> _categories = []; | ||
| private MudDataGrid<Element> _dataGrid = default!; | ||
| private DataGridFilterMode _filterMode = DataGridFilterMode.ColumnFilterRow; | ||
|
|
||
| protected override async Task OnInitializedAsync() | ||
| protected override void OnInitialized() | ||
| { | ||
| Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable"); | ||
| _selectedItems = Elements.ToHashSet(); | ||
| _filterItems = Elements.ToHashSet(); | ||
| _filterDefinition = new FilterDefinition<Element> | ||
| { | ||
| FilterFunction = x => _filterItems.Contains(x) | ||
| }; | ||
| _categories.AddRange(_elements.Select(x => x.Group).Distinct().OrderBy(x => x).ToList()); | ||
| } | ||
|
|
||
| void OpenFilter() | ||
| private Task FilterModeChanged(DataGridFilterMode value) | ||
| { | ||
| _filterOpen = true; | ||
| // Example toggle: switches between the row and menu column filter modes. | ||
| _filterMode = value; | ||
| return _dataGrid.ClearFiltersAsync(); | ||
| } | ||
|
|
||
| private void SelectedChanged(bool value, Element item) | ||
| private IReadOnlyCollection<string> GetFilterValues(IFilterDefinition<Element> filterDefinition) | ||
| { | ||
| if (value) | ||
| _selectedItems.Add(item); | ||
| else | ||
| _selectedItems.Remove(item); | ||
|
|
||
| if (_selectedItems.Count == Elements.Count()) | ||
| _selectAll = true; | ||
| else | ||
| _selectAll = false; | ||
| // Column FilterTemplate: reads the current values from the active filter UI. | ||
| return filterDefinition.Value as IReadOnlyCollection<string> ?? Array.Empty<string>(); | ||
| } | ||
|
|
||
| private async Task ClearFilterAsync(FilterContext<Element> context) | ||
| private Task SetColumnFilterValues(FilterContext<Element> context, IEnumerable<string> values) | ||
| { | ||
| _selectedItems = Elements.ToHashSet(); | ||
| _filterItems = Elements.ToHashSet(); | ||
| _icon = Icons.Material.Outlined.FilterAlt; | ||
| await context.Actions.ClearFilterAsync(_filterDefinition); | ||
| _filterOpen = false; | ||
| } | ||
| // Column FilterTemplate: maps selected values to the active filter definition and applies through the grid so the menu can stay open for multi-selection. | ||
| var filterDefinition = context.FilterDefinition!; | ||
| var selectedValues = values?.ToList() ?? []; | ||
| filterDefinition.Value = selectedValues.Count > 0 ? selectedValues : null; | ||
|
|
||
| private async Task ApplyFilterAsync(FilterContext<Element> context) | ||
| { | ||
| _filterItems = _selectedItems.ToHashSet(); | ||
| _icon = _filterItems.Count == Elements.Count() ? Icons.Material.Outlined.FilterAlt : Icons.Material.Filled.FilterAlt; | ||
| await context.Actions.ApplyFilterAsync(_filterDefinition); | ||
| _filterOpen = false; | ||
| if (filterDefinition is FilterDefinition<Element> filterDef) | ||
| { | ||
| if (selectedValues.Count > 0) | ||
| { | ||
| filterDef.FilterFunction = item => item.Group is not null && selectedValues.Contains(item.Group); | ||
| } | ||
| else | ||
| { | ||
| filterDef.FilterFunction = null; | ||
| } | ||
| } | ||
|
|
||
| return ApplyColumnFilterWithoutClosingAsync(context, filterDefinition); | ||
| } | ||
|
|
||
| private void SelectAll(bool value) | ||
| private Task ApplyColumnFilterWithoutClosingAsync(FilterContext<Element> context, IFilterDefinition<Element> filterDefinition) | ||
| { | ||
| _selectAll = value; | ||
|
|
||
| if (value) | ||
| // Column FilterTemplate: refreshes filtering through the grid instead of the menu action so the menu stays open while selections change. | ||
| if (context.FilterDefinitions.All(x => x.Id != filterDefinition.Id)) | ||
| { | ||
| _selectedItems = Elements.ToHashSet(); | ||
| } | ||
| else | ||
| { | ||
| _selectedItems.Clear(); | ||
| context.FilterDefinitions.Add(filterDefinition); | ||
| } | ||
|
|
||
| return _dataGrid.AddFilterAsync(filterDefinition); | ||
| } | ||
|
|
||
| private static List<Element> CreateElements() => | ||
| [ | ||
| new() { Number = 1, Sign = "H", Name = "Hydrogen", Position = 1, Molar = 1.008, Group = "Nonmetal" }, | ||
| new() { Number = 2, Sign = "He", Name = "Helium", Position = 18, Molar = 4.0026, Group = "Noble Gas" }, | ||
| new() { Number = 3, Sign = "Li", Name = "Lithium", Position = 1, Molar = 6.94, Group = "Alkali Metal" }, | ||
| new() { Number = 4, Sign = "Be", Name = "Beryllium", Position = 2, Molar = 9.0122, Group = "Alkaline Earth Metal" }, | ||
| new() { Number = 5, Sign = "B", Name = "Boron", Position = 13, Molar = 10.81, Group = "Metalloid" }, | ||
| new() { Number = 6, Sign = "C", Name = "Carbon", Position = 14, Molar = 12.011, Group = "Nonmetal" }, | ||
| new() { Number = 7, Sign = "N", Name = "Nitrogen", Position = 15, Molar = 14.007, Group = "Nonmetal" }, | ||
| new() { Number = 8, Sign = "O", Name = "Oxygen", Position = 16, Molar = 15.999, Group = "Nonmetal" }, | ||
| new() { Number = 9, Sign = "F", Name = "Fluorine", Position = 17, Molar = 18.998, Group = "Halogen" }, | ||
| new() { Number = 10, Sign = "Ne", Name = "Neon", Position = 18, Molar = 20.180, Group = "Noble Gas" } | ||
| ]; | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.