diff --git a/examples/Demo/Client/wwwroot/index.html b/examples/Demo/Client/wwwroot/index.html index 4d669869c9..10ece33d53 100644 --- a/examples/Demo/Client/wwwroot/index.html +++ b/examples/Demo/Client/wwwroot/index.html @@ -48,9 +48,10 @@
-

Fluent UI Blazor

- Welcom to the Fluent UI Blazor component library demo and documentation site! - GitHub repository + Welcome to the +

Fluent UI Blazor

+ demo and documentation site! + GitHub repository
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 5fa60ae2a4..1ea8187387 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -2042,6 +2042,15 @@ Automatically fit the number of items per page to the available height. + + + Gets or set the of the grid. + Default is 'Grid'. + When set to Grid, can be used to specify column widths. + When set to Table, widths need to be specified at the column level. + When using , it is recommended to use Table. + + Gets or sets the size of each row in the grid based on the enum. diff --git a/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor b/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor index a9dc39c014..a478b1905e 100644 --- a/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor +++ b/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor @@ -67,6 +67,18 @@ When using Virtualize, the ItemSize value isused is still used to indicate the row height.

+

DisplayMode

+

+ The DataGrid supports 2 different display modes through the DisplayMode parameter: DataGridDisplayMode.Grid (default) and + DataGridDisplayMode.Table. When set to Grid, the GridTableColumns parameter cam be used set specify column + widths in fractions. It basically provides an HTML table element with a display: grid; style. The Table mode uses standard + HTML table elements and rendering. Column widths in that mode are best specified through the Width parameter of the columns. +

+

+ Specifically when using Virtualize, it is higly recommended to use the Table display mode as the Grid mode + can exhibit some odd behaviour when scrolling. +

+

Change strings used in the UI

diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridRemoteData2.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridRemoteData2.razor index 53d3f480b4..aa81299765 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridRemoteData2.razor +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridRemoteData2.razor @@ -27,12 +27,12 @@
-

+
- + diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css index da294b26ab..bad0befa31 100644 --- a/examples/Demo/Shared/wwwroot/css/site.css +++ b/examples/Demo/Shared/wwwroot/css/site.css @@ -347,6 +347,7 @@ kbd { .loading-info { margin-top: 1em; text-align: center; + font-size: 1.5em; } .loading-info a { diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor index 258912a3c1..a6576af49a 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor @@ -1,5 +1,6 @@ @using Microsoft.AspNetCore.Components.Rendering @using Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure +@using System.Globalization @namespace Microsoft.FluentUI.AspNetCore.Components @inherits FluentComponentBase @typeparam TGridItem @@ -200,13 +201,24 @@ private void RenderEmptyContent(RenderTreeBuilder __builder) { - @if (_manualGrid) + if (_manualGrid) { return; } + string? style = null; + string? colspan = null; + if (DisplayMode == DataGridDisplayMode.Grid) + { + style = $"grid-column: 1 / {_columns.Count + 1}"; + } + else + { + colspan = _columns.Count.ToString(); + } + - + @if (EmptyContent is null) { @("No data to show!") @@ -222,8 +234,19 @@ private void RenderLoadingContent(RenderTreeBuilder __builder) { + string? style = null; + string? colspan = null; + if (DisplayMode == DataGridDisplayMode.Grid) + { + style = $"grid-column: 1 / {_columns.Count + 1}"; + } + else + { + colspan = _columns.Count.ToString(CultureInfo.InvariantCulture); + } + - + @if (LoadingContent is null) { diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index 630a1ed521..54b9552eb7 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -275,6 +275,13 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve [Parameter] public bool AutoItemsPerPage { get; set; } + /// + /// Gets or set the of the grid. + /// Default is 'Grid'. + /// When set to Grid, can be used to specify column widths. + /// When set to Table, widths need to be specified at the column level. + /// When using , it is recommended to use Table. + /// [Parameter] public DataGridDisplayMode DisplayMode { get; set; } = DataGridDisplayMode.Grid; @@ -759,6 +766,7 @@ private async Task RefreshDataCoreAsync() // TODO: Consider making this configurable, or smarter (e.g., doesn't delay on first call in a batch, then the amount // of delay increases if you rapidly issue repeated requests, such as when scrolling a long way) await Task.Delay(100); + if (request.CancellationToken.IsCancellationRequested) { return default; @@ -801,10 +809,9 @@ private async Task RefreshDataCoreAsync() // the virtualized start _index. It might be more performant just to have some _latestQueryRowStartIndex field, but we'd have // to make sure it doesn't get out of sync with the rows being rendered. return new ItemsProviderResult<(int, TGridItem)>( - items: providerResult.Items.Select((x, i) => ValueTuple.Create(i + request.StartIndex + 2, x)), - totalItemCount: _internalGridContext.TotalViewItemCount); + items: providerResult.Items.Select((x, i) => ValueTuple.Create(i + request.StartIndex + 2, x)), + totalItemCount: _internalGridContext.TotalViewItemCount); } - return default; } @@ -858,10 +865,11 @@ private string AriaSortValue(ColumnBase column) private string? StyleValue => new StyleBuilder(Style) .AddStyle("grid-template-columns", _internalGridTemplateColumns, !string.IsNullOrWhiteSpace(_internalGridTemplateColumns) && DisplayMode == DataGridDisplayMode.Grid) - .AddStyle("grid-template-rows", "auto 1fr", _internalGridContext.Items.Count == 0 || Items is null) - .AddStyle("height", $"calc(100% - {(int)RowSize}px)", _internalGridContext.TotalItemCount == 0 || EffectiveLoadingValue) + .AddStyle("grid-template-rows", "auto 1fr", (_internalGridContext.Items.Count == 0 || Items is null || EffectiveLoadingValue) && DisplayMode == DataGridDisplayMode.Grid) + .AddStyle("height", "100%", _internalGridContext.TotalItemCount == 0 || EffectiveLoadingValue) .AddStyle("border-collapse", "separate", GenerateHeader == GenerateHeaderOption.Sticky) .AddStyle("border-spacing", "0", GenerateHeader == GenerateHeaderOption.Sticky) + .AddStyle("width", "100%", DisplayMode == DataGridDisplayMode.Table) .Build(); private string? ColumnHeaderClass(ColumnBase column) diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs index 35836e2c5e..0545304c61 100644 --- a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs @@ -68,14 +68,14 @@ public partial class FluentDataGridCell : FluentComponentBase .Build(); protected string? StyleValue => new StyleBuilder(Style) - .AddStyle("grid-column", GridColumn.ToString(), () => (!Grid.EffectiveLoadingValue && (Grid.Items is not null || Grid.ItemsProvider is not null)) || Grid.Virtualize) + .AddStyle("grid-column", GridColumn.ToString(), () => (!Grid.EffectiveLoadingValue && (Grid.Items is not null || Grid.ItemsProvider is not null)) || (Grid.Virtualize && Grid.DisplayMode == DataGridDisplayMode.Grid)) .AddStyle("text-align", "center", Column is SelectColumn) .AddStyle("align-content", "center", Column is SelectColumn) .AddStyle("padding-inline-start", "calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px)", Column is SelectColumn && Owner.RowType == DataGridRowType.Default) .AddStyle("padding-top", "calc(var(--design-unit) * 2.5px)", Column is SelectColumn && (Grid.RowSize == DataGridRowSize.Medium || Owner.RowType == DataGridRowType.Header)) .AddStyle("padding-top", "calc(var(--design-unit) * 1.5px)", Column is SelectColumn && Grid.RowSize == DataGridRowSize.Small && Owner.RowType == DataGridRowType.Default) .AddStyle("width", Column?.Width, !string.IsNullOrEmpty(Column?.Width) && Grid.DisplayMode == DataGridDisplayMode.Table) - .AddStyle("height", $"{Grid.ItemSize:0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize && Owner.RowType == DataGridRowType.Default) + .AddStyle("height", $"{Grid.ItemSize:0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize && Owner.RowType == DataGridRowType.Default && Grid.DisplayMode == DataGridDisplayMode.Grid) .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)