[DataGrid] Add AutoItemsPerPage parameter and handling

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

@@ -2017,6 +2017,11 @@
             Sets <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.GridTemplateColumns"/> to automatically fit the columns to the available width as best it can.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.AutoItemsPerPage">
+            <summary>
+            Automatically fit the number of items per page to the available height.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.RowSize">
             <summary>
             Gets or sets the size of each row in the grid based on the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.DataGridRowSize"/> enum.
@@ -2150,6 +2155,15 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.DisposeAsync">
             <inheritdoc />
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.UpdateItemsPerPageAsync(System.Int32)">
+             <summary>
+             Updates the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.Pagination"/>s ItemPerPage parameter.
+             Guards the CurrentPageIndex from getting greater than the LastPageIndex
+
+             </summary>
+             <param name="visibleRows">The maixmum number of rows that fits the available space</param>
+             <returns></returns>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.SetColumnWidthDiscreteAsync(System.Nullable{System.Int32},System.Single)">
             <summary>
             Resizes the column width by a discrete amount.
@@ -7869,6 +7883,7 @@
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.PaginationState.ItemsPerPage">
             <summary>
             Gets or sets the number of items on each page.
+            To set it and update any associated <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>, call <see cref="M:Microsoft.FluentUI.AspNetCore.Components.PaginationState.SetItemsPerPageAsync(System.Int32)" />
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.PaginationState.CurrentPageIndex">
@@ -7903,6 +7918,22 @@
             <param name="pageIndex">The new, zero-based page index.</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.PaginationState.SetItemsPerPageAsync(System.Int32)">
+            <summary>
+            Sets the items per page and notifies any associated <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>
+            to fetch and render updated data.
+            </summary>
+            <param name="itemsPerPage">The new number of items per page.</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.PaginationState.SetTotalItemCountAsync(System.Int32,System.Boolean)">
+            <summary>
+            Sets the total number of items nd makes sure the current page index stays valid.
+            </summary>
+            <param name="totalItemCount">The total number of items</param>
+            <param name="force">If true, the total item count will be updated even if it is the same as the current value.</param>
+            <returns></returns>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPopover.AnchorId">
             <summary>
             Gets or sets the id of the component the popover is positioned relative to.

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridAutoItemsPerPage.razor

@@ -0,0 +1,32 @@
+@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
+
+@inject DataSource Data
+@inject IJSRuntime JSRuntime
+
+<div id="datagrid-container">
+    <FluentDataGrid Items="items.AsQueryable()"
+    Pagination="@pagination"
+    RowSize="@rowSize"
+    AutoItemsPerPage="true"
+    Style="overflow-y:hidden;">
+        <PropertyColumn Property="@(c => c.Code)" Sortable="true" />
+        <PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" />
+        <PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" />
+        <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" />
+        <PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" />
+    </FluentDataGrid>
+</div>
+
+<FluentPaginator State="@pagination" />
+
+@code {
+
+    DataGridRowSize rowSize = DataGridRowSize.Small;
+    IQueryable<Country>? items;
+    PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
+
+    protected override async Task OnInitializedAsync() =>
+    items = (await Data.GetCountriesAsync()).AsQueryable();
+
+}
+

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridGetStarted.razor

@@ -16,4 +16,4 @@
         new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
         new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
     }.AsQueryable();
-}
+}

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridMultiSelect.razor

@@ -28,7 +28,7 @@
         <PropertyColumn Width="150px" Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
     </FluentDataGrid>
 
-    <div>
+    <div style="margin-top: 0.5rem;">
         <b>SelectedItems:</b>
         @String.Join("; ", SelectedItems.Select(p => p.Name))
     </div>

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns2.razor

@@ -1,18 +1,18 @@
 
 <FluentDataGrid id="defaultGrid"
-    Items=RowsGrid.AsQueryable()
-    GridTemplateColumns="1fr 1fr"
-    TGridItem=SampleGridData
-    OnRowClick="HandleRowClick"
-    OnRowFocus="HandleRowFocus"
-    OnCellClick="HandleCellClick"
-    OnCellFocus="HandleCellFocus"
-    RowSize="@DataGridRowSize.Medium">
+                Items=RowsGrid.AsQueryable()
+                GridTemplateColumns="1fr 1fr"
+                TGridItem=SampleGridData
+                OnRowClick="HandleRowClick"
+                OnRowFocus="HandleRowFocus"
+                OnCellClick="HandleCellClick"
+                OnCellFocus="HandleCellFocus"
+                RowSize="@DataGridRowSize.Medium">
     <TemplateColumn Title="Name">
-        <FluentTextField @bind-Value="@context!.Name"/>
+        <FluentTextField @bind-Value="@context!.Name" />
     </TemplateColumn>
     <TemplateColumn Title="Age">
-        <FluentNumberField @bind-Value="@context!.Age" TValue="int"/>
+        <FluentNumberField @bind-Value="@context!.Age" TValue="int" />
     </TemplateColumn>
 </FluentDataGrid>
 

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

@@ -0,0 +1,31 @@
+@page "/datagrid-auto-fit"
+@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
+
+<PageTitle>Auto fit</PageTitle>
+<DemoSection Title="Auto Fit" Component="@typeof(FluentUI.Demo.Shared.Pages.DataGrid.Examples.DataGridAutoFit)">
+    <Description>
+        <p>
+            The example and code below show what you need to add to one of your Blazor page components to implement auto-fit.
+        </p>
+        <p>
+            The <code>AutoFit</code> parameter is used to automatically adjust the column widths to fit the content. It only runs on
+            the first render and does not update when the content changes.
+        </p>
+        <p>
+            The column widths are calculated with the process below:
+            <ul>
+                <li>
+                    Loop through the columns and find the biggest width of each cell of the column
+                </li>
+                <li>
+                    Build the <code>GridTemplateColumns</code> string using the <code>fr</code> unit
+                </li>
+            </ul>
+        </p>
+        <p>
+            This does not work
+            when <code>Virtualization</code> is turned on. The <code>GridTemplateColumns</code> parameter is ignored
+            when <code>AutoFit</code> is set to <code>true</code>. This is untested in MAUI.
+        </p>
+    </Description>
+</DemoSection>

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

@@ -0,0 +1,88 @@
+@page "/datagrid-auto-items-per-page"
+@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
+
+<PageTitle>Auto items per page</PageTitle>
+<DemoSection Title="Auto items per page" Component="@typeof(DataGridAutoItemsPerPage)">
+    <Description>
+        <p>
+            The example and code below show what you need to get auto items per page functionality for the pagination of a datagrid.
+        </p>
+        <p>
+            Resize the page vertically to see the number of rows being displayed per page adapt to the available height.
+        </p>
+        <p>
+            The <code>AutoItemsPerPage</code> parameter must be set to true and obviously <code>Pagination</code> must be used as well for this to work.
+            Also, the DataGrid <stong>container</stong> must have styling that makes it automatially adapt to the available height.
+            <br />
+            <br />
+            An example of how that can be done for this demo site layout is shown in the &lt;style&gt; section below
+        </p>
+
+    </Description>
+</DemoSection>
+
+<CodeSnippet>
+    &lt;style>
+
+        #datagrid-container {
+            height: calc(100% - 3rem);
+            min-height: 8rem;
+            overflow-x: auto;
+            overflow-y: hidden;
+        }
+
+        article {
+            min-height: 32rem;
+            max-height: 80dvh;
+        }
+
+        .demo-section-content {
+            height: calc(100% - 10rem);
+        }
+
+        .demo-section-example {
+            height: 100%;
+        }
+
+        fluent-tabs {
+            height: 100%;
+        }
+
+        #tab-example-autoitemsperpage-panel {
+            height: 100% !important;
+            max-height: calc(100% - 2rem) !important;
+        }
+    &lt;/style>
+
+</CodeSnippet>
+<style>
+
+    #datagrid-container {
+        height: calc(100% - 3rem);
+        min-height: 8rem;
+        overflow-x: auto;
+        overflow-y: hidden;
+    }
+
+    article {
+        min-height: 32rem;
+        max-height: 80dvh;
+    }
+
+    .demo-section-content {
+        height: calc(100% - 10rem);
+    }
+
+    .demo-section-example {
+        height: 100%;
+    }
+
+    fluent-tabs {
+        height: 100%;
+    }
+
+    #tab-example-autoitemsperpage-panel {
+        height: 100% !important;
+        max-height: calc(100% - 2rem) !important;
+    }
+</style>

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

@@ -0,0 +1,13 @@
+@page "/datagrid-header-generation"
+@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
+
+<PageTitle>Header generation</PageTitle>
+
+<DemoSection Title="Column headers" Component="@typeof(DataGridColumnHeaderGeneration)">
+    <Description>
+        The DataGrid can generate column headers by using the <code>System.ComponentModel.DataAnnotations.DisplayAttribute</code> on properties
+        shown in the grid.
+        <br />
+        See the 'Razor' tab on how these attributes have been applied to the class properties.
+    </Description>
+</DemoSection>

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

@@ -0,0 +1,22 @@
+@page "/datagrid-custom-comparer"
+@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
+
+<PageTitle>Custom comparer</PageTitle>
+<DemoSection Title="Custom comparer" Component="@typeof(DataGridCustomComparer)" CollocatedFiles="@(new[] { "css" })">
+    <Description>
+        <p>
+            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 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.
+        </p>
+        <p>
+            This example also shows using an <code>OnRowFocus</code> event callback to detect which row the cursor is over. By setting <code>ShowHover</code>
+            to true, the current row will be highlighted. By default the system will use the designated hover color for this but you can specify an alternative
+            color by setting the <code>--datagrid-hover-color</code> CSS variable. See the Razor tab for how this is done in this example.
+        </p>
+    </Description>
+</DemoSection>

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

@@ -0,0 +1,13 @@
+@page "/datagrid-custom-paging"
+@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
+
+<PageTitle>Custom Paging</PageTitle>
+<DemoSection Title="Custom paging UI" Component="@typeof(DataGridCustomPaging)" CollocatedFiles="@(new[] { "css" })">
+    <Description>
+        <p>
+            You can customize the appearance of <code>Paginator</code> by supplying a <code>SummaryTemplate</code>.
+            If you want further customization, you can create your own alternative UI that works with
+            <code>PaginationState</code>. Example:
+        </p>
+    </Description>
+</DemoSection>

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

@@ -0,0 +1,16 @@
+@page "/datagrid-dynamic-columns"
+@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
+
+<PageTitle>Dynamic columns</PageTitle>
+
+<DemoSection Title="Dynamic columns" Component="@typeof(DataGridDynamicColumns)">
+    <Description>
+        <p>
+            You can make columns appear conditionally using normal Razor logic such as <code>@@if</code>. Example:
+        </p>
+        <p>
+            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>
+</DemoSection>

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

@@ -0,0 +1,10 @@
+@page "/datagrid-get-started"
+@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
+
+<PageTitle>Getting started</PageTitle>
+
+<DemoSection Title="Get started" Component="@typeof(DataGridGetStarted)">
+     <Description>
+        The example and code below show what you need to add to one of your Blazor page components to render a very simple grid (with sortable columns)
+     </Description>
+ </DemoSection>

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

@@ -0,0 +1,5 @@
+@page "/datagrid-manual"
+@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
+
+<PageTitle>Manual grid</PageTitle>
+<DemoSection Title="Manual grid" Component="@typeof(DataGridManual)"></DemoSection>