[dev-v5] Add DataGrid - part 4, docs and examples

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridTypical.razor

@@ -15,7 +15,7 @@
                     RowStyle="@rowStyle"
                     ShowHover="true"
                     HeaderCellAsButtonWithMenu="true">
-        <TemplateColumn Tooltip="true" TooltipText="@(c => "Flag of " + c.Name)" Title="Rank" SortBy="@rankSort" Align="HorizontalAlignment.Center" InitialSortDirection="DataGridSortDirection.Ascending" IsDefaultSortColumn=true>
+        <TemplateColumn Tooltip="true" TooltipText="@(c => "Flag of " + c.Name)" Title="Rank" SortBy="@rankSort" Align="DataGridCellAlignment.Center" InitialSortDirection="DataGridSortDirection.Ascending" IsDefaultSortColumn=true>
             <img class="flag" src="@(context.Flag())" alt="Flag of @(context.Code)" />
         </TemplateColumn>
         <PropertyColumn Property="@(c => c.Name)" Sortable="true" Filtered="!string.IsNullOrWhiteSpace(nameFilter)" Tooltip="true" Title="Name of the country">
@@ -25,10 +25,10 @@
                 </div>
             </ColumnOptions>
         </PropertyColumn>
-        <PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" Align="HorizontalAlignment.Start" Tooltip="true" TooltipText="@(c => "That is " + c.Medals.Gold + " x GOLD!!")" />
-        <PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" Align="HorizontalAlignment.Center" Tooltip="true" />
-        <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="false" Align="HorizontalAlignment.End" />
-        <PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" Filtered="@(minMedals != 0 || maxMedals != 130)" Align="HorizontalAlignment.End" Tooltip="true">
+        <PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" Align="DataGridCellAlignment.Start" Tooltip="true" TooltipText="@(c => "That is " + c.Medals.Gold + " x GOLD!!")" />
+        <PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" Align="DataGridCellAlignment.Center" Tooltip="true" />
+        <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="false" Align="DataGridCellAlignment.End" />
+        <PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" Filtered="@(minMedals != 0 || maxMedals != 130)" Align="DataGridCellAlignment.End" Tooltip="true">
             <ColumnOptions>
                 <div style="width: 100%; height: 150px;">
                     <FluentSlider Label="@($"Min ({minMedals})")" Min="0" Max="150" Step="10" Orientation="Orientation.Horizontal" @bind-Value=minMedals Immediate="true" Style="width: 100%;" />

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentDataGrid.md

@@ -8,6 +8,6 @@ have now been replaced with our standard Localization capabilities. You can use
 An example of this can be found in the `Server` project of the demo application, where a custom localizer is registered in the `Program.cs` file.
 
 ### Enum changes
-- `Align` has been renamed to `HorizontalAlignment`
+- `Align` has been renamed to `DataGridCellAlignment`
 - `GenerateHeaderOption` has been renamed to `DataGridGeneratedHeaderType`
 - `SortDirection` has been renamed to `DataGridSortDirection`

src/Core/Components/DataGrid/Columns/ColumnBase.razor

@@ -1,5 +1,6 @@
 @using Microsoft.AspNetCore.Components.Rendering
 @using Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure
+@using Microsoft.FluentUI.AspNetCore.Components.Extensions
 @namespace Microsoft.FluentUI.AspNetCore.Components
 @typeparam TGridItem
 @{
@@ -40,16 +41,16 @@
                     {
                         if (Grid.SortByAscending == true)
                         {
-                            <FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortUp())" Slot="@(Align == HorizontalAlignment.End ? "start" : "end")" Style="opacity: var(--fluent-data-grid-header-opacity);" />
+                            <FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortUp())" Slot="@(Align == DataGridCellAlignment.End ? "start" : "end")" Style="opacity: var(--fluent-data-grid-header-opacity);" />
                         }
                         else
                         {
-                            <FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortDown())" Slot="@(Align == HorizontalAlignment.End ? "start" : "end")" Style="opacity: var(--fluent-data-grid-header-opacity);" />
+                            <FluentIcon Value="@(new CoreIcons.Regular.Size20.ArrowSortDown())" Slot="@(Align == DataGridCellAlignment.End ? "start" : "end")" Style="opacity: var(--fluent-data-grid-header-opacity);" />
                         }
                     }
                     @if (ColumnOptions is not null && Filtered.GetValueOrDefault())
                     {
-                        <FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="@(Align == HorizontalAlignment.End ? "start" : "end")" Style="opacity: var(--fluent-data-grid-header-opacity);" />
+                        <FluentIcon Value="@(new CoreIcons.Regular.Size20.Filter())" Slot="@(Align == DataGridCellAlignment.End ? "start" : "end")" Style="opacity: var(--fluent-data-grid-header-opacity);" />
                     }
                 </FluentButton>
             }
@@ -99,16 +100,10 @@
             string? align;
 
             // determine align string based on Align value
-            align = Align switch
-            {
-                HorizontalAlignment.Start => "flex-start",
-                HorizontalAlignment.Center => "center",
-                HorizontalAlignment.End => "flex-end",
-                _ => "flex-start"
-            };
+            align = Align.ToAttributeValue();
 
             <div style="display: flex; justify-content: @align;">
-                @if (Align == HorizontalAlignment.Start || Align == HorizontalAlignment.Center)
+                @if (Align == DataGridCellAlignment.Start || Align == DataGridCellAlignment.Center)
                 {
                     @if (Grid.ResizeType is not null)
                     {
@@ -164,7 +159,7 @@
                     </div>
                 }
 
-                @if (Align == HorizontalAlignment.End)
+                @if (Align == DataGridCellAlignment.End)
                 {
                     @if (Grid.ResizeType is not null)
                     {

src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs

@@ -93,7 +93,7 @@ public abstract partial class ColumnBase<TGridItem>
     /// If specified, controls the justification of header and grid cells for this column.
     /// </summary>
     [Parameter]
-    public HorizontalAlignment Align { get; set; }
+    public DataGridCellAlignment Align { get; set; }
 
     /// <summary>
     /// If true, generates a title and aria-label attribute for the cell contents
@@ -207,7 +207,7 @@ protected override void OnInitialized()
     {
         if (GetType() == typeof(SelectColumn<TGridItem>))
         {
-            Align = HorizontalAlignment.Center;
+            Align = DataGridCellAlignment.Center;
         }
     }
 

src/Core/Components/DataGrid/Columns/SelectColumn.cs

@@ -500,7 +500,7 @@ private void RefreshHeaderContent()
                 builder.OpenElement(0, "div");
                 if (!SelectAllDisabled)
                 {
-                    builder.AddAttribute(1, "style", "cursor: pointer; margin-left: 12px;");
+                    builder.AddAttribute(1, "style", "cursor: pointer;");
                     builder.AddAttribute(2, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, OnClickAllAsync));
                     builder.AddAttribute(3, "onkeydown", EventCallback.Factory.Create<KeyboardEventArgs>(this, OnKeyAllAsync));
                 }

src/Core/Components/DataGrid/FluentDataGrid.razor.cs

@@ -19,8 +19,8 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 /// <typeparam name="TGridItem">The type of data represented by each row in the grid.</typeparam>
 [CascadingTypeParameter(nameof(TGridItem))]
 
-[System.Diagnostics.CodeAnalysis.SuppressMessage("Usage", "MA0040:Forward the CancellationToken parameter to methods that take one", Justification = "The available cancellation token are not appropriate to pass along.")]
-public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEvent, IAsyncDisposable
+[SuppressMessage("Usage", "MA0040:Forward the CancellationToken parameter to methods that take one", Justification = "The available cancellation token are not appropriate to pass along.")]
+public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEvent
 {
     private const string JAVASCRIPT_FILE = FluentJSModule.JAVASCRIPT_ROOT + "DataGrid/FluentDataGrid.razor.js";
 
@@ -926,27 +926,18 @@ private string AriaSortValue(ColumnBase<TGridItem> column)
     private static string? ColumnJustifyClass(ColumnBase<TGridItem> column)
     {
         return new CssBuilder(column.Class)
-            .AddClass("col-justify-start", column.Align == HorizontalAlignment.Start)
-            .AddClass("col-justify-center", column.Align == HorizontalAlignment.Center)
-            .AddClass("col-justify-end", column.Align == HorizontalAlignment.End)
+            .AddClass("col-justify-start", column.Align == DataGridCellAlignment.Start)
+            .AddClass("col-justify-center", column.Align == DataGridCellAlignment.Center)
+            .AddClass("col-justify-end", column.Align == DataGridCellAlignment.End)
             .Build();
     }
 
-    /// <summary>
-    /// Unregister the grid events
-    /// </summary>
-    /// <param name="jsModule"></param>
-    /// <returns></returns>
-    [ExcludeFromCodeCoverage]
-    protected override async ValueTask DisposeAsync(IJSObjectReference jsModule)
+    /// <inheritdoc/>
+    [ExcludeFromCodeCoverage(Justification = "Tested via integration tests.")]
+    public override ValueTask DisposeAsync()
     {
         _currentPageItemsChanged.Dispose();
-
-        if (_jsEventDisposable is not null)
-        {
-            await _jsEventDisposable.InvokeVoidAsync("dispose");
-            await _jsEventDisposable.DisposeAsync().ConfigureAwait(false);
-        }
+        return base.DisposeAsync();
     }
 
     internal void LoadStateFromQueryString(string queryString)

src/Core/Components/DataGrid/FluentDataGridRow.razor.cs

@@ -18,7 +18,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 /// well as managing the layout and content of the row.</remarks>
 /// <typeparam name="TGridItem">The type of the data item associated with the row.</typeparam>
 [CascadingTypeParameter(nameof(TGridItem))]
-public partial class FluentDataGridRow<TGridItem> : FluentComponentBase, IHandleEvent, IDisposable
+public partial class FluentDataGridRow<TGridItem> : FluentComponentBase, IHandleEvent
 {
     private readonly Dictionary<string, FluentDataGridCell<TGridItem>> cells = [];
     internal string RowId { get; set; } = string.Empty;
@@ -94,11 +94,11 @@ public void SetRowIndex(int rowIndex)
         RowIndex = rowIndex;
     }
 
-    /// <summary />
-    public void Dispose()
+    /// <inheritdoc />
+    public override ValueTask DisposeAsync()
     {
-        GC.SuppressFinalize(this);
         InternalGridContext.Unregister(this);
+        return base.DisposeAsync();
     }
 
     /// <summary />

src/Core/Components/Icons/CoreIcons.cs

@@ -78,12 +78,19 @@ internal static partial class Filled
         internal static partial class Size20
         {
             public class CheckmarkCircle : Icon { public CheckmarkCircle() : base("CheckmarkCircle", IconVariant.Filled, IconSize.Size20, "<path d=\"M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm3.36 5.65a.5.5 0 0 0-.64-.06l-.07.06L9 11.3 7.35 9.65l-.07-.06a.5.5 0 0 0-.7.7l.07.07 2 2 .07.06c.17.11.4.11.56 0l.07-.06 4-4 .07-.08a.5.5 0 0 0-.06-.63Z\"/>") { } }
+
             public class DismissCircle : Icon { public DismissCircle() : base("DismissCircle", IconVariant.Filled, IconSize.Size20, "<path d=\"M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16ZM7.8 7.11a.5.5 0 0 0-.63.06l-.06.07a.5.5 0 0 0 .06.64L9.3 10l-2.12 2.12-.06.07a.5.5 0 0 0 .06.64l.07.06c.2.13.47.11.64-.06L10 10.7l2.12 2.12.07.06c.2.13.46.11.64-.06l.06-.07a.5.5 0 0 0-.06-.64L10.7 10l2.12-2.12.06-.07a.5.5 0 0 0-.06-.64l-.07-.06a.5.5 0 0 0-.64.06L10 9.3 7.88 7.17l-.07-.06Z\"/>") { } }
+
             public class Info : Icon { public Info() : base("Info", IconVariant.Filled, IconSize.Size20, "<path d=\"M18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0ZM9.5 8.91a.5.5 0 0 1 1 0V13.6a.5.5 0 0 1-1 0V8.9Zm-.25-2.16a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z\"/>") { } }
+
             public class Warning : Icon { public Warning() : base("Warning", IconVariant.Filled, IconSize.Size20, "<path d=\"M8.68 2.79a1.5 1.5 0 0 1 2.64 0l6.5 12A1.5 1.5 0 0 1 16.5 17h-13a1.5 1.5 0 0 1-1.32-2.21l6.5-12ZM10.5 7.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 1 0v-4Zm.25 6.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z\"/>") { } }
+
             public class CheckboxChecked : Icon { public CheckboxChecked() : base("CheckboxChecked", IconVariant.Filled, IconSize.Size20, "<path d=\"M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Zm7.85 4.85-5 5a.5.5 0 0 1-.7 0l-2-2a.5.5 0 0 1 .7-.7l1.65 1.64 4.65-4.64a.5.5 0 0 1 .7.7Z\" />") { } }
+
             public class CheckboxIndeterminate : Icon { public CheckboxIndeterminate() : base("CheckboxIndeterminate", IconVariant.Filled, IconSize.Size20, "<path d=\"M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z\"></path><path d=\"M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4.5 6c0-.83.67-1.5 1.5-1.5h8c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H6A1.5 1.5 0 0 1 4.5 14V6ZM7 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Z\"></path>") { } }
+
             public class RadioButton : Icon { public RadioButton() : base("RadioButton", IconVariant.Regular, IconSize.Size20, "<path d=\"M10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-13a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-7 8a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z\" />") { } };
+
             public class Star : Icon { public Star() : base("Star", IconVariant.Filled, IconSize.Size20, "<path d=\"M9.1 2.9a1 1 0 0 1 1.8 0l1.93 3.91 4.31.63a1 1 0 0 1 .56 1.7l-3.12 3.05.73 4.3a1 1 0 0 1-1.45 1.05L10 15.51l-3.86 2.03a1 1 0 0 1-1.45-1.05l.74-4.3L2.3 9.14a1 1 0 0 1 .56-1.7l4.31-.63L9.1 2.9Z\"></path>") { } };
         }
     }

src/Core/Components/Pagination/FluentPaginator.razor.cs

@@ -10,7 +10,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 /// <summary>
 /// A component that provides a user interface for <see cref="PaginationState"/>.
 /// </summary>
-public partial class FluentPaginator : FluentComponentBase, IDisposable
+public partial class FluentPaginator : FluentComponentBase
 {
     private readonly EventCallbackSubscriber<PaginationState> _totalItemCountChanged;
     private readonly EventCallbackSubscriber<PaginationState> _currentPageItemsChanged;
@@ -77,12 +77,11 @@ protected override void OnParametersSet()
     }
 
     /// <inheritdoc />
-    public void Dispose()
+    public override ValueTask DisposeAsync()
     {
-        GC.SuppressFinalize(this);
-
         _totalItemCountChanged.Dispose();
         _currentPageItemsChanged.Dispose();
+        return base.DisposeAsync();
     }
 
     private bool CanGoBack => State.CurrentPageIndex > 0;

src/Core/Enums/DataGridCellAlignment.cs

@@ -0,0 +1,31 @@
+// ------------------------------------------------------------------------
+// This file is licensed to you under the MIT License.
+// ------------------------------------------------------------------------
+
+using System.ComponentModel;
+
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+/// <summary>
+/// The horizontal alignment of content in a <see cref="FluentDataGridCell{TGridItem}"/>.
+/// </summary>
+public enum DataGridCellAlignment
+{
+    /// <summary>
+    /// A start aligned cell.
+    /// </summary>
+    [Description("flex-start")]
+    Start,
+
+    /// <summary>
+    /// A center aligned cell.
+    /// </summary>
+    [Description("center")]
+    Center,
+
+    /// <summary>
+    /// An end aligned cell.
+    /// </summary>
+    [Description("flex-end")]
+    End,
+}

src/Core/Infrastructure/EventCallbackSubscribable.cs

@@ -35,11 +35,18 @@ public async Task InvokeCallbacksAsync(T eventArg)
         }
     }
 
-    // Don't call this directly - it gets called by EventCallbackSubscription
+    /// <summary>
+    /// Don't call this directly - it gets called by EventCallbackSubscription
+    /// </summary>
+    /// <param name="owner">The subscriber that owns this callback.</param>
+    /// <param name="callback">The callback to invoke.</param>
     public void Subscribe(EventCallbackSubscriber<T> owner, EventCallback<T> callback)
         => _callbacks.TryAdd(owner, callback);
 
-    // Don't call this directly - it gets called by EventCallbackSubscription
+    /// <summary>
+    /// Don't call this directly - it gets called by EventCallbackSubscription
+    /// <param name="owner">The subscriber that owns this callback.</param>
+    /// </summary>
     public void Unsubscribe(EventCallbackSubscriber<T> owner)
         => _callbacks.TryRemove(owner, out _);
 }

tests/Core/Components/DataGrid/FluentDataGridRowTests.razor

@@ -354,27 +354,6 @@
         Assert.False(OnRowKeyDownInvoked);
     }
 
-    [Fact]
-    public void FluentDataGridRow_Dispose()
-    {
-        // Arrange
-        var grid = Render<FluentDataGrid<object>>(
-            @<FluentDataGrid TGridItem="object">
-            <FluentDataGridRow>
-                <FluentDataGridCell />
-            </FluentDataGridRow>
-        </FluentDataGrid>
-    );
-
-        // Act
-        var cell = grid.FindComponent<FluentDataGridRow<object>>();
-        cell.Instance.Dispose();
-        cell.Dispose();
-
-        // Assert
-        Assert.True(cell.IsDisposed);
-    }
-
     public bool OnRowClickInvoked { get; set; }
     public bool OnRowDoubleClickInvoked { get; set; }
     public bool OnRowFocusInvoked { get; set; }

tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html

@@ -2,7 +2,7 @@
 <table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr;" aria-rowcount="4" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" blazor:elementreference="xxx">
   <thead>
     <tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="5" blazor:onfocus="6">
-      <th col-index="1" class="column-header col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
+      <th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; z-index: 5;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="25" scope="col" aria-sort="ascending">
         <div style="display: flex; justify-content: flex-start;">
           <div class="col-title" style="width: calc(100% - 10px);">
             <div class="col-title-text">Name</div>
@@ -13,13 +13,13 @@
   </thead>
   <tbody>
     <tr class="fluent-data-grid-row" data-row-index="2" role="row" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="13" blazor:onfocus="14" aria-rowindex="2">
-      <td col-index="1" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28">Denis Voituron</td>
+      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="28">Denis Voituron</td>
     </tr>
     <tr class="fluent-data-grid-row" data-row-index="3" role="row" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="17" blazor:onfocus="18" aria-rowindex="3">
-      <td col-index="1" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="31">Vincent Baaij</td>
+      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="31">Vincent Baaij</td>
     </tr>
     <tr class="fluent-data-grid-row" data-row-index="4" role="row" blazor:onkeydown="x" blazor:onclick="x" blazor:ondblclick="21" blazor:onfocus="22" aria-rowindex="4">
-      <td col-index="1" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="34">Bill Gates</td>
+      <td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="x" blazor:onclick="x" blazor:onfocus="34">Bill Gates</td>
     </tr>
   </tbody>
 </table>