Aggregate values are displayed in the TreeGrid footer and in parent row footer for child row aggregate values. It can be configured through Aggregates property.
Field and Type
are the minimum properties required to represent an aggregate column.
By default, the aggregate value can be displayed in the treegrid footer, and footer of child rows. To show the aggregate value in one of the cells, use the FooterTemplate.
The aggregate type should be specified in the Type property to configure an aggregate column.
The built-in aggregates are,
Multiple aggregates can be used for an aggregate column by setting the
Typeproperty with an array of aggregate types. Multiple types for a column is supported only when one of the aggregate templates is used.
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().TreeGrid("TreeGrid")
.Height(260)
.DataSource((IEnumerable<object>)ViewBag.datasource)
.Aggregates(agg =>
{
agg.Columns(new List<Syncfusion.EJ2.TreeGrid.TreeGridAggregateColumn>() {
new Syncfusion.EJ2.TreeGrid.TreeGridAggregateColumn() {
Field = "units", Type = "Max",
FooterTemplate = "Maximum: ${Max}" , ColumnName = "units"
},
new Syncfusion.EJ2.TreeGrid.TreeGridAggregateColumn() {
Field = "price", Type = "Min",
FooterTemplate = "Minimum: ${Min}"
}
}).ShowChildSummary(false).Add();
})
.Columns(col =>
{
col.Field("orderID").HeaderText("Order ID").Width(130).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("orderName").HeaderText("Order Name").Width(195).Add();
col.Field("units").HeaderText("Units").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(130).Add();
col.Field("price").HeaderText("Price").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(125).Add();
}).ChildMapping("subTasks").TreeColumnIndex(1).Render())public IActionResult Index()
{
ViewBag.datasource = TreeSummaryData.GetData();
return View();
}The aggregate values must be accessed inside the template using their corresponding
Typename.
Aggregate value is calculated for child rows, and it is displayed in the parent row footer. Use the ShowChildSummary property to render the child rows aggregate value.
@(Html.EJS().TreeGrid("TreeGrid")
.Height(260)
.DataSource((IEnumerable<object>)ViewBag.datasource)
.Aggregates(agg =>
{
agg.Columns(new List<Syncfusion.EJ2.TreeGrid.TreeGridAggregateColumn>() {
new Syncfusion.EJ2.TreeGrid.TreeGridAggregateColumn() {
Field = "units", Type = "Max",
FooterTemplate = "Maximum: ${Max}" , ColumnName = "units"
},
new Syncfusion.EJ2.TreeGrid.TreeGridAggregateColumn() {
Field = "price", Type = "Min",
FooterTemplate = "Minimum: ${Min}"
}
}).ShowChildSummary(true).Add();
})
.Columns(col =>
{
col.Field("orderID").HeaderText("Order ID").Width(130).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("orderName").HeaderText("Order Name").Width(195).Add();
col.Field("units").HeaderText("Units").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(130).Add();
col.Field("price").HeaderText("Price").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(125).Add();
}).ChildMapping("subTasks").TreeColumnIndex(1).Render())public IActionResult Index()
{
ViewBag.datasource = TreeSummaryData.GetData();
return View();
}You can format the aggregate value result by using the Format property.
To calculate the aggregate value with your own aggregate functions, use the custom aggregate option. To use custom aggregation, specify the Type as Custom, and provide the custom aggregate function in the CustomAggregate property.
To access the custom aggregate value inside the template, use the key as
Custom. You can refer to ourASP.NET MVC Tree Gridfeature tour page for its groundbreaking feature representations. You can also explore ourASP.NET MVC Tree Grid exampleto knows how to present and manipulate data.