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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Filtering and visibility of Column in tree grid

Thread ID:

Created:

Updated:

Platform:

Replies:

148663 Oct 29,2019 03:45 PM UTC Nov 1,2019 12:10 PM UTC JavaScript - EJ 2 3
loading
Tags: TreeGrid
Sarathkumar, K (K.)
Asked On October 29, 2019 03:45 PM UTC

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 [Syncfusion]
Replied On October 30, 2019 02:00 PM UTC

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. 


Regards, 
Dinesh Rajendiran 


Sarathkumar, K (K.)
Replied On October 30, 2019 04:23 PM UTC

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 [Syncfusion]
Replied On November 1, 2019 12:10 PM UTC

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. 


If you need further assistance please get back to us. 

Regards, 
Dinesh Rajendiran

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

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
Live Chat Icon