Footer aggregate in Blazor Grid component
3 Nov 202317 minutes to read
The Syncfusion Blazor Grid component allows you to calculate and display aggregate values in the footer cells. The footer aggregate value is calculated from all the rows in the grid. You can use the FooterTemplate property to render the aggregate value in the footer cells.
To access the aggregate values inside the FooterTemplate, you can use the implicit named parameter context. You can type cast the context as AggregateTemplateContext to get aggregate values inside template.
@using Syncfusion.Blazor.Grids
@using BlazorApp1.Data
<SfGrid DataSource="@Orders" AllowPaging="true">
<GridPageSettings PageSize="8"></GridPageSettings>
<GridAggregates>
<GridAggregate>
<GridAggregateColumns>
<GridAggregateColumn Field=@nameof(OrderData.Freight) Type="AggregateType.Sum" >
<FooterTemplate>
@{
var aggregate = (context as AggregateTemplateContext);
<div>
<p>Sum: @aggregate.Sum</p>
</div>
}
</FooterTemplate>
</GridAggregateColumn>
</GridAggregateColumns>
</GridAggregate>
<GridAggregate>
<GridAggregateColumns>
<GridAggregateColumn Field=@nameof(OrderData.Freight) Type="AggregateType.Max">
<FooterTemplate>
@{
var aggregate = (context as AggregateTemplateContext);
<div>
<p>Max: @aggregate.Max</p>
</div>
}
</FooterTemplate>
</GridAggregateColumn>
</GridAggregateColumns>
</GridAggregate>
</GridAggregates>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID, string CustomerID,double Freight,string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.Freight = Freight;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Vins et alcools Cheval"));
Orders.Add(new OrderData(10249, "TOMSP", 51.30, "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE",58.17, "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", 13.97, "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", 3.05, "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS",32.38, "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU",41.34, "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI",11.61, "Ernst Handel"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public double? Freight { get; set; }
public string ShipName { get; set; }
}Format the aggregate value
To format the aggregate value result in the Syncfusion Blazor Grid component, you can use the Format property of the AggregateColumn. The Format property allows you to specify a format string that determines how the aggregate value will be displayed.
@using Syncfusion.Blazor.Grids
@using BlazorApp1.Data
<SfGrid DataSource="@Orders" AllowPaging="true">
<GridPageSettings PageSize="8"></GridPageSettings>
<GridAggregates>
<GridAggregate>
<GridAggregateColumns>
<GridAggregateColumn Field=@nameof(OrderData.Freight) Type="AggregateType.Sum" Format="N0">
<FooterTemplate>
@{
var aggregate = (context as AggregateTemplateContext);
<div>
<p>Sum: @aggregate.Sum</p>
</div>
}
</FooterTemplate>
</GridAggregateColumn>
</GridAggregateColumns>
</GridAggregate>
<GridAggregate>
<GridAggregateColumns>
<GridAggregateColumn Field=@nameof(OrderData.Freight) Type="AggregateType.Max" Format="N0">
<FooterTemplate>
@{
var aggregate = (context as AggregateTemplateContext);
<div>
<p>Max: @aggregate.Max</p>
</div>
}
</FooterTemplate>
</GridAggregateColumn>
</GridAggregateColumns>
</GridAggregate>
</GridAggregates>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID, string CustomerID,double Freight,string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.Freight = Freight;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Vins et alcools Cheval"));
Orders.Add(new OrderData(10249, "TOMSP", 51.30, "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE",58.17, "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", 13.97, "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", 3.05, "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS",32.38, "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU",41.34, "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI",11.61, "Ernst Handel"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public double? Freight { get; set; }
public string ShipName { get; set; }
}