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

examples/Demo/FluentUI.Demo/MyLocalizer.cs

@@ -3,6 +3,7 @@
 // ------------------------------------------------------------------------
 
 using Microsoft.FluentUI.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Localization;
 using System.Globalization;
 
 namespace FluentUI.Demo;
@@ -34,7 +35,7 @@ internal class MyLocalizer : IFluentLocalizer
             // Provide custom translations based on the key
             return key switch
             {
-                "DataGrid_ResizeDiscrete" => "Width (+/- 10px)",
+                LanguageResource.DataGrid_ResizeDiscrete => "Width (+/- 10px)",
 
                 // Fallback to the Default/English if no translation is found
                 _ => IFluentLocalizer.GetDefault(key, arguments),

src/Core/Localization/LanguageResource.resx

@@ -276,4 +276,7 @@
   <data name="DataGrid_ResizeSubmit" xml:space="preserve">
     <value>Set column widths</value>
   </data>
+  <data name="MessageBar_Dismiss" xml:space="preserve">
+    <value>Hide this message</value>
+  </data>
 </root>

tests/Core/Components/DataGrid/FluentDataGridCellTests.razor

@@ -46,8 +46,10 @@
     public async Task FluentDataGridCell_HandleOnCellClickAsync_InvokesCallbacks()
     {
         // Arrange
+        var cellClickInvoked = false;
+
         var cut = Render<FluentDataGrid<object>>(
-            @<FluentDataGrid TGridItem="object" OnCellClick="HandleCellClick">
+            @<FluentDataGrid TGridItem="object" OnCellClick="@(e => cellClickInvoked = true )">
                 <FluentDataGridRow>
                     <FluentDataGridCell />
                 </FluentDataGridRow>
@@ -57,15 +59,16 @@
         await cell.Instance.HandleOnCellClickAsync();
 
         // Assert
-        Assert.True(OnCellClickInvoked);
+        Assert.True(cellClickInvoked);
     }
 
     [Fact]
     public async Task FluentDataGridCell_HandleOnCellFocusAsync_InvokesCallbacks()
     {
         // Arrange
+        var cellFocusInvoked = false;
         var cut = Render<FluentDataGrid<object>>(
-            @<FluentDataGrid TGridItem="object" OnCellFocus="HandleCellFocus">
+            @<FluentDataGrid TGridItem="object" OnCellFocus="@(e => cellFocusInvoked = true)">
                 <FluentDataGridRow>
                     <FluentDataGridCell />
                 </FluentDataGridRow>
@@ -75,22 +78,23 @@
         var cell = cut.FindComponent<FluentDataGridCell<object>>();
         await cell.Instance.HandleOnCellFocusAsync();
         // Assert
-        Assert.True(OnCellFocusInvoked);
+        Assert.True(cellFocusInvoked);
     }
 
     [Fact]
     public async Task FluentDataGridCell_HandleOnCellKeyDownAsync_HandlesKeyEnter()
     {
         // Arrange
         var items = new List<Person>(People).AsQueryable();
+        var cellKeyDownInvoked = false;
 
         var cut = Render<FluentDataGrid<Person>>(
             @<FluentDataGrid TGridItem="Person" Items="@People" GenerateHeader="DataGridGeneratedHeaderType.None">
             <SelectColumn TGridItem="Person"
                           SelectMode="DataGridSelectMode.Multiple"
                           Selectable="@(x => x.PersonId > 0)"
                           SelectFromEntireRow="false"
-                          OnSelect="HandleCellKeyDown" />
+                          OnSelect="@(e => cellKeyDownInvoked = e.Selected)" />
                 <PropertyColumn Property="@(x => x)" Title="Value" />
             </FluentDataGrid>);
 
@@ -100,47 +104,50 @@
         await cell.Instance.HandleOnCellKeyDownAsync(keyboardEvent);
 
         // Assert
-        Assert.True(OnCellKeyDownInvoked);
+        Assert.True(cellKeyDownInvoked);
     }
 
     [Fact]
     public async Task FluentDataGridCell_HandleOnCellKeyDownAsync_HandlesKeyEnter_EntireRow()
     {
         // Arrange
         var items = new List<Person>(People).AsQueryable();
+        var cellKeyDownInvoked = false;
 
         var cut = Render<FluentDataGrid<Person>>(
             @<FluentDataGrid TGridItem="Person" Items="@People" GenerateHeader="DataGridGeneratedHeaderType.None">
-            <SelectColumn TGridItem="Person"
-                          SelectMode="DataGridSelectMode.Multiple"
-                          Selectable="@(x => x.PersonId > 0)"
-                          SelectFromEntireRow="true"
-                          OnSelect="HandleCellKeyDown" />
-            <PropertyColumn Property="@(x => x)" Title="Value" />
-        </FluentDataGrid>);
+                <SelectColumn TGridItem="Person"
+                              SelectMode="DataGridSelectMode.Multiple"
+                              Selectable="@(x => x.PersonId > 0)"
+                              SelectFromEntireRow="true"
+                              OnSelect="@(e => cellKeyDownInvoked = e.Selected)" /> />
+                <PropertyColumn Property="@(x => x)" Title="Value" />
+            </FluentDataGrid>
+        );
 
         // Act
         var keyboardEvent = new KeyboardEventArgs { Code = "Enter" };
         var cell = cut.FindComponent<FluentDataGridCell<Person>>();
         await cell.Instance.HandleOnCellKeyDownAsync(keyboardEvent);
 
         // Assert
-        Assert.False(OnCellKeyDownInvoked);
+        Assert.False(cellKeyDownInvoked);
     }
 
     [Fact]
     public async Task FluentDataGridCell_HandleOnCellKeyDownAsync_HandlesKeyOther()
     {
         // Arrange
         var items = new List<Person>(People).AsQueryable();
+        var cellKeyDownInvoked = false;
 
         var cut = Render<FluentDataGrid<Person>>(
             @<FluentDataGrid TGridItem="Person" Items="@People" GenerateHeader="DataGridGeneratedHeaderType.None">
             <SelectColumn TGridItem="Person"
                           SelectMode="DataGridSelectMode.Multiple"
                           Selectable="@(x => x.PersonId > 1)"
                           SelectFromEntireRow="false"
-                          OnSelect="HandleCellKeyDown" />
+                          OnSelect="@(e => cellKeyDownInvoked = e.Selected)" />
             <PropertyColumn Property="@(x => x)" Title="Value" />
         </FluentDataGrid>);
 
@@ -150,7 +157,7 @@
         await cell.Instance.HandleOnCellKeyDownAsync(keyboardEvent);
 
         // Assert
-        Assert.False(OnCellKeyDownInvoked);
+        Assert.False(cellKeyDownInvoked);
     }
 
     [Fact]
@@ -174,40 +181,4 @@
         Assert.True(cell.IsDisposed);
 
     }
-
-    public bool OnCellClickInvoked { get; set; }
-    public bool OnCellFocusInvoked { get; set; }
-    public bool OnCellKeyDownInvoked { get; set; }
-
-
-    private void HandleCellClick()
-    {
-        // This method simulates the callback that would be invoked on cell click
-        // In a real scenario, this would be defined in the FluentDataGrid component
-        // and passed to the FluentDataGridCell.
-        OnCellClickInvoked = true;
-    }
-
-    private void HandleCellFocus()
-    {
-        // This method simulates the callback that would be invoked on cell focus
-        // In a real scenario, this would be defined in the FluentDataGrid component
-        // and passed to the FluentDataGridCell.
-        OnCellFocusInvoked = true;
-    }
-
-    private void HandleCellKeyDown((Person person, bool selected) e)
-    {
-        // This method simulates the callback that would be invoked on cell key down
-        // In a real scenario, this would be defined in the FluentDataGrid component
-        // and passed to the FluentDataGridCell.
-        if (e.selected )
-        {
-            OnCellKeyDownInvoked = true;
-        }
-        else
-        {
-            OnCellKeyDownInvoked = false;
-        }
-    }
 }