Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Add AutoItemsPerPage parameter and functionality (#3220)
- Reorganize DataGrid documentation page and examples
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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()" | ||
|
Check warning on line 7 in examples/Demo/Shared/Pages/DataGrid/Examples/DataGridAutoItemsPerPage.razor
|
||
| 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(); | ||
|
|
||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 <style> section below | ||
| </p> | ||
|
|
||
| </Description> | ||
| </DemoSection> | ||
|
|
||
| <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> | ||
|
|
||
| </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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Oops, something went wrong.