@ -95,22 +95,102 @@
<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>
<FluentDataGrid @ref="employeeGrid" Items="@FilteredEmployee" ResizableColumns="true" Pagination="@pagination">
<ChildContent>
@* <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}")" Filtered="@(!string.IsNullOrWhiteSpace(nameFilter))" Sortable="true" Title="Name">
<ColumnOptions>
<div class="search-box">
<FluentSearch Autofocus="true" @bind-Value="nameFilter" Label="Filter" Placeholder="Name..."
@bind-Value:after="HandleClear" @oninput="HandleNameFilter" />
</div>
</ColumnOptions>
</PropertyColumn>
<PropertyColumn Property="@(e => (DateTime.Today.Year - e.BirthDate.Year))" Sortable="true" 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" /> *@
</ChildContent>
<LoadingContent>
<FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Center">
Loading... <br />
<FluentProgress Width="240px" />
</FluentStack>
</LoadingContent>
</FluentDataGrid>
<FluentPaginator State="@pagination"/>
<FluentButton OnClick="SimulateEmployeeLoading">Simulate Data Loding</FluentButton>
</FluentCard>
<h4>Template columns</h4>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<p><b>Message</b>: @templateMessage?.ToString()</p>
<FluentDataGrid @ref="employeeGrid" Items="@FilteredEmployee" ResizableColumns="true" Pagination="@pagination">
<TemplateColumn Title="Employee">
<div class="flex-column items-center">
<FluentPresenceBadge Title="No status defined">
<img src="@(context.Photo)" class="face" />
</FluentPresenceBadge>
<nobr>
@($"{context.FirstName}, {context.LastName}")
</nobr>
</div>
</TemplateColumn>
<TemplateColumn Title="Bonus">
<FluentButton Appearance="Appearance.Accent" IconEnd="@(new Icons.Regular.Size16.ChevronUp())" OnClick="@(() => templateMessage = $"{context.FirstName}, {context.LastName}'s bonus is raised.")" />
<FluentButton Appearance="Appearance.Accent" IconEnd="@(new Icons.Regular.Size16.ChevronDownUp())" OnClick="@(() => templateMessage = $"{context.FirstName}, {context.LastName}'s bonus is preserved.")" />
<FluentButton Appearance="Appearance.Accent" IconEnd="@(new Icons.Regular.Size16.ChevronDown())" OnClick="@(() => templateMessage = $"{context.FirstName}, {context.LastName}'s Bonus is removed.")" />
</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>
<h4>Template columns 2</h4>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<FluentDataGrid Items="@sampleGridData.AsQueryable()">
<TemplateColumn Title="Name">
<FluentTextField @bind-Value="context.Name"/>
</TemplateColumn>
<TemplateColumn Title="Age">
<FluentNumberField @bind-Value="context.Age" />
</TemplateColumn>
</FluentDataGrid>
</FluentCard>
<h4>Dynamic columns</h4>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<p>
Show:
<FluentCheckbox @bind-Value="showName">Name</FluentCheckbox>
<FluentCheckbox @bind-Value="showBirth">Birth Date</FluentCheckbox>
</p>
<FluentDataGrid Items="@people">
<PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
@if (showName)
{
<PropertyColumn Property="@(p => p.Name)" Sortable="true" />
}
@if (showBirth)
{
<PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
}
</FluentDataGrid>
</FluentCard>
<h4>Multiline text columns</h4>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<FluentDataGrid Items="@sampleGridData.AsQueryable()">
<PropertyColumn Property="@(s => s.Name)" Title="@(nameof(SampleGridData.Name))" Sortable="true"/>
<PropertyColumn Property="@(s => s.Age)" Title="@(nameof(SampleGridData.Age))" Sortable="true" />
<PropertyColumn Class="multiline-text" Property="@(s => s.Description)" Title="@(nameof(SampleGridData.Description))" Sortable="true" />
</FluentDataGrid>
</FluentCard>
@code {
record Person(int PersonId, string Name, DateOnly BirthDate)
{
@ -140,10 +220,68 @@
SelectedItems = people.Where(p => p.Selected);
}
FluentDataGrid<Employee> employeeGrid;
PaginationState pagination = new PaginationState() { ItemsPerPage = 10 };
IQueryable<Employee> employees;
string? nameFilter;
protected override async Task OnInitializedAsync()
{
employees = (await EmployeeService.GetEmployeeDataAsync(100)).AsQueryable();
}
IQueryable<Employee>? FilteredEmployee
=> string.IsNullOrWhiteSpace(nameFilter) ? employees : employees?.Where(e => $"{e.FirstName}, {e.LastName}".Contains(nameFilter, StringComparison.OrdinalIgnoreCase));
void HandleNameFilter(ChangeEventArgs args)
{
if (args.Value is string value)
nameFilter = value;
}
void HandleClear()
{
if (string.IsNullOrWhiteSpace(nameFilter))
nameFilter = string.Empty;
}
async void SimulateEmployeeLoading()
{
employees = null;
employeeGrid?.SetLoadingState(true);
await Task.Delay(2000);
employees = (await EmployeeService.GetEmployeeDataAsync(100)).AsQueryable();
employeeGrid?.SetLoadingState(false);
await InvokeAsync(StateHasChanged);
}
string? templateMessage;
bool showName = true;
bool showBirth = true;
public class SampleGridData
{
public string Name { get; set; }
public int Age { get; set; }
public string Description
=> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
public SampleGridData(string name, int age)
{
Name = name;
Age = age;
}
}
List<SampleGridData> sampleGridData = new List<SampleGridData>
{
new SampleGridData("Tob", 15),
new SampleGridData("Rob", 25),
new SampleGridData("Taylor", 35),
};
}
