[DataGrid] Allow programmatic sorting of columns by name or index

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -1718,6 +1718,20 @@
             <param name="direction">The direction of sorting. If the value is <see cref="F:Microsoft.FluentUI.AspNetCore.Components.SortDirection.Auto"/>, then it will toggle the direction on each call.</param>
             <returns>A <see cref="T:System.Threading.Tasks.Task"/> representing the completion of the operation.</returns>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.SortByColumnAsync(System.String,Microsoft.FluentUI.AspNetCore.Components.SortDirection)">
+            <summary>
+            Sorts the grid by the specified column <paramref name="title"/> found first. If the title is not found, nothing happens.
+            </summary>
+            <param name="title">The title of the column to sort by.</param>
+            <param name="direction">The direction of sorting. The default is <see cref="F:Microsoft.FluentUI.AspNetCore.Components.SortDirection.Auto"/>. If the value is <see cref="F:Microsoft.FluentUI.AspNetCore.Components.SortDirection.Auto"/>, then it will toggle the direction on each call.</param>
+        </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.SortByColumnAsync(System.Int32,Microsoft.FluentUI.AspNetCore.Components.SortDirection)">
+            <summary>
+            Sorts the grid by the specified column <paramref name="index"/>. If the index is out of range, nothing happens.
+            </summary>
+            <param name="index">The index of the column to sort by.</param>
+            <param name="direction">The direction of sorting. The default is <see cref="F:Microsoft.FluentUI.AspNetCore.Components.SortDirection.Auto"/>. If the value is <see cref="F:Microsoft.FluentUI.AspNetCore.Components.SortDirection.Auto"/>, then it will toggle the direction on each call.</param>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.RemoveSortByColumnAsync(Microsoft.FluentUI.AspNetCore.Components.ColumnBase{`0})">
             <summary>
             Removes the grid's sort on double click if this is specified <paramref name="column"/> currently sorted on.

examples/Demo/Shared/Pages/DataGrid/DataGridPage.razor

@@ -100,13 +100,15 @@ fluent-data-grid-row:has([row-selected]) {
     <br /><br />
 
     Example:
-<CodeSnippet Language="razor">&lt;SelectAllTemplate>
-    @@(context.AllSelected == true ? "✅" : context.AllSelected == null ? "➖" : "⬜")
-&lt;/SelectAllTemplate>
-&lt;ChildContent>
-    @@(SelectedItems.Contains(context) ? "✅" : " ") @@* Using SelectedItems         *@@
-    @@(context.Selected ? "✅" : " ")                @@* Using Property and OnSelect *@@
-&lt;/ChildContent></CodeSnippet>
+    <CodeSnippet Language="razor">
+        &lt;SelectAllTemplate>
+        @@(context.AllSelected == true ? "✅" : context.AllSelected == null ? "➖" : "⬜")
+        &lt;/SelectAllTemplate>
+        &lt;ChildContent>
+        @@(SelectedItems.Contains(context) ? "✅" : " ") @@* Using SelectedItems         *@@
+        @@(context.Selected ? "✅" : " ")                @@* Using Property and OnSelect *@@
+        &lt;/ChildContent>
+    </CodeSnippet>
 </p>
 
 <DemoSection Title="Typical usage" Component="@typeof(DataGridTypical)" CollocatedFiles="@(new[] {"css"})">
@@ -158,7 +160,7 @@ fluent-data-grid-row:has([row-selected]) {
         </p>
         <p>
             This grid is using a 'sticky' header (i.e. the header is always visible when scrolling). The buttons in the last column disappear under the header when scrolling.
-            In this example they don't relly do anything more than writting a message in the console log'
+            In this example they don't really do anything more than writing a message in the console log'
         </p>
         <p>
             The second column has a custom <code>Style</code> parameter set and applied to it. The 4th column has its <code>Tooltip</code>
@@ -185,7 +187,7 @@ fluent-data-grid-row:has([row-selected]) {
         <p>
             Enabling virtualization is just a matter of passing <code>Virtualize="true"</code>. For it to work
             properly and reliably, every row rendered must have the same known height. <strong>
-                This is handeled by the
+                This is handled by the
                 <code>FluentDataGrid</code> code
             </strong>.
         </p>
@@ -195,7 +197,7 @@ fluent-data-grid-row:has([row-selected]) {
 <DemoSection Title="Intermittent loading" Component="@typeof(DataGridNotVirtualizedLoadingAndEmpty)">
     <Description>
         <p>
-            Use the options below the grid to togle the content of this non virtualized gri on and off and to simulate a loading state
+            Use the options below the grid to toggle the content of this non virtualized grid on and off and to simulate a loading state
         </p>
     </Description>
 </DemoSection>
@@ -215,7 +217,7 @@ fluent-data-grid-row:has([row-selected]) {
             You can make columns appear conditionally using normal Razor logic such as <code>@@if</code>. Example:
         </p>
         <p>
-            Also, in this example the columns's Width parameter is being set instead of specifying all widths for all
+            Also, in this example the column's Width parameter is being set instead of specifying all widths for all
             columns in the <code>GridTemplateColumn</code> parameter.
         </p>
     </Description>
@@ -227,7 +229,7 @@ fluent-data-grid-row:has([row-selected]) {
             Here a custom comparer is being used to sort counties by the length of their name. The code has examples for both
             <code>PropertyColumn</code> and <code>TemplateColumn</code> implementations (see the Razor tab).<br />
             For this example the code for the comparer is placed in the <code>DataGridCustomComparer.razor.cs</code> file but it
-            could of couse be placed in its own file.
+            could of course be placed in its own file.
         </p>
         <p>
             For the paginator, this example also shows how to use the <code>SummaryTemplate</code> and <code>PaginationTextTemplate</code> parameters.
@@ -295,7 +297,7 @@ fluent-data-grid-row:has([row-selected]) {
 
 <div class="demopanel">
     <p>
-        <strong>The <code>FluentDataGridRow</code> and <code>FluentDataGridCell</code> API's are usually not used directely </strong>
+        <strong>The <code>FluentDataGridRow</code> and <code>FluentDataGridCell</code> API's are usually not used directly </strong>
     </p>
 </div>
 

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

@@ -369,6 +369,38 @@ public Task SortByColumnAsync(ColumnBase<TGridItem> column, SortDirection direct
         return RefreshDataAsync();
     }
 
+    /// <summary>
+    /// Sorts the grid by the specified column <paramref name="title"/> found first. If the title is not found, nothing happens.
+    /// </summary>
+    /// <param name="title">The title of the column to sort by.</param>
+    /// <param name="direction">The direction of sorting. The default is <see cref="SortDirection.Auto"/>. If the value is <see cref="SortDirection.Auto"/>, then it will toggle the direction on each call.</param>
+    public Task SortByColumnAsync(string title, SortDirection direction = SortDirection.Auto)
+    {
+        var column = _columns.FirstOrDefault(c => c.Title?.Equals(title, StringComparison.InvariantCultureIgnoreCase) ?? false);
+
+        if (column is not null)
+        {
+            return SortByColumnAsync(column, direction);
+        }
+
+        return Task.CompletedTask;
+    }
+
+    /// <summary>
+    /// Sorts the grid by the specified column <paramref name="index"/>. If the index is out of range, nothing happens.
+    /// </summary>
+    /// <param name="index">The index of the column to sort by.</param>
+    /// <param name="direction">The direction of sorting. The default is <see cref="SortDirection.Auto"/>. If the value is <see cref="SortDirection.Auto"/>, then it will toggle the direction on each call.</param>
+    public Task SortByColumnAsync(int index, SortDirection direction = SortDirection.Auto)
+    {
+        if (index >= 0 && index < _columns.Count)
+        {
+            return SortByColumnAsync(_columns[index], direction);
+        }
+
+        return Task.CompletedTask;
+    }
+
     /// <summary>
     /// Removes the grid's sort on double click if this is specified <paramref name="column"/> currently sorted on.
     /// </summary>

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html

@@ -0,0 +1,31 @@
+
+<fluent-data-grid generate-header="none" aria-rowcount="5" blazor:onrowfocus="1" blazor:onclosecolumnoptions="2" b-ppmhrkw1mj="" blazor:elementreference="">
+  <fluent-data-grid-row row-id="r1" row-index="0" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:oncellfocus="6" b-upi3f9mbnn="">
+    <fluent-data-grid-cell cell-id="c1" cell-type="columnheader" grid-column="1" class="column-header col-justify-start  col-sort-asc" aria-sort="ascending" scope="col" b-w6qdxfylwy="">
+      <div class="col-title" b-pxhtqoo8qd="">
+        <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
+      </div>
+    </fluent-data-grid-cell>
+    <fluent-data-grid-cell cell-id="c2" cell-type="columnheader" grid-column="2" class="column-header col-justify-start " aria-sort="none" scope="col" b-w6qdxfylwy="">
+      <div class="col-title" b-pxhtqoo8qd="">
+        <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
+      </div>
+    </fluent-data-grid-cell>
+  </fluent-data-grid-row>
+  <fluent-data-grid-row row-id="r3" row-index="2" row-type="default" blazor:onkeydown="11" blazor:onclick="12" blazor:ondblclick="13" aria-rowindex="2" blazor:oncellfocus="14" b-upi3f9mbnn="">
+    <fluent-data-grid-cell cell-id="c5" cell-type="default" grid-column="1" class="col-justify-start " b-w6qdxfylwy="">A</fluent-data-grid-cell>
+    <fluent-data-grid-cell cell-id="c6" cell-type="default" grid-column="2" class="col-justify-start " b-w6qdxfylwy="">D</fluent-data-grid-cell>
+  </fluent-data-grid-row>
+  <fluent-data-grid-row row-id="r2" row-index="1" row-type="default" blazor:onkeydown="7" blazor:onclick="8" blazor:ondblclick="9" aria-rowindex="3" blazor:oncellfocus="10" b-upi3f9mbnn="">
+    <fluent-data-grid-cell cell-id="c3" cell-type="default" grid-column="1" class="col-justify-start " b-w6qdxfylwy="">B</fluent-data-grid-cell>
+    <fluent-data-grid-cell cell-id="c4" cell-type="default" grid-column="2" class="col-justify-start " b-w6qdxfylwy="">C</fluent-data-grid-cell>
+  </fluent-data-grid-row>
+  <fluent-data-grid-row row-id="r5" row-index="4" row-type="default" blazor:onkeydown="19" blazor:onclick="20" blazor:ondblclick="21" aria-rowindex="4" blazor:oncellfocus="22" b-upi3f9mbnn="">
+    <fluent-data-grid-cell cell-id="c9" cell-type="default" grid-column="1" class="col-justify-start " b-w6qdxfylwy="">C</fluent-data-grid-cell>
+    <fluent-data-grid-cell cell-id="c10" cell-type="default" grid-column="2" class="col-justify-start " b-w6qdxfylwy="">B</fluent-data-grid-cell>
+  </fluent-data-grid-row>
+  <fluent-data-grid-row row-id="r4" row-index="3" row-type="default" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" aria-rowindex="5" blazor:oncellfocus="18" b-upi3f9mbnn="">
+    <fluent-data-grid-cell cell-id="c7" cell-type="default" grid-column="1" class="col-justify-start " b-w6qdxfylwy="">D</fluent-data-grid-cell>
+    <fluent-data-grid-cell cell-id="c8" cell-type="default" grid-column="2" class="col-justify-start " b-w6qdxfylwy="">A</fluent-data-grid-cell>
+  </fluent-data-grid-row>
+</fluent-data-grid>

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html

@@ -0,0 +1,31 @@
+
+<fluent-data-grid generate-header="none" aria-rowcount="5" blazor:onrowfocus="1" blazor:onclosecolumnoptions="2" b-ppmhrkw1mj="" blazor:elementreference="">
+  <fluent-data-grid-row row-id="r1" row-index="0" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:oncellfocus="6" b-upi3f9mbnn="">
+    <fluent-data-grid-cell cell-id="c1" cell-type="columnheader" grid-column="1" class="column-header col-justify-start  col-sort-desc" aria-sort="descending" scope="col" b-w6qdxfylwy="">
+      <div class="col-title" b-pxhtqoo8qd="">
+        <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
+      </div>
+    </fluent-data-grid-cell>
+    <fluent-data-grid-cell cell-id="c2" cell-type="columnheader" grid-column="2" class="column-header col-justify-start " aria-sort="none" scope="col" b-w6qdxfylwy="">
+      <div class="col-title" b-pxhtqoo8qd="">
+        <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
+      </div>
+    </fluent-data-grid-cell>
+  </fluent-data-grid-row>
+  <fluent-data-grid-row row-id="r4" row-index="3" row-type="default" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" aria-rowindex="2" blazor:oncellfocus="18" b-upi3f9mbnn="">
+    <fluent-data-grid-cell cell-id="c7" cell-type="default" grid-column="1" class="col-justify-start " b-w6qdxfylwy="">D</fluent-data-grid-cell>
+    <fluent-data-grid-cell cell-id="c8" cell-type="default" grid-column="2" class="col-justify-start " b-w6qdxfylwy="">A</fluent-data-grid-cell>
+  </fluent-data-grid-row>
+  <fluent-data-grid-row row-id="r5" row-index="4" row-type="default" blazor:onkeydown="19" blazor:onclick="20" blazor:ondblclick="21" aria-rowindex="3" blazor:oncellfocus="22" b-upi3f9mbnn="">
+    <fluent-data-grid-cell cell-id="c9" cell-type="default" grid-column="1" class="col-justify-start " b-w6qdxfylwy="">C</fluent-data-grid-cell>
+    <fluent-data-grid-cell cell-id="c10" cell-type="default" grid-column="2" class="col-justify-start " b-w6qdxfylwy="">B</fluent-data-grid-cell>
+  </fluent-data-grid-row>
+  <fluent-data-grid-row row-id="r2" row-index="1" row-type="default" blazor:onkeydown="7" blazor:onclick="8" blazor:ondblclick="9" aria-rowindex="4" blazor:oncellfocus="10" b-upi3f9mbnn="">
+    <fluent-data-grid-cell cell-id="c3" cell-type="default" grid-column="1" class="col-justify-start " b-w6qdxfylwy="">B</fluent-data-grid-cell>
+    <fluent-data-grid-cell cell-id="c4" cell-type="default" grid-column="2" class="col-justify-start " b-w6qdxfylwy="">C</fluent-data-grid-cell>
+  </fluent-data-grid-row>
+  <fluent-data-grid-row row-id="r3" row-index="2" row-type="default" blazor:onkeydown="11" blazor:onclick="12" blazor:ondblclick="13" aria-rowindex="5" blazor:oncellfocus="14" b-upi3f9mbnn="">
+    <fluent-data-grid-cell cell-id="c5" cell-type="default" grid-column="1" class="col-justify-start " b-w6qdxfylwy="">A</fluent-data-grid-cell>
+    <fluent-data-grid-cell cell-id="c6" cell-type="default" grid-column="2" class="col-justify-start " b-w6qdxfylwy="">D</fluent-data-grid-cell>
+  </fluent-data-grid-row>
+</fluent-data-grid>

tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html

@@ -0,0 +1,31 @@
+
+<fluent-data-grid generate-header="none" aria-rowcount="5" blazor:onrowfocus="1" blazor:onclosecolumnoptions="2" b-ppmhrkw1mj="" blazor:elementreference="">
+    <fluent-data-grid-row row-id="r1" row-index="0" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:oncellfocus="6" b-upi3f9mbnn="">
+        <fluent-data-grid-cell cell-id="c1" cell-type="columnheader" grid-column="1" class="column-header col-justify-start  col-sort-asc" aria-sort="ascending" scope="col" b-w6qdxfylwy="">
+            <div class="col-title" b-pxhtqoo8qd="">
+                <div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
+            </div>
+        </fluent-data-grid-cell>
+        <fluent-data-grid-cell cell-id="c2" cell-type="columnheader" grid-column="2" class="column-header col-justify-start " aria-sort="none" scope="col" b-w6qdxfylwy="">
+            <div class="col-title" b-pxhtqoo8qd="">
+                <div class="col-title-text" b-pxhtqoo8qd="">Item2</div>
+            </div>
+        </fluent-data-grid-cell>
+    </fluent-data-grid-row>
+    <fluent-data-grid-row row-id="r3" row-index="2" row-type="default" blazor:onkeydown="11" blazor:onclick="12" blazor:ondblclick="13" aria-rowindex="2" blazor:oncellfocus="14" b-upi3f9mbnn="">
+        <fluent-data-grid-cell cell-id="c5" cell-type="default" grid-column="1" class="col-justify-start " b-w6qdxfylwy="">A</fluent-data-grid-cell>
+        <fluent-data-grid-cell cell-id="c6" cell-type="default" grid-column="2" class="col-justify-start " b-w6qdxfylwy="">D</fluent-data-grid-cell>
+    </fluent-data-grid-row>
+    <fluent-data-grid-row row-id="r2" row-index="1" row-type="default" blazor:onkeydown="7" blazor:onclick="8" blazor:ondblclick="9" aria-rowindex="3" blazor:oncellfocus="10" b-upi3f9mbnn="">
+        <fluent-data-grid-cell cell-id="c3" cell-type="default" grid-column="1" class="col-justify-start " b-w6qdxfylwy="">B</fluent-data-grid-cell>
+        <fluent-data-grid-cell cell-id="c4" cell-type="default" grid-column="2" class="col-justify-start " b-w6qdxfylwy="">C</fluent-data-grid-cell>
+    </fluent-data-grid-row>
+    <fluent-data-grid-row row-id="r5" row-index="4" row-type="default" blazor:onkeydown="19" blazor:onclick="20" blazor:ondblclick="21" aria-rowindex="4" blazor:oncellfocus="22" b-upi3f9mbnn="">
+        <fluent-data-grid-cell cell-id="c9" cell-type="default" grid-column="1" class="col-justify-start " b-w6qdxfylwy="">C</fluent-data-grid-cell>
+        <fluent-data-grid-cell cell-id="c10" cell-type="default" grid-column="2" class="col-justify-start " b-w6qdxfylwy="">B</fluent-data-grid-cell>
+    </fluent-data-grid-row>
+    <fluent-data-grid-row row-id="r4" row-index="3" row-type="default" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" aria-rowindex="5" blazor:oncellfocus="18" b-upi3f9mbnn="">
+        <fluent-data-grid-cell cell-id="c7" cell-type="default" grid-column="1" class="col-justify-start " b-w6qdxfylwy="">D</fluent-data-grid-cell>
+        <fluent-data-grid-cell cell-id="c8" cell-type="default" grid-column="2" class="col-justify-start " b-w6qdxfylwy="">A</fluent-data-grid-cell>
+    </fluent-data-grid-row>
+</fluent-data-grid>