From 1568fbfe44c02092ff34e5d4f7e888babf7faba8 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Sun, 21 Apr 2024 10:54:20 +0200 Subject: [PATCH] Add coulumn Width parameter (#1902) --- .../Microsoft.FluentUI.AspNetCore.Components.xml | 8 ++++---- .../Shared/Pages/DataGrid/DataGridPage.razor | 6 +++++- .../Examples/DataGridDynamicColumns.razor | 14 +++++++++----- .../DataGrid/Columns/ColumnBase.razor.cs | 7 +++++++ .../DataGrid/Columns/PropertyColumn.cs | 2 +- .../Components/DataGrid/FluentDataGrid.razor | 4 ++-- .../Components/DataGrid/FluentDataGrid.razor.cs | 16 ++++++++++++++++ 7 files changed, 44 insertions(+), 13 deletions(-) diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index faaadff035..6dcc0bff24 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -1340,11 +1340,11 @@ - - Optionally specifies how to compare values in this column when sorting. + + Optionally specifies how to compare values in this column when sorting. - Using this requires the type to implement . - + Using this requires the type to implement . + diff --git a/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor b/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor index 41bd05c844..fe1e6b606b 100644 --- a/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor +++ b/examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor @@ -25,7 +25,7 @@

You can use the Arrow keys to navigate through a DataGrid. When a header cell is focused and the column is sortable, you can use the Tab key to select the sort button. Pressing the Enter key will toggle the sorting direction. Pressing Ctrl+Enter removes the column sorting and restores the default/start situation with regards to sorting. - You cannot not remove the default grid sorting with this key combination. + You cannot remove the default grid sorting with this key combination.

When a header cell is focused and the column allows setting options, you can use the Tab key to select the options button. @@ -154,6 +154,10 @@

You can make columns appear conditionally using normal Razor logic such as @@if. Example:

+

+ Also, in this example the columns's Width parameter is being set instead of specifying all widths for all + columns in the GridTemplateColumn parameter. +

diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridDynamicColumns.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridDynamicColumns.razor index 8528d53011..f79bfcbb4f 100644 --- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridDynamicColumns.razor +++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridDynamicColumns.razor @@ -7,17 +7,21 @@

- - + + @if (showName) { - + @context.LastName, @context.FirstName } @if (showBirthDate) { - + } @@ -25,4 +29,4 @@ @code { bool showName = true; bool showBirthDate = false; -} \ No newline at end of file +} diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs index 2f1036c235..40da078af5 100644 --- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs +++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs @@ -100,6 +100,13 @@ public abstract partial class ColumnBase /// [Parameter] public RenderFragment? PlaceholderTemplate { get; set; } + /// + /// Gets or sets the width of the column. + /// Use either this or the GridTemplateColumns parameter but not both. + /// Needs to be a valid CSS width value like '100px', '10%' or '0.5fr'. + /// + [Parameter] public string? Width { get; set; } + /// /// Gets a reference to the enclosing . /// diff --git a/src/Core/Components/DataGrid/Columns/PropertyColumn.cs b/src/Core/Components/DataGrid/Columns/PropertyColumn.cs index 876bc609d4..d49e556fa9 100644 --- a/src/Core/Components/DataGrid/Columns/PropertyColumn.cs +++ b/src/Core/Components/DataGrid/Columns/PropertyColumn.cs @@ -36,7 +36,7 @@ public class PropertyColumn : ColumnBase, IBindable /// /// Optionally specifies how to compare values in this column when sorting. - /// + /// /// Using this requires the type to implement . /// [Parameter] public IComparer? Comparer { get; set; } = null; diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor index b8bd7f5fa6..a5e48383ca 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor @@ -15,7 +15,7 @@ + @for (var colIndex = 0; colIndex < _columns.Count; colIndex++) { var col = _columns[colIndex]; diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs index 3310bae2c1..1bab90b525 100644 --- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs @@ -102,6 +102,8 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve /// /// Gets or sets the value that gets applied to the css gridTemplateColumns attribute of child rows. + /// Can be specified here or on the column level with the Width parameter but not both. + /// Needs to be a valid CSS string of space-separated values, such as "auto 1fr 2fr 100px". /// [Parameter] public string? GridTemplateColumns { get; set; } = null; @@ -181,6 +183,8 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve private readonly RenderFragment _renderEmptyContent; private readonly RenderFragment _renderLoadingContent; + private string? _internalGridTemplateColumns; + // We try to minimize the number of times we query the items provider, since queries may be expensive // We only re-query when the developer calls RefreshDataAsync, or if we know something's changed, such // as sort order, the pagination state, or the data source itself. These fields help us detect when @@ -207,6 +211,7 @@ public FluentDataGrid() _renderNonVirtualizedRows = RenderNonVirtualizedRows; _renderEmptyContent = RenderEmptyContent; _renderLoadingContent = RenderLoadingContent; + _internalGridTemplateColumns = GridTemplateColumns; // As a special case, we don't issue the first data load request until we've collected the initial set of columns // This is so we can apply default sort order (or any future per-column options) before loading data @@ -299,6 +304,17 @@ private void FinishCollectingColumns() { _collectingColumns = false; _manualGrid = _columns.Count == 0; + + if (!string.IsNullOrWhiteSpace(GridTemplateColumns) && _columns.Any(x => !string.IsNullOrWhiteSpace(x.Width))) + { + throw new Exception("You can use either the 'GridTemplateColumns' parameter on the grid or the 'Width' property at the column level, not both."); + } + + if (string.IsNullOrWhiteSpace(_internalGridTemplateColumns) && _columns.Any(x => !string.IsNullOrWhiteSpace(x.Width))) + { + _internalGridTemplateColumns = string.Join(" ", _columns.Select(x => x.Width ?? "auto")); + } + if (ResizableColumns) { _ = Module?.InvokeVoidAsync("enableColumnResizing", _gridReference).AsTask();