Use localized strings

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

@@ -14,8 +14,7 @@
                     RowClass="@rowClass"
                     RowStyle="@rowStyle"
                     ShowHover="true"
-                    HeaderCellAsButtonWithMenu="true"
-                    ColumnResizeUISettings="@resizeLabels">
+                    HeaderCellAsButtonWithMenu="true">
         <TemplateColumn Tooltip="true" TooltipText="@(c => "Flag of " + c.Name)" Title="Rank" SortBy="@rankSort" Align="HorizontalAlignment.Center" InitialSortDirection="DataGridSortDirection.Ascending" IsDefaultSortColumn=true>
             <img class="flag" src="@(context.Flag())" alt="Flag of @(context.Code)" />
         </TemplateColumn>
@@ -57,12 +56,6 @@
     int minMedals;
     int maxMedals = 130;
 
-    ColumnResizeUISettings resizeLabels = ColumnResizeUISettings.Default with
-    {
-        DiscreteLabel = "Width (+/- 10px)",
-        ResetAriaLabel = "Restore"
-    };
-
     GridSort<Country> rankSort = GridSort<Country>
         .ByDescending(x => x.Medals.Gold)
         .ThenDescending(x => x.Medals.Silver)

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/FluentDataGrid.md

@@ -7,4 +7,22 @@ route: /DataGrid
 
 Overview page and examples to follow
 
+## Typical usage
+Here is an example of a data grid that uses in-memory data and enables features including pagination, sorting, filtering, column options, row highlighting and column resizing.
+
+All columns, except 'Bronze', have a `Tooltip` parameter value of `true`.
+
+- When using this for a `TemplateColumn` (like 'Rank' here), you need to also supply a value for the `TooltipText` parameter. **No value given equals no tooltip shown**.
+- When using this for a `PropertyColumn`, a value for the `TooltipText` is **not** required. By default, the value given for `Property`
+will be re-used for the tooltip. If you do supply a value for `TooltipText` its outcome will be used instead.
+
+`TooltipText` is a lambda function that takes the current item as input and returns the text to show in the tooltip (and `aria-label`).
+Look at the Razor tab to see how this is done and how it can be customized.
+
+The Country filter option can be used to quickly filter the list of countries shown. Pressing the ESC key just closes the option popup without changing the filtering currently being used.
+Pressing enter finishes the filter action by the current input to filter on and closes the option popup.
+
+The resize options UI is using a customized string for the label ('Width (+/- 10px)' instead of the normal 'Column width'). This is done through
+the custom localizer which is registered in the Server project's `Program.cs` file.
+
 {{ DataGridTypical }}

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

@@ -3,6 +3,10 @@
 - `ColumnResizeLabels` has been renamed to `ColumnResizeUISettings`
 - `ColumnSortLabels` has been renamed to `ColumnSortUISettings`
 
+These `...UISettings` parameters are now only used to set a custom icon and icon position. All labels that could be set in earlier versions
+have now been replaced with our standard Localization capabilities. You can use a custom localizer to set custom labels for these UI settings.
+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`
 - `GenerateHeaderOption` has been renamed to `DataGridGeneratedHeaderType`

examples/Demo/FluentUI.Demo/MyLocalizer.cs

@@ -31,9 +31,14 @@ internal class MyLocalizer : IFluentLocalizer
                     _ => IFluentLocalizer.GetDefault(key, arguments),
                 };
             }
+            // Provide custom translations based on the key
+            return key switch
+            {
+                "DataGrid_ResizeDiscrete" => "Width (+/- 10px)",
 
-            // By default, returns the English version of the string
-            return IFluentLocalizer.GetDefault(key, arguments);
+                // Fallback to the Default/English if no translation is found
+                _ => IFluentLocalizer.GetDefault(key, arguments),
+            };
         }
     }
 }

spelling.dic

@@ -85,3 +85,4 @@ gipr
 gridcell
 Voituron
 beforetoggle
+resx

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

@@ -69,7 +69,7 @@
                         {
                             <FluentMenuItem OnClick="@(async () => await Grid.SortByColumnAsync(this))" @onkeydown="HandleSortMenuKeyDownAsync"
                                             IconStart="@(Grid.ColumnSortUISettings.Icon is not null && Grid.ColumnSortUISettings.IconPositionStart ? Grid.ColumnSortUISettings.Icon : null)"
-                                            IconEnd="@(Grid.ColumnSortUISettings.Icon is not null && !Grid.ColumnSortUISettings.IconPositionStart? Grid.ColumnSortUISettings.Icon : null)">
+                                            IconEnd="@(Grid.ColumnSortUISettings.Icon is not null && !Grid.ColumnSortUISettings.IconPositionStart ? Grid.ColumnSortUISettings.Icon : null)">
                                 @GetSortOptionText()
 
                             </FluentMenuItem>
@@ -78,16 +78,16 @@
                         {
                             <FluentMenuItem OnClick="@(async () => await Grid.ShowColumnResizeAsync(this))" @onkeydown="HandleResizeMenuKeyDownAsync"
                                             IconStart="@(Grid.ColumnResizeUISettings.Icon is not null && Grid.ColumnResizeUISettings.IconPositionStart ? Grid.ColumnResizeUISettings.Icon : null)"
-                                            IconEnd="@(Grid.ColumnResizeUISettings.Icon is not null && !Grid.ColumnResizeUISettings.IconPositionStart? Grid.ColumnResizeUISettings.Icon : null)">
-                                @Grid.ColumnResizeUISettings.ResizeMenu
+                                            IconEnd="@(Grid.ColumnResizeUISettings.Icon is not null && !Grid.ColumnResizeUISettings.IconPositionStart ? Grid.ColumnResizeUISettings.Icon : null)">
+                                @Localizer[Localization.LanguageResource.DataGrid_ResizeMenu]
                             </FluentMenuItem>
                         }
                         @if (ColumnOptions is not null)
                         {
                             <FluentMenuItem OnClick="@(async () => await Grid.ShowColumnOptionsAsync(this))" @onkeydown="HandleOptionsMenuKeyDownAsync"
                                             IconStart="@(Grid.ColumnOptionsUISettings.Icon is not null && Grid.ColumnOptionsUISettings.IconPositionStart ? Grid.ColumnOptionsUISettings.Icon : null)"
-                                            IconEnd="@(Grid.ColumnOptionsUISettings.Icon is not null && !Grid.ColumnOptionsUISettings.IconPositionStart? Grid.ColumnOptionsUISettings.Icon : null)">
-                                @Grid.ColumnOptionsUISettings.OptionsMenu
+                                            IconEnd="@(Grid.ColumnOptionsUISettings.Icon is not null && !Grid.ColumnOptionsUISettings.IconPositionStart ? Grid.ColumnOptionsUISettings.Icon : null)">
+                                @Localizer[Localization.LanguageResource.DataGrid_OptionsMenu]
                             </FluentMenuItem>
                         }
                     </FluentMenuList>
@@ -197,15 +197,15 @@
     private RenderFragment OptionsButton()
     {
         return
-            @<FluentButton Appearance="ButtonAppearance.Subtle" class="col-options-button" @onclick="@(() => Grid.ShowColumnOptionsAsync(this))" aria-label="Filter this column">
+            @<FluentButton Appearance="ButtonAppearance.Subtle" class="col-options-button" @onclick="@(() => Grid.ShowColumnOptionsAsync(this))" aria-label="@Localizer[Localization.LanguageResource.DataGrid_OptionsMenu]">
             <FluentIcon Value="@(new CoreIcons.Regular.Size20.ChevronDown())" Color="Color.Default" Width="20px" Style="opacity: var(--fluent-data-grid-header-opacity);" />
         </FluentButton>;
     }
 
     private RenderFragment FilterButton()
     {
         return
-            @<FluentButton Appearance="ButtonAppearance.Subtle" class="col-options-button" @onclick="@(() => Grid.ShowColumnOptionsAsync(this))" aria-label="Filter this column">
+            @<FluentButton Appearance="ButtonAppearance.Subtle" class="col-options-button" @onclick="@(() => Grid.ShowColumnOptionsAsync(this))" aria-label="@Localizer[Localization.LanguageResource.DataGrid_OptionsMenu]">
             <FluentIcon Value="@(Grid.ColumnOptionsUISettings.Icon)" />
         </FluentButton>;
     }

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

@@ -22,6 +22,9 @@ public abstract partial class ColumnBase<TGridItem>
     private readonly string _columnId = Identifier.NewId();
     private FluentMenu? _menu;
 
+    [Inject]
+    private IFluentLocalizer Localizer { get; set; } = default!;
+
     [CascadingParameter]
     internal InternalGridContext<TGridItem> InternalGridContext { get; set; } = default!;
 
@@ -347,12 +350,12 @@ private string GetSortOptionText()
         {
             if (Grid.SortByAscending is true)
             {
-                return Grid.ColumnSortUISettings.SortMenuAscendingLabel;
+                return Localizer[Localization.LanguageResource.DataGrid_SortMenuAscending];
             }
 
-            return Grid.ColumnSortUISettings.SortMenuDescendingLabel;
+            return Localizer[Localization.LanguageResource.DataGrid_SortMenuDescending];
         }
 
-        return Grid.ColumnSortUISettings.SortMenu;
+        return Localizer[Localization.LanguageResource.DataGrid_SortMenu];
     }
 }

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

@@ -4,17 +4,12 @@
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 /// <summary>
-/// Represents the UI settings for column options (usually filtering), including labels, aria attributes, and menu options in the <see cref="FluentDataGrid{TGridItem}"/>.
+/// Represents the UI settings for column options (usually filtering).
 /// </summary>
-/// <remarks>This type provides customizable settings for the column options menu, including the menu text,  icon,
+/// <remarks>This type provides customizable settings for the column options menu icon,
 /// and icon positioning. It also includes a default configuration that can be used as a baseline.</remarks>
-public record ColumnOptionsUISettings
+public record ColumnOptionsUISettings()
 {
-    /// <summary>
-    /// Gets or sets the text shown in the column menu
-    /// </summary>
-    public string OptionsMenu { get; set; } = "Filter";
-
     /// <summary>
     /// Gets or sets the icon to show in the column menu
     /// </summary>

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

@@ -4,12 +4,12 @@
 <FluentStack Class="resize-options" VerticalAlignment="VerticalAlignment.Center" HorizontalGap="4">
     @if (ResizeType == DataGridResizeType.Discrete)
     {
-        <FluentLabel>@Grid.ColumnResizeUISettings.DiscreteLabel</FluentLabel>
+        <FluentLabel>@Localizer[Localization.LanguageResource.DataGrid_ResizeDiscrete]</FluentLabel>
 
         <FluentSpacer />
-        <FluentButton OnClick="@HandleShrinkAsync" IconStart="@(new CoreIcons.Regular.Size20.Subtract())" aria-label="@(Grid.ColumnResizeUISettings.ShrinkAriaLabel)" />
-        <FluentButton OnClick="@HandleGrowAsync" IconStart="@(new CoreIcons.Regular.Size20.Add())" aria-label="@(Grid.ColumnResizeUISettings.GrowAriaLabel)" />
-        <FluentButton OnClick="@HandleResetAsync" IconStart="@(new CoreIcons.Regular.Size20.ArrowReset())" aria-label="@(Grid.ColumnResizeUISettings.ResetAriaLabel)" />
+        <FluentButton OnClick="@HandleShrinkAsync" IconStart="@(new CoreIcons.Regular.Size20.Subtract())" aria-label="@Localizer[Localization.LanguageResource.DataGrid_ResizeShrink]" />
+        <FluentButton OnClick="@HandleGrowAsync" IconStart="@(new CoreIcons.Regular.Size20.Add())" aria-label="@Localizer[Localization.LanguageResource.DataGrid_ResizeGrow]" />
+        <FluentButton OnClick="@HandleResetAsync" IconStart="@(new CoreIcons.Regular.Size20.ArrowReset())" aria-label="@Localizer[Localization.LanguageResource.DataGrid_ResizeReset]" />
     }
     else
     {
@@ -22,14 +22,13 @@
                                  InputMode="TextInputMode.Numeric"
                                  Immediate="true"
                                  ImmediateDelay="200"
-                                 Label="@Grid.ColumnResizeUISettings.ExactLabel"
+                                 Label="@Localizer[Localization.LanguageResource.DataGrid_ResizeDiscrete]"
                                  AutoComplete="off"
                                  Autofocus="true"
-                                 @onkeydown="@HandleColumnWidthKeyDownAsync"
-                                 />
+                                 @onkeydown="@HandleColumnWidthKeyDownAsync" />
             </div>
-            <FluentButton Style="height: 30px;" OnClick="@HandleColumnWidthAsync" IconStart="@(new CoreIcons.Regular.Size20.Checkmark())" Appearance="@ButtonAppearance.Primary" aria-label="@(Grid.ColumnResizeUISettings.SubmitAriaLabel)" />
-            <FluentButton Style="height: 30px;" OnClick="@HandleResetAsync" IconStart="@(new CoreIcons.Regular.Size20.ArrowReset())" aria-label="@(Grid.ColumnResizeUISettings.ResetAriaLabel)" />
+            <FluentButton Style="height: 30px;" OnClick="@HandleColumnWidthAsync" IconStart="@(new CoreIcons.Regular.Size20.Checkmark())" Appearance="@ButtonAppearance.Primary" aria-label="@Localizer[Localization.LanguageResource.DataGrid_ResizeSubmit]" />
+            <FluentButton Style="height: 30px;" OnClick="@HandleResetAsync" IconStart="@(new CoreIcons.Regular.Size20.ArrowReset())" aria-label="@Localizer[Localization.LanguageResource.DataGrid_ResizeReset]" />
         </FluentStack>
     }
 </FluentStack>

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

@@ -19,6 +19,10 @@ public partial class ColumnResizeOptions<TGridItem>
 {
     private string? _width;
 
+    /// <summary />
+    [Inject]
+    public IFluentLocalizer Localizer { get; set; } = default!;
+
     [CascadingParameter]
     internal InternalGridContext<TGridItem> InternalGridContext { get; set; } = default!;
 

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

@@ -5,48 +5,12 @@
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 /// <summary>
-/// Represents the UI settings for column resizing, including labels, aria attributes, and menu options in the <see cref="FluentDataGrid{TGridItem}"/>.
+/// Represents the UI settings for column resizing.
 /// </summary>
-/// <remarks>This record provides customizable settings for the column resize UI, such as menu text, labels for 
-/// different resize modes, aria labels for accessibility, and icon configuration. Use this type to  configure the
+/// <remarks>This record provides customizable settings for the column resize UI, such as icon configuration. Use this type to  configure the
 /// appearance and behavior of the column resize functionality in your application.</remarks>
 public record ColumnResizeUISettings
 {
-    /// <summary>
-    /// Gets or sets the text shown in the column menu
-    /// </summary>
-    public string ResizeMenu { get; set; } = "Resize";
-
-    /// <summary>
-    /// Gets or sets the label in the discrete mode resize UI
-    /// </summary>
-    public string DiscreteLabel { get; set; } = "Column width";
-
-    /// <summary>
-    /// Gets or sets the label in the exact mode resize UI
-    /// </summary>
-    public string ExactLabel { get; set; } = "Column width (in pixels)";
-
-    /// <summary>
-    /// Gets or sets the aria label for the grow button in the discrete resize UI
-    /// </summary>
-    public string? GrowAriaLabel { get; set; } = "Grow column width";
-
-    /// <summary>
-    /// Gets or sets the aria label for the shrink button in the discrete resize UI
-    /// </summary>
-    public string? ShrinkAriaLabel { get; set; } = "Shrink column width";
-
-    /// <summary>
-    /// Gets or sets the aria label for the reset button in the resize UI
-    /// </summary>
-    public string? ResetAriaLabel { get; set; } = "Reset column widths";
-
-    /// <summary>
-    /// Gets or sets the aria label for the submit button in the resize UI
-    /// </summary>
-    public string? SubmitAriaLabel { get; set; } = "Set column widths";
-
     /// <summary>
     /// Gets or sets the icon to show in the column menu
     /// </summary>

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

@@ -4,27 +4,11 @@
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 /// <summary>
-/// Represents the UI settings for column sorting, including labels, aria attributes, and menu options in the <see cref="FluentDataGrid{TGridItem}"/>.
+/// Represents the UI settings for column sorting.
 /// </summary>
-/// <remarks>This type provides customizable options for the text and icons displayed in the column sorting menu,
-/// including labels for ascending and descending sort orders, and the position of the sort icon.</remarks>
+/// <remarks>This type provides customizable options for the icon displayed in the column sorting menu</remarks>
 public record ColumnSortUISettings
 {
-    /// <summary>
-    /// Gets or sets the text shown in the column menu
-    /// </summary>
-    public string SortMenu { get; set; } = "Sort";
-
-    /// <summary>
-    /// Gets or sets the text shown in the column menu when in ascending order
-    /// </summary>
-    public string SortMenuAscendingLabel { get; set; } = "Sort (ascending)";
-
-    /// <summary>
-    /// Gets or sets the text shown in the column menu when in descending order
-    /// </summary>
-    public string SortMenuDescendingLabel { get; set; } = "Sort (descending)";
-
     /// <summary>
     /// Gets or sets the icon to show in the column menu
     /// </summary>
@@ -37,7 +21,7 @@ public record ColumnSortUISettings
     public bool IconPositionStart { get; set; } = true;
 
     /// <summary>
-    /// Gets the default labels for the sort UI.
+    /// Gets the default settings for the sort UI.
     /// </summary>
     public static ColumnSortUISettings Default => new();
 

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

@@ -176,19 +176,22 @@ public FluentDataGrid(LibraryConfiguration configuration) : base(configuration)
     public DataGridResizeType? ResizeType { get; set; }
 
     /// <summary>
-    /// (Aria) Labels used in the column resize UI.
+    /// Settings (icon, icon position) used in the column resize UI.
+    /// (aria) labels are controlled through <see cref="IFluentLocalizer"/>
     /// </summary>
     [Parameter]
     public ColumnResizeUISettings ColumnResizeUISettings { get; set; } = ColumnResizeUISettings.Default;
 
     /// <summary>
-    /// Labels used in the column sort UI.
+    /// Settings (icon, icon position) used in the column sorting UI.
+    /// (aria) labels are controlled through <see cref="IFluentLocalizer"/>
     /// </summary>
     [Parameter]
     public ColumnSortUISettings ColumnSortUISettings { get; set; } = ColumnSortUISettings.Default;
 
     /// <summary>
-    /// Labels used in the column options UI.
+    /// Settings (icon, icon position) used in the column options UI.
+    /// (aria) labels are controlled through <see cref="IFluentLocalizer"/>
     /// </summary>
     [Parameter]
     public ColumnOptionsUISettings ColumnOptionsUISettings { get; set; } = ColumnOptionsUISettings.Default;

src/Core/Localization/LanguageResource.resx

@@ -243,4 +243,37 @@
   <data name="Paginator_Status" xml:space="preserve">
     <value>Page {0} of {1}</value>
   </data>
+  <data name="DataGrid_SortMenuAscending" xml:space="preserve">
+    <value>Sort (ascending)</value>
+  </data>
+  <data name="DataGrid_SortMenuDescending" xml:space="preserve">
+    <value>Sort (descending)</value>
+  </data>
+  <data name="DataGrid_SortMenu" xml:space="preserve">
+    <value>Sort</value>
+  </data>
+  <data name="DataGrid_ResizeMenu" xml:space="preserve">
+    <value>Resize</value>
+  </data>
+  <data name="DataGrid_OptionsMenu" xml:space="preserve">
+    <value>Filter</value>
+  </data>
+  <data name="DataGrid_ResizeDiscrete" xml:space="preserve">
+    <value>Column width</value>
+  </data>
+  <data name="DataGrid_ResizeExact" xml:space="preserve">
+    <value>Column width (in pixels)</value>
+  </data>
+  <data name="DataGrid_ResizeGrow" xml:space="preserve">
+    <value>Grow column width</value>
+  </data>
+  <data name="DataGrid_ResizeShrink" xml:space="preserve">
+    <value>Shrink column width</value>
+  </data>
+  <data name="DataGrid_ResizeReset" xml:space="preserve">
+    <value>Reset column widths</value>
+  </data>
+  <data name="DataGrid_ResizeSubmit" xml:space="preserve">
+    <value>Set column widths</value>
+  </data>
 </root>