We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to update parent record based on child records’ value

Platform: jQuery |
Control: ejTreeGrid

There may be a case where the parent record’s fields must be updated based on child records’ fields during adding, editing and deleting actions. And this can be achieved in TreeGrid using the below client side events,

  • rowDataBound: This event will be triggered while rendering each row
  • actionComplete: This event will be triggered after adding and deleting action.
  • endEdit: This event will be triggered after editing a cell or row.

The below code example explains how to update the parent record while initial load and after add and edit actions.

<div id="TreeGridContainer" style="height:400px;width:100%"></div>    
<script type="text/javascript">
$(function () {
dataSource: projectData,
rowDataBound: rowDataBound,
actionComplete: actionComplete,
function rowDataBound(args) {
//Updating the parent record’s duration and end date in initial load and in adding action
var currentRecord = args.data,
parentItem = currentRecord.parentItem,
childRecords = parentItem && parentItem.childRecords;
if (parentItem && childRecords.indexOf(currentRecord) == childRecords.length - 1 && currentRecord.hasChildRecords === false) {
function actionComplete(args) {
// Updating the parent record’s duration and end date in delete action
if (args.requestType == "delete") {
var parentItem = args.data.parentItem;
var temp = update(parentItem);
// Updating the parent record’s duration and end date while adding a record
if (args.requestType == "addNewRow"&& args.previousValue) {
var parentItem = args.model.selectedItem.parentItem;
var temp = update(parentItem);
function endEdit(args) {
// Updating the parent record’s duration and end date after Editing            
var parentItem = args.model.selectedItem.parentItem;
var temp = update(parentItem);
function update(parentItem) {
var duration_count = 0, progress_count = 0;
if (parentItem != null) {
var endDate = [],
childRecords = parentItem.childRecords,
len = childRecords.length,
startDate_maxObj = new Date(parentItem.childRecords[0].startDate),
startDate_max = parentItem.childRecords[0].startDate;
endDate_maxObj = new Date(parentItem.childRecords[0].endDate),
endDate_max = parentItem.childRecords[0].endDate;
for (var i = 0; i < len; i++) {
//To calculate the maximum end date among child records
if (new Date(parentItem.childRecords[i].endDate) > endDate_maxObj)                   
endDate_max = parentItem.childRecords[i].endDate;
endDate_maxObj = new Date(parentItem.childRecords[i].endDate);
//To calculate the maximum start date among child records
if (new Date(parentItem.childRecords[i].startDate) > startDate_maxObj) {
startDate_max = parentItem.childRecords[i].startDate;
startDate_maxObj = new Date(parentItem.childRecords[i].startDate);
//To update the duration and progress of the Parent Item
var duration = parentItem.childRecords[i].duration,
progress = parentItem.childRecords[i].progress;
if (duration)
duration_count = duration_count + parseInt(duration);
if (progress)
progress_count = progress_count + parseInt(progress);
parentItem.duration = duration_count.toString();
parentItem.progress = progress_count;
parentItem.endDate = endDate_max;
parentItem.startDate = startDate_max;
var obj = $("#TreeGridContainer").data("ejTreeGrid");
return update(parentItem.parentItem);


Update the parent record based on child record's value.

A Sample to update the parent records with child records’ values is available in the following link,





You must log in to leave a comment
Mar 10, 2022

Hi Team, Could you provide this solution in Angular?


Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile