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

Show count of checked childs for each parent in tree grid component

Hello!

Is there any support in the TreeGrid component to get the count of checked (checkbox selection) childs and update that count next to the parent name each time a child is checked/unchecked?
Something similar to the attached image.

Thanks!

Attachment: Example_193e157f.rar

3 Replies 1 reply marked as answer

MP Manivannan Padmanaban Syncfusion Team June 16, 2020 02:57 PM UTC

Hi Emilia, 

Greetings from Syncfusion Support. 

We have achieved your requirement using updateRow method of Tree Grid. For that we suggest you to enable to editing and isPrimaryKey in the column definition, refer to the below code example. 

……………………. 
    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')); 


Output 
 



Refer to the below API and help documentation links, 

Please get back to us, if you need further assistance. We will be happy to assist you. 

Regards, 
Manivannan Padmanaban 







Marked as answer

EP Emilia Piringiui June 18, 2020 09:19 AM UTC

Thank you for your answer!
Another bottleneck reached:  not able to render the child nodes of a group with a large dataset (attached entire data sample).
I am using UrlAdaptor to get this data. The request for the parent node ("All") is working ok, but once i click on the expand arrow, the request on the server is performed and the childs are returned but not rendered. The grid remains in the loading state and the page gets unresponsive.
I am using pagination and tried it with virtualization also but without any luck.
Could you advise? 


Attachment: data_b5f04d2b.zip


MP Manivannan Padmanaban Syncfusion Team June 19, 2020 09:07 AM UTC

Hi Emilia, 

Thanks for the update. 

In order to proceed further, we would like to confirm the following details. 
  1. Share the complete tree grid code example (both client and server end)
  2. Share the video demonstration of the issue.
  3. Share the produce version detail.
  4. Confirm whether are you received any script error in the console. If yes, please share the complete stack trace.

Provided details will help us, to resolve the reported issue as early as possible. 

Regards, 
Manivannan Padmanaban 


Loader.
Live Chat Icon For mobile
Up arrow icon