diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 3fdc8fed22..e66f5f43e4 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -1966,6 +1966,13 @@ If true, enables the new style of header cell that includes a button to display all column options through a menu. + + + Use IMenuService to create the menu, if this service was injected. + This value must be defined before the component is rendered (you can't change it during the component lifecycle). + Default, true. + + Optionally defines a value for @key on each rendered row. Typically this should be used to specify a diff --git a/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor b/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor index d02716c07a..a7630d15da 100644 --- a/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor +++ b/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor @@ -58,7 +58,7 @@

Sorting

The DataGrid supports sorting by clicking on the column headers. The default sort direction is ascending. Clicking on the same column header again will toggle the sort direction. - A sort can be removed by right clicking on the header column (with exception of the default sort). + A sort can be removed by right clicking (or by pressing Shift+R) on the header column (with exception of the default sort).

Row size

diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor index f9c5093fdd..f3ea596482 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomComparer.razor @@ -18,12 +18,14 @@ +
rankSort = GridSort .ByDescending(x => x.Medals.Gold) diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor index 9e3d813df5..a3cbc710b0 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor @@ -29,7 +29,7 @@ { string? tooltip = Tooltip ? (HeaderTooltip ?? Title) : null; - + @if (AnyColumnActionEnabled) { @@ -63,7 +63,7 @@
} - + @if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault()) { diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs index 4e5060c87a..482122a8ed 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs @@ -19,6 +19,7 @@ public abstract partial class ColumnBase private bool _isMenuOpen; private static readonly string[] KEYBOARD_MENU_SELECT_KEYS = ["Enter", "NumpadEnter"]; private readonly string _columnId = Identifier.NewId(); + private FluentMenu? _menu; [CascadingParameter] internal InternalGridContext InternalGridContext { get; set; } = default!; @@ -248,7 +249,7 @@ protected internal virtual Task OnCellKeyDownAsync(FluentDataGridCell protected void HandleKeyDown(FluentKeyCodeEventArgs e) { - if (e.CtrlKey && e.Key == KeyCode.Enter) + if (e.ShiftKey && e.Key == KeyCode.KeyR) { Grid.RemoveSortByColumnAsync(this); } diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index f61872f2a1..aedcd769b1 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -24,6 +24,7 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/DataGrid/FluentDataGrid.razor.js"; public const string EMPTY_CONTENT_ROW_CLASS = "empty-content-row"; public const string LOADING_CONTENT_ROW_CLASS = "loading-content-row"; + public List _menuReferences = []; /// [Inject] @@ -148,6 +149,14 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve [Parameter] public bool HeaderCellAsButtonWithMenu { get; set; } + /// + /// Use IMenuService to create the menu, if this service was injected. + /// This value must be defined before the component is rendered (you can't change it during the component lifecycle). + /// Default, true. + /// + [Parameter] + public bool UseMenuService { get; set; } = true; + /// /// Optionally defines a value for @key on each rendered row. Typically this should be used to specify a /// unique identifier, such as a primary key value, for each data item. diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.js b/src/Core/Components/DataGrid/FluentDataGrid.razor.js index 7d1aa113c5..21cc3ec88f 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.js +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.js @@ -32,6 +32,9 @@ export function init(gridElement, autoFocus) { } } const keyDownHandler = event => { + if (document.activeElement.tagName.toLowerCase() != 'table' && document.activeElement.tagName.toLowerCase() != 'td' && document.activeElement.tagName.toLowerCase() != 'th') { + return; + } const columnOptionsElement = gridElement?.querySelector('.col-options'); if (columnOptionsElement) { if (event.key === "Escape") { @@ -64,7 +67,7 @@ export function init(gridElement, autoFocus) { } // check if start is a child of gridElement - if (start !== null && (gridElement.contains(start) || gridElement === start) && document.activeElement === start && document.activeElement.tagName.toLowerCase() !== 'fluent-text-field') { + if (start !== null && (gridElement.contains(start) || gridElement === start) && document.activeElement === start && document.activeElement.tagName.toLowerCase() !== 'fluent-text-field' && document.activeElement.tagName.toLowerCase() !== 'fluent-menu-item') { const idx = start.cellIndex; if (event.key === "ArrowUp") { @@ -124,13 +127,13 @@ export function init(gridElement, autoFocus) { document.body.addEventListener('click', bodyClickHandler); document.body.addEventListener('mousedown', bodyClickHandler); // Otherwise it seems strange that it doesn't go away until you release the mouse button - document.body.addEventListener('keydown', keyDownHandler); + gridElement.addEventListener('keydown', keyDownHandler); return { stop: () => { document.body.removeEventListener('click', bodyClickHandler); document.body.removeEventListener('mousedown', bodyClickHandler); - document.body.removeEventListener('keydown', keyDownHandler); + gridElement.removeEventListener('keydown', keyDownHandler); delete grids[gridElement]; } }; diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs index 57a9ce561d..b6344436b8 100644 --- a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs @@ -79,7 +79,7 @@ public partial class FluentDataGridCell : FluentComponentBase .AddStyle("height", $"{(int)Grid.RowSize}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && !Grid.MultiLine && (Grid.Items is not null || Grid.ItemsProvider is not null)) .AddStyle("height", "100%", Grid.MultiLine) .AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default) - .AddStyle("z-index", ZIndex.DataGridHeaderPopup.ToString(), CellType == DataGridCellType.ColumnHeader && Grid._columns.Count > 0) + .AddStyle("z-index", ZIndex.DataGridHeaderPopup.ToString(), CellType == DataGridCellType.ColumnHeader && Grid._columns.Count > 0 && Grid.UseMenuService) .AddStyle(Owner.Style) .Build();