count number items on child nested row / menu filter of a hidden column

Hello, Thanks again for answering our questions. We have a vue tree grid with hierarchical data binding structure using subtaks and taskName as fileds(see picture).  
1) Currently we have created a new coloumn to show the number of occurences of the most inner child row( show in figure as "Aantal"). Is there a way to show the number of items in the most inner child row without creting a new column, just the 'grouping data grid' ? 

2) If you have time . We want to add a menu filter of a hidden column outside of the grid (probably above), for example the year of each record. I see the documentation has a timepicker for a field e.g Date but the date has to be coulmn in order to do this. Is it possible to filter data for columns are hidden? in our case year date. 

Thanks again! for your support. Looking forward to your response

Best
Tonathiu.



3 Replies

GL Gowri Loganathan Syncfusion Team May 11, 2020 02:26 PM UTC

  
Hi Tonathiu, 
  
Thanks for contacting Syncfusion Forum. 
  

Query#1: count number items on child nested row

 

From the shared screenshot we suspect that you want to show the rowcount for the child rows for that we suggest you to use the feature child aggregates with type as count which is used to display the count of the child rows at its bottom.

 

Please refer the below documentation link,

https://ej2.syncfusion.com/vue/documentation/treegrid/aggregates/#child-aggregate

https://ej2.syncfusion.com/vue/documentation/treegrid/aggregates/#built-in-aggregate-types

 

  
Query#2: how to filter the hidden columns in treegrid 
  
We suggest you to use filterByColumn method to achieve your requirement to filter the hidden columns in treegrid. 
  
Please refer the below documentation link, 
  
Please get back to us if you need more assistance. 
  
Regards, 
Gowri V L 
 



TO Tonathiu May 11, 2020 04:51 PM UTC

thank for your response, yes i saw the aggregate feature. But we wanted to show the count next to the most inner row, just like the grouping grid. see pic below




MP Manivannan Padmanaban Syncfusion Team May 13, 2020 10:34 AM UTC

Hi Tonathiu, 

Sorry for the delayed response. 

From the shared details, we are able to understand that you want to show the child records count in the most inner row. We have achieved your requirement using the queryCellInfo event of TreeGrid. Refer the below code example, 


 <ejs-treegrid ref='treegrid' :dataSource="data" 
 ……………..  :queryCellInfo='queryCellInfo' > 
            <e-columns> 
……………………………………… 
            </e-columns> 
        </ejs-treegrid> 

export default { 
……………. 
  methods: { 
    queryCellInfofunction(args) { 
        if (args.column.field == 'taskName' &&  args.data.hasChildRecords) { // Use your treecolumn index field name here. 
            if (args.data.childRecords[0].childRecords == undefined) { // check the most inner parent row. 
                args.cell.getElementsByClassName('e-treecell')[0].innerText 
 = args.cell.innerText + '  -   ' + args.data.childRecords.length + ' items'; 
            } 
        } 
    } 
  }, 
…………….. 
} 



Output 
 


Also, refer the below API links. 

Regards, 
Manivannan Padmanaban 


Loader.
Up arrow icon