-
Notifications
You must be signed in to change notification settings - Fork 543
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
Replace data grid column headers with custom template #5266
Merged
adamint
merged 11 commits into
dotnet:main
from
adamint:dev/adamint/resizable-headers-single-pointer
Aug 16, 2024
Merged
Changes from all commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
c159db6
add fluentdatagrid header where the column options button doesn't tak…
adamint cd52f25
fix loc, decrease margin
adamint 292a277
add resize labels to all data grids
adamint f182be9
fix error, use new header in a few more grids
adamint 901f1d4
replace header cell + refs with custom columns, avoid opening menu if…
adamint e37cfba
Merge branch 'refs/heads/main' into dev/adamint/resizable-headers-sin…
adamint 115efb6
localize string
adamint 56449ae
Merge branch 'refs/heads/main' into dev/adamint/resizable-headers-sin…
adamint 36c60cf
change resize type to discrete
adamint 2f249f8
Merge branch 'main' into dev/adamint/resizable-headers-single-pointer
adamint fd09a63
register keycode module in tests
adamint 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 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
This file contains 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
36 changes: 36 additions & 0 deletions
36
src/Aspire.Dashboard/Components/Controls/Grid/AspireFluentDataGridHeaderCell.razor
This file contains 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 |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| @using Aspire.Dashboard.Resources | ||
| @typeparam T | ||
|
|
||
| <FluentKeyCode Only="@(new[] { KeyCode.Ctrl, KeyCode.Enter })" OnKeyDown="HandleKeyDown" class="keycapture"> | ||
| <span class="col-sort-container" @oncontextmenu="@(() => Grid.RemoveSortByColumnAsync(Column))" @oncontextmenu:preventDefault> | ||
| <FluentButton Disabled="@(!AnyColumnActionEnabled)" Id="@_columnId" Appearance="Appearance.Stealth" class="col-sort-button" @onclick="@HandleColumnHeaderClickedAsync" aria-label="@Tooltip" title="@Tooltip"> | ||
| <div class="col-title-text" title="@Tooltip">@Column.Title</div> | ||
|
|
||
| @if (Grid.SortByAscending.HasValue && Column.ShowSortIcon) | ||
| { | ||
| if (Grid.SortByAscending == true) | ||
| { | ||
| <FluentIcon Value="@(new Icons.Regular.Size16.ArrowSortUp())" Slot="@(Column.Align == Align.End ? "start" : "end")" Style="opacity: 0.5; margin-left: -5px;"/> | ||
| } | ||
| else | ||
| { | ||
| <FluentIcon Value="@(new Icons.Regular.Size16.ArrowSortDown())" Slot="@(Column.Align == Align.End ? "start" : "end")" Style="opacity: 0.5; margin-left: -5px;"/> | ||
| } | ||
| } | ||
| @if (Grid.ResizeType is not null && Column.ColumnOptions is not null) | ||
| { | ||
| @if (Column.Filtered.GetValueOrDefault()) | ||
| { | ||
| <FluentIcon Value="@(new Icons.Regular.Size16.Filter())" Slot="@(Column.Align == Align.End ? "start" : "end")" Style="opacity: 0.5; margin-left: -5px;"/> | ||
| } | ||
| } | ||
| </FluentButton> | ||
|
|
||
| <FluentMenu Anchor="@_columnId" @bind-Open="@_isMenuOpen"> | ||
| <FluentMenuItem OnClick="@(async () => await Grid.SortByColumnAsync(Column))"> | ||
| @GetSortOptionText() | ||
| </FluentMenuItem> | ||
| <FluentMenuItem OnClick="@(async () => await Grid.ShowColumnOptionsAsync(Column))">@Loc[nameof(ControlsStrings.FluentDataGridHeaderCellResizeButtonText)]</FluentMenuItem> | ||
| </FluentMenu> | ||
| </span> | ||
| </FluentKeyCode> |
92 changes: 92 additions & 0 deletions
92
src/Aspire.Dashboard/Components/Controls/Grid/AspireFluentDataGridHeaderCell.razor.cs
This file contains 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 |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| // Licensed to the .NET Foundation under one or more agreements. | ||
| // The .NET Foundation licenses this file to you under the MIT license. | ||
| using System.Diagnostics; | ||
| using Aspire.Dashboard.Resources; | ||
| using Microsoft.AspNetCore.Components; | ||
| using Microsoft.Extensions.Localization; | ||
| using Microsoft.FluentUI.AspNetCore.Components; | ||
|
|
||
| namespace Aspire.Dashboard.Components.Controls.Grid; | ||
|
|
||
| public partial class AspireFluentDataGridHeaderCell<T> : ComponentBase | ||
| { | ||
| [Parameter] | ||
| public required ColumnBase<T> Column { get; set; } | ||
|
|
||
| [Parameter] | ||
| public required FluentDataGrid<T> Grid { get; set; } | ||
|
|
||
| [Inject] | ||
| public required IStringLocalizer<ControlsStrings> Loc { get; init; } | ||
|
|
||
| private bool _isMenuOpen; | ||
| private readonly string _columnId = $"column-header{Guid.NewGuid():N}"; | ||
|
|
||
| private string? Tooltip => Column.Tooltip ? Column.Title : null; | ||
|
|
||
| private void HandleKeyDown(FluentKeyCodeEventArgs e) | ||
| { | ||
| if (e.CtrlKey && e.Key == KeyCode.Enter) | ||
| { | ||
| Grid.RemoveSortByColumnAsync(Column); | ||
| } | ||
| } | ||
|
|
||
| public bool AnyColumnActionEnabled => Column.Sortable is true || Grid.ResizableColumns; | ||
|
|
||
| private async Task HandleColumnHeaderClickedAsync() | ||
| { | ||
| if (Column.Sortable is true && Grid.ResizableColumns) | ||
| { | ||
| _isMenuOpen = !_isMenuOpen; | ||
| } | ||
| else if (Column.Sortable is true && !Grid.ResizableColumns) | ||
| { | ||
| await Grid.SortByColumnAsync(Column); | ||
| } | ||
| else if (Column.Sortable is not true && Grid.ResizableColumns) | ||
| { | ||
| await Grid.ShowColumnOptionsAsync(Column); | ||
| } | ||
| } | ||
|
|
||
| private string GetSortOptionText() | ||
| { | ||
| if (Grid.SortByAscending.HasValue && Column.ShowSortIcon) | ||
| { | ||
| if (Grid.SortByAscending is true) | ||
| { | ||
| return Loc[nameof(ControlsStrings.FluentDataGridHeaderCellSortDescendingButtonText)]; | ||
| } | ||
| else | ||
| { | ||
| return Loc[nameof(ControlsStrings.FluentDataGridHeaderCellSortAscendingButtonText)]; | ||
| } | ||
| } | ||
|
|
||
| return Loc[nameof(ControlsStrings.FluentDataGridHeaderCellSortButtonText)]; | ||
| } | ||
| } | ||
|
|
||
| internal static class AspireFluentDataGridHeaderCell | ||
| { | ||
| public static RenderFragment<ColumnBase<T>> RenderHeaderContent<T>(FluentDataGrid<T>? grid) | ||
| { | ||
| Debug.Assert(grid is not null); | ||
|
|
||
| return GetHeaderContent; | ||
|
|
||
| RenderFragment GetHeaderContent(ColumnBase<T> value) => builder => | ||
| { | ||
| builder.OpenComponent<AspireFluentDataGridHeaderCell<T>>(0); | ||
| builder.AddAttribute(1, nameof(AspireFluentDataGridHeaderCell<T>.Column), value); | ||
| builder.AddAttribute(2, nameof(AspireFluentDataGridHeaderCell<T>.Grid), grid); | ||
| builder.CloseComponent(); | ||
| }; | ||
| } | ||
|
|
||
| public static string GetResizeLabel(IStringLocalizer<ControlsStrings> loc) | ||
| { | ||
| return loc[nameof(ControlsStrings.FluentDataGridHeaderCellResizeLabel)]; | ||
| } | ||
| } |
14 changes: 14 additions & 0 deletions
14
src/Aspire.Dashboard/Components/Controls/Grid/AspirePropertyColumn.cs
This file contains 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 |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| // Licensed to the .NET Foundation under one or more agreements. | ||
| // The .NET Foundation licenses this file to you under the MIT license. | ||
| using Microsoft.FluentUI.AspNetCore.Components; | ||
|
|
||
| namespace Aspire.Dashboard.Components.Controls.Grid; | ||
|
|
||
| public class AspirePropertyColumn<TGridItem, TProp> : PropertyColumn<TGridItem, TProp> | ||
| { | ||
| protected override void OnParametersSet() | ||
| { | ||
| HeaderCellItemTemplate = AspireFluentDataGridHeaderCell.RenderHeaderContent(Grid); | ||
| base.OnParametersSet(); | ||
| } | ||
| } |
14 changes: 14 additions & 0 deletions
14
src/Aspire.Dashboard/Components/Controls/Grid/AspireTemplateColumn.cs
This file contains 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 |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| // Licensed to the .NET Foundation under one or more agreements. | ||
| // The .NET Foundation licenses this file to you under the MIT license. | ||
| using Microsoft.FluentUI.AspNetCore.Components; | ||
|
|
||
| namespace Aspire.Dashboard.Components.Controls.Grid; | ||
|
|
||
| public class AspireTemplateColumn<TGridItem> : TemplateColumn<TGridItem> | ||
| { | ||
| protected override void OnParametersSet() | ||
| { | ||
| HeaderCellItemTemplate = AspireFluentDataGridHeaderCell.RenderHeaderContent(Grid); | ||
| base.OnParametersSet(); | ||
| } | ||
| } |
15 changes: 9 additions & 6 deletions
15
src/Aspire.Dashboard/Components/Controls/PropertyGrid.razor
This file contains 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,27 +1,30 @@ | ||
| @using Aspire.Dashboard.Resources | ||
| @using Aspire.Dashboard.Components.Controls.Grid | ||
| @using Aspire.Dashboard.Resources | ||
| @typeparam TItem | ||
| @inject IStringLocalizer<ControlsStrings> Loc | ||
|
|
||
| <FluentDataGrid Items="@Items" | ||
| <FluentDataGrid ResizeLabel="@AspireFluentDataGridHeaderCell.GetResizeLabel(Loc)" | ||
| ResizeType="DataGridResizeType.Discrete" | ||
| Items="@Items" | ||
| ResizableColumns="true" | ||
| Style="width:100%" | ||
| GenerateHeader="@GenerateHeader" | ||
| GridTemplateColumns="@GridTemplateColumns" | ||
| ShowHover="true"> | ||
| <TemplateColumn Title="@(NameColumnTitle ?? Loc[nameof(ControlsStrings.NameColumnHeader)])" Class="nameColumn" SortBy="@NameSort" Sortable="@IsNameSortable"> | ||
| <AspireTemplateColumn Title="@(NameColumnTitle ?? Loc[nameof(ControlsStrings.NameColumnHeader)])" Class="nameColumn" SortBy="@NameSort" Sortable="@IsNameSortable"> | ||
| <GridValue | ||
| ValueDescription="@(NameColumnTitle ?? Loc[nameof(ControlsStrings.NameColumnHeader)])" | ||
| Value="@NameColumnValue(context)" | ||
| HighlightText="@HighlightText" /> | ||
| </TemplateColumn> | ||
| <TemplateColumn Title="@(ValueColumnTitle ?? Loc[nameof(ControlsStrings.PropertyGridValueColumnHeader)])" Class="valueColumn" SortBy="@ValueSort" Sortable="@IsValueSortable"> | ||
| </AspireTemplateColumn> | ||
| <AspireTemplateColumn Title="@(ValueColumnTitle ?? Loc[nameof(ControlsStrings.PropertyGridValueColumnHeader)])" Class="valueColumn" SortBy="@ValueSort" Sortable="@IsValueSortable"> | ||
| <GridValue | ||
| ValueDescription="@(ValueColumnTitle ?? Loc[nameof(ControlsStrings.PropertyGridValueColumnHeader)])" | ||
| Value="@ValueColumnValue(context)" HighlightText="@HighlightText" | ||
| EnableMasking="@EnableValueMasking" IsMasked="@GetIsItemMasked(context)" | ||
| IsMaskedChanged="(newValue) => OnIsMaskedChanged(context, newValue)" | ||
| TextVisualizerTitle="@NameColumnValue(context)"/> | ||
| @ExtraValueContent(context) | ||
| </TemplateColumn> | ||
| </AspireTemplateColumn> | ||
| </FluentDataGrid> | ||
|
|
||
This file contains 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
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm, I think there might be the opportunity to reduce the amount of change by having a custom FluentDataGrid type instead of custom columns. The custom grid type could loop through the columns and set
HeaderCellItemTemplate = AspireFluentDataGridHeaderCell.RenderHeaderContent(Grid);on all the columns.However, that might create problems of its own if there are situations where that is wrong behavior. Custom columns that set the header is probably ok for now. It's verbose, but it gives us control.