Skip to content

Commit 7830294

Browse files
vnbaaijvnbaaij
committed
More DataGrid doc changes
1 parent d9f71dc commit 7830294

11 files changed

+93
-73
lines changed

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

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/datagrid-overview"
1+
@page "/datagrid"
22

33
@using FluentUI.Demo.Shared.Pages.DataGrid.Examples;
44
@using Microsoft.FluentUI.AspNetCore.Components;
@@ -125,29 +125,32 @@
125125
<p>
126126
See the following pages for examples and additional documentation on the situations that ech example shows.
127127
</p>
128-
<FluentStack Orientation="Orientation.Vertical" >
128+
<FluentStack Orientation="Orientation.Vertical" Style="margin-bottom: 1rem;" >
129+
<h3>Basics</h3>
130+
<FluentAnchor Href="/datagrid-get-started" Appearance="Appearance.Hypertext">Getting started</FluentAnchor>
131+
<FluentAnchor Href="/datagrid-typical" Appearance="Appearance.Hypertext">Typical grid usage</FluentAnchor>
132+
<h3>Layout</h3>
133+
<FluentAnchor Href="/datagrid-loading-and-empty-content" Appearance="Appearance.Hypertext">...Content parameters</FluentAnchor>
129134
<FluentAnchor Href="/datagrid-auto-fit" Appearance="Appearance.Hypertext">Auto fit</FluentAnchor>
130135
<FluentAnchor Href="/datagrid-auto-items-per-page" Appearance="Appearance.Hypertext">Auto items per page</FluentAnchor>
131-
<FluentAnchor Href="/datagrid-custom-comparer" Appearance="Appearance.Hypertext">Custom comparer</FluentAnchor>
132136
<FluentAnchor Href="/datagrid-custom-paging" Appearance="Appearance.Hypertext">Custom paging</FluentAnchor>
133-
<FluentAnchor Href="/datagrid-custom-sort" Appearance="Appearance.Hypertext">Custom sorting</FluentAnchor>
134-
<FluentAnchor Href="/datagrid-dynamic-columns" Appearance="Appearance.Hypertext">Dynamic columns</FluentAnchor>
135-
<FluentAnchor Href="/datagrid-get-started" Appearance="Appearance.Hypertext">Getting started</FluentAnchor>
136-
<FluentAnchor Href="/datagrid-header-generation" Appearance="Appearance.Hypertext">Header generation</FluentAnchor>
137-
<FluentAnchor Href="/datagrid-loading-and-empty-content" Appearance="Appearance.Hypertext">Intemittent loading</FluentAnchor>
138-
<FluentAnchor Href="/datagrid-manual" Appearance="Appearance.Hypertext">Manual grid</FluentAnchor>
139137
<FluentAnchor Href="/datagrid-multi-line" Appearance="Appearance.Hypertext">Multi line text in cells</FluentAnchor>
140-
<FluentAnchor Href="/datagrid-multi-select" Appearance="Appearance.Hypertext">Single/Multi select</FluentAnchor>
141-
<FluentAnchor Href="/datagrid-remote-data" Appearance="Appearance.Hypertext">Remote data</FluentAnchor>
142138
<FluentAnchor Href="/datagrid-scrollbars" Appearance="Appearance.Hypertext">Table with scrollbars</FluentAnchor>
139+
<h3>Sorting</h3>
140+
<FluentAnchor Href="/datagrid-custom-comparer-sort" Appearance="Appearance.Hypertext">Custom comparer</FluentAnchor>
141+
<FluentAnchor Href="/datagrid-custom-gridsort" Appearance="Appearance.Hypertext">Custom sorting</FluentAnchor>
142+
<h3>Columns</h3>
143+
<FluentAnchor Href="/datagrid-multi-select" Appearance="Appearance.Hypertext">Single/Multi select</FluentAnchor>
144+
<FluentAnchor Href="/datagrid-dynamic-columns" Appearance="Appearance.Hypertext">Dynamic columns</FluentAnchor>
145+
<FluentAnchor Href="/datagrid-header-generation" Appearance="Appearance.Hypertext">Header generation</FluentAnchor>
143146
<FluentAnchor Href="/datagrid-template-columns" Appearance="Appearance.Hypertext">Template columns</FluentAnchor>
144147
<FluentAnchor Href="/datagrid-template-columns-2" Appearance="Appearance.Hypertext">More template columns</FluentAnchor>
145-
<FluentAnchor Href="/datagrid-typical" Appearance="Appearance.Hypertext">Typical grid usage</FluentAnchor>
148+
<h3>Advanced</h3>
146149
<FluentAnchor Href="/datagrid-virtualize" Appearance="Appearance.Hypertext">Virtualized grid</FluentAnchor>
150+
<FluentAnchor Href="/datagrid-remote-data" Appearance="Appearance.Hypertext">Remote data</FluentAnchor>
151+
<FluentAnchor Href="/datagrid-manual" Appearance="Appearance.Hypertext">Manual grid</FluentAnchor>
147152
</FluentStack>
148153

149-
150-
151154
<h2 id="documentation">Documentation</h2>
152155

153156
<ApiDocumentation Component="typeof(FluentDataGrid<>)" GenericLabel="TGridItem" />

examples/Demo/Shared/Pages/DataGrid/Examples/DataGridRankSort.razor renamed to examples/Demo/Shared/Pages/DataGrid/Examples/DataGridCustomGridSort.razor

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<FluentDataGrid Items="@_gridData" ResizableColumns=true GridTemplateColumns="0.5fr 0.5fr">
2-
<PropertyColumn Sortable="true" Property="x => x.Number" Title="Number" />
2+
<PropertyColumn Sortable="true" Property="x => x.Number" Title="Rank" />
33

44
<TemplateColumn Sortable="true" SortBy="groupRank" Title="Group">
55
@context.Group
@@ -10,7 +10,7 @@
1010
<p>Keep numbers always sorted ascending inside the group when sorting by group</p>
1111
<FluentDataGrid Items="@_gridData" ResizableColumns=true GridTemplateColumns="0.5fr 0.5fr">
1212

13-
<PropertyColumn Sortable="true" Property="x => x.Number" Title="Number" />
13+
<PropertyColumn Sortable="true" Property="x => x.Number" Title="Rank" />
1414
<PropertyColumn Property="x => x.Group" SortBy="groupRankNumberAlwaysAscending" Title="Group" />
1515

1616
</FluentDataGrid>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
<FluentDataGrid id="manualGrid" GenerateHeader=GenerateHeaderOption.None GridTemplateColumns="1fr 1fr" TGridItem="string" role="grid">
1+
<FluentDataGrid id="manualGrid" GenerateHeader="GenerateHeaderOption.None" DisplayMode="DataGridDisplayMode.Table" TGridItem="string" role="grid" Style="width: 600px;">
22
<FluentDataGridRow RowType="DataGridRowType.Header" >
3-
<FluentDataGridCell GridColumn=1 CellType="DataGridCellType.ColumnHeader">Column 1</FluentDataGridCell>
4-
<FluentDataGridCell GridColumn=2 CellType="DataGridCellType.ColumnHeader">Column 2</FluentDataGridCell>
3+
<FluentDataGridCell GridColumn=1 CellType="DataGridCellType.ColumnHeader" Style="width: 50%;">Column 1</FluentDataGridCell>
4+
<FluentDataGridCell GridColumn=2 CellType="DataGridCellType.ColumnHeader" Style="width: 50%;">Column 2</FluentDataGridCell>
55
</FluentDataGridRow>
66
<FluentDataGridRow>
7-
<FluentDataGridCell GridColumn=1 >1.1</FluentDataGridCell>
7+
<FluentDataGridCell GridColumn=1>1.1</FluentDataGridCell>
88
<FluentDataGridCell GridColumn=2>1.2</FluentDataGridCell>
99
</FluentDataGridRow>
1010
<FluentDataGridRow>
1111
<FluentDataGridCell GridColumn=1>2.1</FluentDataGridCell>
1212
<FluentDataGridCell GridColumn=2> 2.2</FluentDataGridCell>
1313
</FluentDataGridRow>
14-
</FluentDataGrid>
14+
</FluentDataGrid>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
<PropertyColumn Property="@(c => c.Item4)" Align="Align.End" />
88
</ChildContent>
99
<EmptyContent>
10-
<FluentIcon Value="@(new Icons.Filled.Size24.Crown())" Color="@Color.Accent" />&nbsp; Nothing to see here. Carry on!
10+
<FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center" HorizontalAlignment="HorizontalAlignment.Center" HorizontalGap="10">
11+
<FluentIcon Value="@(new Icons.Filled.Size24.Crown())" Color="@Color.Accent" />
12+
<div>Nothing to see here. Carry on!</div>
13+
</FluentStack>
1114
</EmptyContent>
1215
</FluentDataGrid>
1316
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/datagrid-custom-comparer"
1+
@page "/datagrid-custom-comparer-sort"
22
@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
33

44
<PageTitle>Custom comparer</PageTitle>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@page "/datagrid-custom-gridsort"
2+
@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
3+
4+
<PageTitle>Custom sort</PageTitle>
5+
<DemoSection Title="SortBy Rank" Component="@typeof(DataGridCustomGridSort)">
6+
<Description>
7+
<p>
8+
Here is an example that demonstrates some of the sort order specification that are available in the <code>GridSort</code> class.
9+
</p>
10+
</Description>
11+
</DemoSection>
12+
13+
14+
<h2>Documentation</h2>
15+
16+
<ApiDocumentation Component="typeof(GridSort<>)" GenericLabel="TGridItem"/>

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,10 @@
22
@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
33

44
<PageTitle>Manual grid</PageTitle>
5-
<DemoSection Title="Manual grid" Component="@typeof(DataGridManual)"></DemoSection>
5+
<DemoSection Title="Manual grid" Component="@typeof(DataGridManual)">
6+
<Description>
7+
Although it is possible to create a datagrid declaritvely, we advise to not use this way of workingwith a DataGrid.
8+
Things like setting headers an specifying sorting are much harder and sometimes not possible to achieve.
9+
Best result will be achieved when using <code>DisplayMode="DataGridDisplayMode.Table"</code>.
10+
</Description>
11+
</DemoSection>

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@
22
@using FluentUI.Demo.Shared.Pages.DataGrid.Examples
33

44
<PageTitle>Using LoadingContent and EmptyContent</PageTitle>
5-
<DemoSection Title="Intermittent loading" Component="@typeof(DataGridNotVirtualizedLoadingAndEmpty)">
5+
<DemoSection Title="Using LoadingContent and EmptyContent" Component="@typeof(DataGridNotVirtualizedLoadingAndEmpty)">
66
<Description>
77
<p>
8-
Use the options below the grid to toggle the content of this non virtualized grid on and off and to simulate a loading state
8+
This example shows the usage of the templated <code>EmptyContent</code> and <code>LoadingContent</code> parameters.
9+
</p>
10+
<p>
11+
Use the switch and the button at the bottom to toggle between loading and empty content.
912
</p>
1013
</Description>
1114
</DemoSection>

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

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎examples/Demo/Shared/Shared/DemoNavProvider.cs‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -386,79 +386,74 @@ public DemoNavProvider()
386386
children:
387387
[
388388
new NavLink(
389-
href: "/datagrid-overview",
389+
href: "/datagrid",
390390
icon: new Icons.Regular.Size20.Grid(),
391391
title: "Overview"
392392
),
393393
new NavLink (
394-
href:"/datagrid-auto-fit",
395-
icon: new Icons.Regular.Size20.Grid(),
396-
title: "Auto fit"
397-
),
398-
new NavLink (
399-
href:"/datagrid-auto-items-per-page",
394+
href:"/datagrid-get-started",
400395
icon: new Icons.Regular.Size20.Grid(),
401-
title: "Auto items per page"
396+
title: "Getting started"
402397
),
403398
new NavLink (
404-
href:"/datagrid-custom-comparer",
399+
href:"/datagrid-typical",
405400
icon: new Icons.Regular.Size20.Grid(),
406-
title: "Custom comparer"
401+
title: "Typical grid usage"
407402
),
408403
new NavLink (
409-
href:"/datagrid-custom-paging",
404+
href:"/datagrid-loading-and-empty-content",
410405
icon: new Icons.Regular.Size20.Grid(),
411-
title: "Custom paging"
406+
title: "...Content parameters"
412407
),
413408
new NavLink (
414-
href:"/datagrid-custom-sort",
409+
href:"/datagrid-auto-fit",
415410
icon: new Icons.Regular.Size20.Grid(),
416-
title: "Custom sorting"
411+
title: "Auto fit"
417412
),
418413
new NavLink (
419-
href:"/datagrid-dynamic-columns",
414+
href:"/datagrid-auto-items-per-page",
420415
icon: new Icons.Regular.Size20.Grid(),
421-
title: "Dynamic columns"
416+
title: "Auto items per page"
422417
),
423418
new NavLink (
424-
href:"/datagrid-get-started",
419+
href:"/datagrid-custom-paging",
425420
icon: new Icons.Regular.Size20.Grid(),
426-
title: "Getting started"
421+
title: "Custom paging"
427422
),
428423
new NavLink (
429-
href:"/datagrid-header-generation",
424+
href:"/datagrid-multi-line",
430425
icon: new Icons.Regular.Size20.Grid(),
431-
title: "Header generation"
426+
title: "Multi line text in cells"
432427
),
433428
new NavLink (
434-
href:"/datagrid-loading-and-empty-content",
429+
href:"/datagrid-scrollbars",
435430
icon: new Icons.Regular.Size20.Grid(),
436-
title: "Intemittent loading"
431+
title: "Table with scrollbars"
437432
),
438433
new NavLink (
439-
href:"/datagrid-manual",
434+
href:"/datagrid-custom-comparer-sort",
440435
icon: new Icons.Regular.Size20.Grid(),
441-
title: "Manual grid"
436+
title: "Custom comparer sort"
442437
),
443438
new NavLink (
444-
href:"/datagrid-multi-line",
439+
href:"/datagrid-custom-gridsort",
445440
icon: new Icons.Regular.Size20.Grid(),
446-
title: "Multi line text in cells"
441+
title: "Custom GridSort"
447442
),
448443
new NavLink (
449444
href:"/datagrid-multi-select",
450445
icon: new Icons.Regular.Size20.Grid(),
451446
title: "Single/Multi select"
452447
),
453448
new NavLink (
454-
href:"/datagrid-remote-data",
449+
href:"/datagrid-dynamic-columns",
455450
icon: new Icons.Regular.Size20.Grid(),
456-
title: "Remote data"
451+
title: "Dynamic columns"
457452
),
458453
new NavLink (
459-
href:"/datagrid-scrollbars",
454+
href:"/datagrid-header-generation",
460455
icon: new Icons.Regular.Size20.Grid(),
461-
title: "Table with scrollbars"
456+
title: "Header generation"
462457
),
463458
new NavLink (
464459
href:"/datagrid-template-columns",
@@ -471,14 +466,19 @@ public DemoNavProvider()
471466
title: "More template columns"
472467
),
473468
new NavLink (
474-
href:"/datagrid-typical",
469+
href:"/datagrid-virtualize",
475470
icon: new Icons.Regular.Size20.Grid(),
476-
title: "Typical grid usage"
471+
title: "Virtualized grid"
477472
),
478473
new NavLink (
479-
href:"/datagrid-virtualize",
474+
href:"/datagrid-remote-data",
480475
icon: new Icons.Regular.Size20.Grid(),
481-
title: "Virtualized grid"
476+
title: "Remote data"
477+
),
478+
new NavLink (
479+
href:"/datagrid-manual",
480+
icon: new Icons.Regular.Size20.Grid(),
481+
title: "Manual grid"
482482
),
483483
]
484484
),

0 commit comments

Comments
 (0)