Footer Aggregate in ASP.Net MVC Grid Component
27 Dec 20223 minutes to read
Footer aggregate value is calculated for all the rows, and it is displayed in the footer cells. Use the FooterTemplate
property to render the aggregate value in footer cells.
@Html.EJS().Grid("Footer").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("Freight").HeaderText("Freight").Width("160").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("140").Add();
}).AllowPaging().PageSettings(page => { page.PageCount(5); }).Aggregates(agg=> { agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Type = "Sum", FooterTemplate = "Sum: ${Sum}" } }).Add();
agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Type = "Average", FooterTemplate = "Average: ${Average}" } }).Add(); }).Render()
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
NOTE
The aggregate values must be accessed inside the template using their corresponding
Type
name.
How to format aggregate value
You can format the aggregate value result by using the Format
property of GridAggregate Column
.
@Html.EJS().Grid("FormatAggregate").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("Freight").HeaderText("Freight").Width("160").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("140").Add();
}).AllowPaging().PageSettings(page => { page.PageCount(5); }).Aggregates(agg=> { agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Format = "C2", Type = "Sum", FooterTemplate = "Sum: ${Sum}" } }).Add();
agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Format = "C2", Type = "Average", FooterTemplate = "Average: ${Average}" } }).Add(); }).Render()
public IActionResult Index()
{
var Order = Product.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
How to place aggregates on top of the Grid
By default, the aggregated values are placed at the bottom of the footer section. It is possible to place the aggregated values at the top of the header. This is achieved by using the DataBound event, getHeaderContent
, and getFooterContent
methods of the Grid.
In the following sample, the footer element is appended to the header element using the getHeaderContent
and getFooterContent
methods in the DataBound
event.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).DataBound("dataBound").Columns(col =>
{
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("Freight").HeaderText("Freight").Width("160").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("140").Add();
}).AllowPaging().PageSettings(page => { page.PageCount(5); }).Aggregates(agg =>
{
agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Type = "Sum", FooterTemplate = "Sum: ${Sum}" } }).Add();
agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Type = "Average", FooterTemplate = "Average: ${Average}" } }).Add();
}).Render()
<script>
function dataBound() {
var grid = document.getElementById("Grid").ej2_instances[0];
grid.getHeaderContent().append(grid.getFooterContent());
}
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}