Skip to content

Commit d9f71dc

Browse files
vnbaaijvnbaaij
authored
- Add AutoItemsPerPage parameter and functionality (#3220)
- Reorganize DataGrid documentation page and examples
1 parent cff6e5f commit d9f71dc

29 files changed

+720
-286
lines changed

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2017,6 +2017,11 @@
20172017
Sets <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.GridTemplateColumns"/> to automatically fit the columns to the available width as best it can.
20182018
</summary>
20192019
</member>
2020+
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.AutoItemsPerPage">
2021+
<summary>
2022+
Automatically fit the number of items per page to the available height.
2023+
</summary>
2024+
</member>
20202025
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.RowSize">
20212026
<summary>
20222027
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 @@
21502155
<member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.DisposeAsync">
21512156
<inheritdoc />
21522157
</member>
2158+
<member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.UpdateItemsPerPageAsync(System.Int32)">
2159+
<summary>
2160+
Updates the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.Pagination"/>s ItemPerPage parameter.
2161+
Guards the CurrentPageIndex from getting greater than the LastPageIndex
2162+
2163+
</summary>
2164+
<param name="visibleRows">The maixmum number of rows that fits the available space</param>
2165+
<returns></returns>
2166+
</member>
21532167
<member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.SetColumnWidthDiscreteAsync(System.Nullable{System.Int32},System.Single)">
21542168
<summary>
21552169
Resizes the column width by a discrete amount.
@@ -7869,6 +7883,7 @@
78697883
<member name="P:Microsoft.FluentUI.AspNetCore.Components.PaginationState.ItemsPerPage">
78707884
<summary>
78717885
Gets or sets the number of items on each page.
7886+
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)" />
78727887
</summary>
78737888
</member>
78747889
<member name="P:Microsoft.FluentUI.AspNetCore.Components.PaginationState.CurrentPageIndex">
@@ -7903,6 +7918,22 @@
79037918
<param name="pageIndex">The new, zero-based page index.</param>
79047919
<returns>A <see cref="T:System.Threading.Tasks.Task"/> representing the completion of the operation.</returns>
79057920
</member>
7921+
<member name="M:Microsoft.FluentUI.AspNetCore.Components.PaginationState.SetItemsPerPageAsync(System.Int32)">
7922+
<summary>
7923+
Sets the items per page and notifies any associated <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>
7924+
to fetch and render updated data.
7925+
</summary>
7926+
<param name="itemsPerPage">The new number of items per page.</param>
7927+
<returns>A <see cref="T:System.Threading.Tasks.Task"/> representing the completion of the operation.</returns>
7928+
</member>
7929+
<member name="M:Microsoft.FluentUI.AspNetCore.Components.PaginationState.SetTotalItemCountAsync(System.Int32,System.Boolean)">
7930+
<summary>
7931+
Sets the total number of items nd makes sure the current page index stays valid.
7932+
</summary>
7933+
<param name="totalItemCount">The total number of items</param>
7934+
<param name="force">If true, the total item count will be updated even if it is the same as the current value.</param>
7935+
<returns></returns>
7936+
</member>
79067937
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentPopover.AnchorId">
79077938
<summary>
79087939
Gets or sets the id of the component the popover is positioned relative to.

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

Lines changed: 23 additions & 267 deletions
Large diffs are not rendered by default.

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
2+
3+
@inject DataSource Data
4+
@inject IJSRuntime JSRuntime
5+
6+
<div id="datagrid-container">
7+
<FluentDataGrid Items="items.AsQueryable()"
8+
Pagination="@pagination"
9+
RowSize="@rowSize"
10+
AutoItemsPerPage="true"
11+
Style="overflow-y:hidden;">
12+
<PropertyColumn Property="@(c => c.Code)" Sortable="true" />
13+
<PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" />
14+
<PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" />
15+
<PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" />
16+
<PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" />
17+
</FluentDataGrid>
18+
</div>
19+
20+
<FluentPaginator State="@pagination" />
21+
22+
@code {
23+
24+
DataGridRowSize rowSize = DataGridRowSize.Small;
25+
IQueryable<Country>? items;
26+
PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
27+
28+
protected override async Task OnInitializedAsync() =>
29+
items = (await Data.GetCountriesAsync()).AsQueryable();
30+
31+
}
32+

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,4 @@
1616
new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
1717
new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
1818
}.AsQueryable();
19-
}
19+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<PropertyColumn Width="150px" Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
2929
</FluentDataGrid>
3030

31-
<div>
31+
<div style="margin-top: 0.5rem;">
3232
<b>SelectedItems:</b>
3333
@String.Join("; ", SelectedItems.Select(p => p.Name))
3434
</div>

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11

22
<FluentDataGrid id="defaultGrid"
3-
Items=RowsGrid.AsQueryable()
4-
GridTemplateColumns="1fr 1fr"
5-
TGridItem=SampleGridData
6-
OnRowClick="HandleRowClick"
7-
OnRowFocus="HandleRowFocus"
8-
OnCellClick="HandleCellClick"
9-
OnCellFocus="HandleCellFocus"
10-
RowSize="@DataGridRowSize.Medium">
3+
Items=RowsGrid.AsQueryable()
4+
GridTemplateColumns="1fr 1fr"
5+
TGridItem=SampleGridData
6+
OnRowClick="HandleRowClick"
7+
OnRowFocus="HandleRowFocus"
8+
OnCellClick="HandleCellClick"
9+
OnCellFocus="HandleCellFocus"
10+
RowSize="@DataGridRowSize.Medium">
1111
<TemplateColumn Title="Name">
12-
<FluentTextField @bind-Value="@context!.Name"/>
12+
<FluentTextField @bind-Value="@context!.Name" />
1313
</TemplateColumn>
1414
<TemplateColumn Title="Age">
15-
<FluentNumberField @bind-Value="@context!.Age" TValue="int"/>
15+
<FluentNumberField @bind-Value="@context!.Age" TValue="int" />
1616
</TemplateColumn>
1717
</FluentDataGrid>
1818

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@page "/datagrid-auto-fit"
2+
@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
3+
4+
<PageTitle>Auto fit</PageTitle>
5+
<DemoSection Title="Auto Fit" Component="@typeof(FluentUI.Demo.Shared.Pages.DataGrid.Examples.DataGridAutoFit)">
6+
<Description>
7+
<p>
8+
The example and code below show what you need to add to one of your Blazor page components to implement auto-fit.
9+
</p>
10+
<p>
11+
The <code>AutoFit</code> parameter is used to automatically adjust the column widths to fit the content. It only runs on
12+
the first render and does not update when the content changes.
13+
</p>
14+
<p>
15+
The column widths are calculated with the process below:
16+
<ul>
17+
<li>
18+
Loop through the columns and find the biggest width of each cell of the column
19+
</li>
20+
<li>
21+
Build the <code>GridTemplateColumns</code> string using the <code>fr</code> unit
22+
</li>
23+
</ul>
24+
</p>
25+
<p>
26+
This does not work
27+
when <code>Virtualization</code> is turned on. The <code>GridTemplateColumns</code> parameter is ignored
28+
when <code>AutoFit</code> is set to <code>true</code>. This is untested in MAUI.
29+
</p>
30+
</Description>
31+
</DemoSection>

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
@page "/datagrid-auto-items-per-page"
2+
@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
3+
4+
<PageTitle>Auto items per page</PageTitle>
5+
<DemoSection Title="Auto items per page" Component="@typeof(DataGridAutoItemsPerPage)">
6+
<Description>
7+
<p>
8+
The example and code below show what you need to get auto items per page functionality for the pagination of a datagrid.
9+
</p>
10+
<p>
11+
Resize the page vertically to see the number of rows being displayed per page adapt to the available height.
12+
</p>
13+
<p>
14+
The <code>AutoItemsPerPage</code> parameter must be set to true and obviously <code>Pagination</code> must be used as well for this to work.
15+
Also, the DataGrid <stong>container</stong> must have styling that makes it automatially adapt to the available height.
16+
<br />
17+
<br />
18+
An example of how that can be done for this demo site layout is shown in the &lt;style&gt; section below
19+
</p>
20+
21+
</Description>
22+
</DemoSection>
23+
24+
<CodeSnippet>
25+
&lt;style>
26+
27+
#datagrid-container {
28+
height: calc(100% - 3rem);
29+
min-height: 8rem;
30+
overflow-x: auto;
31+
overflow-y: hidden;
32+
}
33+
34+
article {
35+
min-height: 32rem;
36+
max-height: 80dvh;
37+
}
38+
39+
.demo-section-content {
40+
height: calc(100% - 10rem);
41+
}
42+
43+
.demo-section-example {
44+
height: 100%;
45+
}
46+
47+
fluent-tabs {
48+
height: 100%;
49+
}
50+
51+
#tab-example-autoitemsperpage-panel {
52+
height: 100% !important;
53+
max-height: calc(100% - 2rem) !important;
54+
}
55+
&lt;/style>
56+
57+
</CodeSnippet>
58+
<style>
59+
60+
#datagrid-container {
61+
height: calc(100% - 3rem);
62+
min-height: 8rem;
63+
overflow-x: auto;
64+
overflow-y: hidden;
65+
}
66+
67+
article {
68+
min-height: 32rem;
69+
max-height: 80dvh;
70+
}
71+
72+
.demo-section-content {
73+
height: calc(100% - 10rem);
74+
}
75+
76+
.demo-section-example {
77+
height: 100%;
78+
}
79+
80+
fluent-tabs {
81+
height: 100%;
82+
}
83+
84+
#tab-example-autoitemsperpage-panel {
85+
height: 100% !important;
86+
max-height: calc(100% - 2rem) !important;
87+
}
88+
</style>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@page "/datagrid-header-generation"
2+
@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
3+
4+
<PageTitle>Header generation</PageTitle>
5+
6+
<DemoSection Title="Column headers" Component="@typeof(DataGridColumnHeaderGeneration)">
7+
<Description>
8+
The DataGrid can generate column headers by using the <code>System.ComponentModel.DataAnnotations.DisplayAttribute</code> on properties
9+
shown in the grid.
10+
<br />
11+
See the 'Razor' tab on how these attributes have been applied to the class properties.
12+
</Description>
13+
</DemoSection>

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@page "/datagrid-custom-comparer"
2+
@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
3+
4+
<PageTitle>Custom comparer</PageTitle>
5+
<DemoSection Title="Custom comparer" Component="@typeof(DataGridCustomComparer)" CollocatedFiles="@(new[] { "css" })">
6+
<Description>
7+
<p>
8+
Here a custom comparer is being used to sort counties by the length of their name. The code has examples for both
9+
<code>PropertyColumn</code> and <code>TemplateColumn</code> implementations (see the Razor tab).<br />
10+
For this example the code for the comparer is placed in the <code>DataGridCustomComparer.razor.cs</code> file but it
11+
could of course be placed in its own file.
12+
</p>
13+
<p>
14+
For the paginator, this example also shows how to use the <code>SummaryTemplate</code> and <code>PaginationTextTemplate</code> parameters.
15+
</p>
16+
<p>
17+
This example also shows using an <code>OnRowFocus</code> event callback to detect which row the cursor is over. By setting <code>ShowHover</code>
18+
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
19+
color by setting the <code>--datagrid-hover-color</code> CSS variable. See the Razor tab for how this is done in this example.
20+
</p>
21+
</Description>
22+
</DemoSection>

0 commit comments

Comments
 (0)