|
|
|
|
@ -0,0 +1,149 @@ |
|
|
|
|
@page "/compodatagrid" |
|
|
|
|
|
|
|
|
|
@inject EmployeeService EmployeeService |
|
|
|
|
|
|
|
|
|
@rendermode RenderMode.InteractiveServer |
|
|
|
|
|
|
|
|
|
<h3>DataGrid</h3> |
|
|
|
|
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" /> |
|
|
|
|
<div> |
|
|
|
|
The <code>FluentDataGrid</code> component is used to display tabular data. |
|
|
|
|
The <code>FluentDataGridRow</code> and <code>FluentDataGridCell</code> components are typically created programmatically by the parent grid |
|
|
|
|
but some authors may find it useful to create them manually. |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<h4 class="mt-3">Accessibility</h4> |
|
|
|
|
<div> |
|
|
|
|
You can use the <span class="fluent-border-s1-r5 px-1">Arrow</span> keys to navigate through a DataGrid. |
|
|
|
|
When header cell is focused and the column is sortable, you can use the <span class="fluent-border-s1-r5 px-1">Tab</span> key to select the sort button. |
|
|
|
|
Presssing the <span class="fluent-border-s1-r5 px-1">Enter</span> key will toggle the sorting direction. |
|
|
|
|
Pressing <span class="fluent-border-s1-r5 px-1">Ctrl+Enter</span> removes the column sorting and restores the default/start situation with regards to sorting. |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
When a header cell is focused and the column allows setting options, |
|
|
|
|
you can use the <span class="fluent-border-s1-r5 px-1">Tab</span> key to select the options button. |
|
|
|
|
Pressing the <span class="fluent-border-s1-r5 px-1">Enter</span> key then will toggle the options popover. |
|
|
|
|
Pressing the <span class="fluent-border-s1-r5 px-1">Esc</span> button to close the popover. |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
When a grid allows resizing of the columns, |
|
|
|
|
you can use the <span class="fluent-border-s1-r5 px-1">+</span> and <span class="fluent-border-s1-r5 px-1">-</span> keys to resize the column the focused header belongs to. |
|
|
|
|
Incrementing/decrementing width is done in steps of 10 pixels at a time. |
|
|
|
|
You can reset to the original initial column widths by pressing <span class="fluent-border-s1-r5 px-1">Shift+r</span>. |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<h4>Get started</h4> |
|
|
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false"> |
|
|
|
|
<FluentDataGrid Items="@people"> |
|
|
|
|
<PropertyColumn Property="@(p => p.PersonId)" Sortable="true" /> |
|
|
|
|
<PropertyColumn Property="@(p => p.Name)" Sortable="true" /> |
|
|
|
|
<PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" /> |
|
|
|
|
</FluentDataGrid> |
|
|
|
|
</FluentCard> |
|
|
|
|
|
|
|
|
|
<h4>Multi Select</h4> |
|
|
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false"> |
|
|
|
|
<FluentStack VerticalAlignment="VerticalAlignment.Center" Style="flex"> |
|
|
|
|
<FluentSelect Items="@(Enum.GetValues<DataGridSelectMode>())" @bind-SelectedOption="mode" Label="SelectMode"/> |
|
|
|
|
<FluentCheckbox @bind-Value="useSelectdItems" @bind-Value:after="(() => ResetSelectItems())" Label="Use 'SelectedItems' property"/> |
|
|
|
|
<FluentCheckbox @bind-Value="selectFromEntireRow" @bind-Value:after="(() => ResetSelectItems())" Label="Use 'SelectFromEntireRow' property"/> |
|
|
|
|
</FluentStack> |
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
|
@if (useSelectdItems) |
|
|
|
|
{ |
|
|
|
|
<h5>Using SelectedItems</h5> |
|
|
|
|
<FluentDataGrid Items="@people" ShowHover="@selectFromEntireRow"> |
|
|
|
|
<SelectColumn SelectMode="@mode" |
|
|
|
|
SelectFromEntireRow="@selectFromEntireRow" |
|
|
|
|
@bind-SelectedItems="SelectedItems" /> |
|
|
|
|
<PropertyColumn Property="@(p => p.PersonId)" Sortable="true" /> |
|
|
|
|
<PropertyColumn Property="@(p => p.Name)" Sortable="true" /> |
|
|
|
|
<PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" /> |
|
|
|
|
</FluentDataGrid> |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
{ |
|
|
|
|
<h5>Using Property and OnSelect</h5> |
|
|
|
|
<FluentDataGrid Items="@people" ShowHover="@selectFromEntireRow"> |
|
|
|
|
<SelectColumn TGridItem="Person" SelectMode="mode" |
|
|
|
|
SelectFromEntireRow="@selectFromEntireRow" |
|
|
|
|
Property="@(e => e.Selected)" |
|
|
|
|
OnSelect="@(e => e.Item.Selected = e.Selected)" |
|
|
|
|
SelectAll="@(people.All(p => p.Selected))" |
|
|
|
|
SelectAllChanged="@(all => people.ToList().ForEach(p => p.Selected = (all == true)))" /> |
|
|
|
|
<PropertyColumn Property="@(p => p.PersonId)" Sortable="true" /> |
|
|
|
|
<PropertyColumn Property="@(p => p.Name)" Sortable="true" /> |
|
|
|
|
<PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" /> |
|
|
|
|
</FluentDataGrid> |
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
|
<b>Peoples:</b> |
|
|
|
|
@String.Join("; ", people.Where(p => p.Selected).Select(p => p.Name)) |
|
|
|
|
</div> |
|
|
|
|
} |
|
|
|
|
</div> |
|
|
|
|
</FluentCard> |
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
.face { |
|
|
|
|
width:32px; |
|
|
|
|
height:32px; |
|
|
|
|
border:1px solid silver; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
<h4>Typical Usage</h4> |
|
|
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false"> |
|
|
|
|
<FluentDataGrid Items="@employees" ResizableColumns="true" Pagination="@pagination"> |
|
|
|
|
@* <PropertyColumn Property="@(e => e.ID)" Sortable="true"/> *@ |
|
|
|
|
<TemplateColumn Tooltip="true" TooltipText="@(e => $"Portrait of {e.FirstName}, {e.LastName}")" Title="Portrait" Align="Align.Center"> |
|
|
|
|
<FluentPresenceBadge Title="No status defined"> |
|
|
|
|
<img src="@(context.Photo)" class="face" /> |
|
|
|
|
</FluentPresenceBadge> |
|
|
|
|
</TemplateColumn> |
|
|
|
|
<PropertyColumn Property="@(e => $"{e.FirstName}, {e.LastName}")" Sortable="true" Title="Name" /> |
|
|
|
|
<PropertyColumn Property="@(e => (DateTime.Today.Year - e.BirthDate.Year))" Title="Age" /> |
|
|
|
|
<PropertyColumn Property="@(e => e.Job)" Sortable="true" /> |
|
|
|
|
@* <PropertyColumn Property="@(e => e.Title)" Sortable="true" /> *@ |
|
|
|
|
@* <PropertyColumn Property="@(e => e.HireDate)" Sortable="true" Format="yyyy-MM-dd" /> *@ |
|
|
|
|
</FluentDataGrid> |
|
|
|
|
<FluentPaginator State="@pagination"/> |
|
|
|
|
</FluentCard> |
|
|
|
|
|
|
|
|
|
@code { |
|
|
|
|
record Person(int PersonId, string Name, DateOnly BirthDate) |
|
|
|
|
{ |
|
|
|
|
public bool Selected { get; set; } |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
static IQueryable<Person> people = new[] |
|
|
|
|
{ |
|
|
|
|
new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)) { Selected = true }, |
|
|
|
|
new Person(10944, "António Langa", new DateOnly(1991, 12, 1)), |
|
|
|
|
new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)), |
|
|
|
|
new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)), |
|
|
|
|
new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)), |
|
|
|
|
new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)), |
|
|
|
|
}.AsQueryable(); |
|
|
|
|
|
|
|
|
|
bool useSelectdItems = true; |
|
|
|
|
bool selectFromEntireRow = true; |
|
|
|
|
DataGridSelectMode mode = DataGridSelectMode.Single; |
|
|
|
|
|
|
|
|
|
IEnumerable<Person> SelectedItems = people.Where(p => p.Selected); |
|
|
|
|
|
|
|
|
|
void ResetSelectItems() |
|
|
|
|
{ |
|
|
|
|
people.ToList().ForEach(i => i.Selected = false); |
|
|
|
|
people.First().Selected = true; |
|
|
|
|
SelectedItems = people.Where(p => p.Selected); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
PaginationState pagination = new PaginationState() { ItemsPerPage = 10 }; |
|
|
|
|
IQueryable<Employee> employees; |
|
|
|
|
protected override async Task OnInitializedAsync() |
|
|
|
|
{ |
|
|
|
|
employees = (await EmployeeService.GetEmployeeDataAsync(100)).AsQueryable(); |
|
|
|
|
} |
|
|
|
|
} |
