JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Blazor DataGrid Aggregate lines › Reply To: Blazor DataGrid Aggregate lines
May 14, 2022 at 4:23 pm
#103236
admin
Keymaster
Hi Oliver,
The property is called SummaryRow and each column has Summary property.
Example how to use it:
@page "/grid"
@using Smart.Blazor.Demos.Data
@inject WeatherForecastService ForecastService
<Example Name="Grid">
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from a service.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<Grid OnReady="GridReady" SummaryRow="summary" Sorting="@sorting" Appearance="@appearance" Selection="@selection" Style="width: 80%;">
<Columns>
<Column DataField="Date" Label="Date"></Column>
<Column DataField="TemperatureC" Label="TemperatureC"></Column>
<Column DataField="TemperatureF" Label="TemperatureF"></Column>
<Column Summary="@columnSummary" DataField="Summary" Label="Summary"></Column>
</Columns>
<Rows>
@foreach (var forecast in forecasts)
{
<Row>
<Cell Content="@forecast.Date.ToShortDateString()"></Cell>
<Cell Content="@forecast.TemperatureC"></Cell>
<Cell Content="@forecast.TemperatureF"></Cell>
<Cell Content="@forecast.Summary"></Cell>
</Row>
}
</Rows>
</Grid>
}
</Example>
@code {
string[] columnSummary = new string[] { "count" };
GridSummaryRow summary = new GridSummaryRow() { Visible = true };
GridSorting sorting = new GridSorting() { Enabled = true };
GridAppearance appearance = new GridAppearance() { AlternationCount = 2 };
GridSelection selection = new GridSelection()
{
Enabled = true,
Mode = GridSelectionMode.Many,
CheckBoxes = new GridSelectionCheckBoxes()
{
Enabled = true
}
};
void GridReady(Grid grid)
{
var rows = grid.Rows;
grid.SelectRows(new int[] { 0, 1, 2 });
}
private WeatherForecast[] forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}
}
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/