…………………….
onClick(args) {
var checkedCount = 0, proxy = this.treegrid;
if (isNullOrUndefined(args.data)) {
var data = this.treegrid.getCurrentViewRecords()[args.rowIndex];
if (!isNullOrUndefined(args.target) && (args.target.classList.contains('e-check') || args.target.classList.contains('e-uncheck')) && !isNullOrUndefined(data.parentItem)) {
var parentRowIndex = this.treegrid.grid.getRowIndexByPrimaryKey(data.parentItem.taskID);
var parentData = this.treegrid.getCurrentViewRecords()[parentRowIndex];
setTimeout(function () {
parentData.taskName = parentData.taskName.split('/')[0].split('(')[0];
proxy.updateRow(parentRowIndex, parentData); // update the original data when all the rows are unchecked
})
}
}
if (!args.isHeaderCheckboxClicked
&& !isNullOrUndefined(args.data) && isNullOrUndefined(args.data.hasChildRecords)) {
if (!isNullOrUndefined(args.target) && (args.target.classList.contains('e-check') || args.target.classList.contains('e-uncheck'))) {
var data = this.treegrid.getCurrentViewRecords()[args.rowIndex];
var parentRowIndex = this.treegrid.grid.getRowIndexByPrimaryKey(data.parentItem.taskID);
var parentData = this.treegrid.getCurrentViewRecords()[parentRowIndex];
var result = this.treegrid.dataSource.filter(obj => {
return obj[this.treegrid.getPrimaryKeyFieldNames()] === parentData[this.treegrid.getPrimaryKeyFieldNames()];
});
var child = result[0][this.treegrid.childMapping];
if (args.target.classList.contains('e-uncheck')) {
checkedCount = parseInt(parentData.taskName.split('/')[0].split('(')[1]);
checkedCount--; // decrement the checked child count when check the child records.
} else {
for (var i = 0; i < child.length; i++) {
var row = this.treegrid.getRowByIndex(this.treegrid.grid.getRowIndexByPrimaryKey(child[i].taskID));
if (row.cells[0].childNodes[0].childNodes[1].classList.contains('e-check')) {
checkedCount++; // increment the checked child count when check the child records.
}
}
}
parentData.taskName = parentData.taskName.split('(')[0] + ' (' + checkedCount + '/' + child.length + ')';
setTimeout(function () {
proxy.updateRow(parentRowIndex, parentData); // udpate checked child count using updateRow method
});
}
}
}
render() {
this.onClick = this.onClick.bind(this);
return (<div className='control-pane'>
<div className='control-section'>
<TreeGridComponent ref={g => this.treegrid = g} ……… rowSelected={this.onClick} rowDeselected={this.onClick} childMapping='subtasks' >
<ColumnsDirective>
<ColumnDirective type='checkbox' width='50'></ColumnDirective>
<ColumnDirective field='taskID' isPrimaryKey={true} headerText='Task ID' width='70' textAlign='Right'></ColumnDirective>
…………………………..
</ColumnsDirective>
<Inject services={[Edit]} />
</TreeGridComponent>
</div>
</div>);
}
}
render(<CheckboxSelection />, document.getElementById('sample'));
|