Category / Section
How to show calculated value of children in parent row without using Aggregates?
2 mins read
This Knowledge base explains how to show the calculated value of children only in parent row without using Aggregates in Tree Grid.
Solution
In Tree Grid, we need to use Aggregates functionality to calculate and display aggregate value of records. It will be shown in the footer template of Tree Grid by default. We can also display calculated value of children in parent row with the help of 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 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,
