Aggregates in ASP.NET CORE Tree Grid Component

21 Dec 20222 minutes to read

Aggregate values are displayed in the TreeGrid footer and in parent row footer for child row aggregate values. It can be configured through e-treegrid-aggregates property. The field and type are the minimum properties of e-treegrid-aggregate-column 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 property of e-treegrid-aggregate-column tag helper.

Built-in aggregate types

The aggregate type should be specified in the type property to configure an aggregate column.

The built-in aggregates are,

  • Sum
  • Average
  • Min
  • Max
  • Count
  • Truecount
  • Falsecount

NOTE

Multiple aggregates can be used for an aggregate column by setting the type property with an array of aggregate types.
Multiple types for a column is supported only when one of the aggregate templates is used.

Child aggregate

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.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="260" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-aggregates>
        <e-treegrid-aggregate showChildSummary="true">
            <e-treegrid-aggregate-columns>
                <e-treegrid-aggregate-column field="Approved" type="TrueCount" columnName="Approved" footerTemplate="Approved: ${TrueCount}"></e-treegrid-aggregate-column>
            </e-treegrid-aggregate-columns>
        </e-treegrid-aggregate>
    </e-treegrid-aggregates>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="80"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="200"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="100"></e-treegrid-column>
        <e-treegrid-column field="Approved" headerText="Approved" type="boolean" textAlign="Center" displayAsCheckBox="true" width="100"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
    ViewBag.datasource = TreeSummaryData.GetData();
    return View();
}

NOTE

You can refer to our ASP.NET Core Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example ASP.NET Core Tree Grid example to knows how to present and manipulate data.