Filtering and visibility of Column in tree grid

[Sarathkumar, K (K.)]

Hi Expert,

1. How to update the child count on its parent once the filter is applied?

2. How to change the column of a treegrid on button click.By default treegrid should display a particular set of column ( Column 1). on button click the tree grid should display totally different set of column (Column 2 )?

Thanks and Regards

Sarathkumar. K

[Dinesh Rajendiran]

Hi Sarathkumar, 

Thanks for contacting syncfusion support. 

Query 1: Update child count of the parent once filtered 

Using the Aggregates functionality the requirement can be achieved by setting the showChildSummary  property as true and type  property as Count . 

Please refer code snippet below. 

aggregates: [{ 

          showChildSummary: true, 

                columns: [ 

                    { 

                        type: 'Count', 

                        field: 'UnitWeight', 

                        columnName: 'UnitWeight', 

                        footerTemplate: 'Count: ${Count}' 

                    }] 

        }] 

 

Query 2: Change columns on the button click 

 

By setting new columns to the TreeGrid’s columns property the requirement can be achieved. Please refer code snippet below. 

 

let btn = document.getElementById("button"); 

let change = () => { 

   treegrid.columns = [  

            { field: 'FreightName', width: 200, headerText: 'Freight Name' }, 

            { field: 'TotalUnits', headerText: 'Total Units', type: 'number', width: 140, textAlign: 'Right' } ] 

 

} 

btn.addEventListener("click", change); 

For your convenience we have included an sample, please refer the link below. 

Sample: https://stackblitz.com/edit/vfjhbl-6ftud6?file=index.ts  

Regards, 

Dinesh Rajendiran 

[Sarathkumar, K (K.)]

Hi Dinesh Rajendiran

Thanks for the quick reply.

Query 1: Update child count of the parent once filtered 

How to display the child count as below

Query 2: Change columns on the button click 

The solution provided fulfilled my requirement.

Thanks and Regards,

Sarathkumar.K

[Dinesh Rajendiran]

Hi Sarathkumar, 

Thanks for contacting syncfusion support. 

We have achieved your requirement using queryCellInfo event. In queryCellInfo event we find the parent record using hasChildRecords property and filtered the currentViewRecords using uniqueID to get the child records count for each parent record.  

Once we get the child records count it has been updated to the parent TR element using the arguments of queryCellInfo event. 

Please find the code snippet below.  

queryCellInfo: function(args){ 

            let count = 0; 

              if(args.data["hasChildRecords"] == true && args.column.field == "FreightID" ){   

                var record = this.getCurrentViewRecords(); 

                for( var i = 0; i < record.length; i++){ 

                    if(record[i].parentItem && args.data["uniqueID"] == record[i].parentItem.uniqueID ){ 

                           count++; 

                    }                     

                } 

                args.cell["innerText"] = args.cell["innerText"] + " " + "(" + count + ")" ; 

              } 

           } 

For your convenience we have attached a sample. Please refer the link below. 

Sample: https://stackblitz.com/edit/vfjhbl-5tje5s 

If you need further assistance please get back to us. 

Regards, 

Dinesh Rajendiran