Category / Section
How to show calculated value of children in parent row without using Aggregates?
2 mins read
This article explains how to display the calculated value of children only in the parent row without using aggregates in the Tree Grid.
Solution
In Tree Grid, we need to use the Aggregates functionality to calculate and display the aggregate value of records. It will be shown in the footer template of the Tree Grid by default. We can also display the calculated value of children in the parent row with the help of the valueAccessor property of columns without using Aggregates.
Customization
- The valueAccessor is used to access/manipulate the value of display data. You can achieve custom value formatting by using valueAccessor.
- For showing the calculated value of child records in parent row, we need to check whether the current record has children by using the property “hasChildRecords”.
- If it has children, we need to manipulate those children’s value and return the final calculated value. Then set it as the parent’s value.
JS
import { TreeGrid } from "@syncfusion/ej2-treegrid";
import { summaryRowData } from "./data-source";
import { isNullOrUndefined } from "@syncfusion/ej2-base";
let treegrid: TreeGrid = new TreeGrid({
dataSource: summaryRowData,
childMapping: "children",
treeColumnIndex: 0,
height: 400,
columns: [
{ field: "FreightID", headerText: "Freight ID", width: 130 },
{ field: "FreightName", width: 195, headerText: "Freight Name" },
{
field: "UnitWeight",
headerText: "Customized Weight Per Unit using value accessor",
type: "number",
valueAccessor: totalChildValue,
clipMode: "EllipsisWithTooltip",
width: 130,
textAlign: "Right"
},
{
field: "TotalUnits",
headerText: "Total Units",
type: "number",
width: 125,
textAlign: "Right"
}
]
});
treegrid.appendTo("#TreeGrid");
function totalChildValue(field, data, column) {
if (!isNullOrUndefined(data.hasChildRecords)) {
//checking if the record has children
let totalUnitWeight = 0;
data.children.map(row => (totalUnitWeight += row["UnitWeight"]));
return totalUnitWeight;
}
return data.UnitWeight;
}
Figure 1 show calculated child value in parent record
Also refer the other frameworks demo links below,
