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

[Tonathiu]

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.

[Gowri Loganathan]

  

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, 

https://ej2.syncfusion.com/vue/documentation/api/treegrid/#filterbycolumn 

  

Please get back to us if you need more assistance. 

  

Regards, 

Gowri V L 

 

[Tonathiu]

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

https://codesandbox.io/s/vue-template-z1g13

[Manivannan Padmanaban]

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: { 

    queryCellInfo: function(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 

 

Sample Link: https://codesandbox.io/s/sf-vue-treegrid-childcount-zxb61 

Also, refer the below API links. 

https://ej2.syncfusion.com/vue/documentation/api/treegrid#querycellinfo 

Regards, 

Manivannan Padmanaban