Row count in treetable footer

Webix JS
1

Hi,

I need to show in treetable’s footer some aggregation info:

  1. total treetable rows count;
  2. total group rows count.

There is a property footer:{ content:“summColumn” } and summing column values is very convenient.

Could you please tell are there something like “countColumnRows” and “countColumnGroups”?

2

There are no such ready-to-use helpers, but it is quite easy to create them.

Check
http://docs.webix.com/datatable__headers_footers.html#customheaderandfootercontent

You can create a custom code block similar to summColumn, that calculates some value, and put it in the footer.

3

Thanks for your help, Maksim!


Could you please give me more details - where is the best place for the custom footer content element if we have, for example, app structure as in webix-admin-app-demo? For instance, if we want to count how much rows are in ‘Orders’ datatable: each time when user loading the page - webix will create new webix.ui.datafilter.customFilterName? and when user leaved the page will webix destroy customFilterName automatically or we should do it yourself?

4

The above solution allows to create a custom active element for the DataTable, so you can use it in the same way as sumColumn in header or footer.

DataTable will trigger the code of custom element each time as data changes.
Webix will destroy the component and all related elements when DataTable itself is destroyed. So there is no any need for manual life-cycle handling.

This approach allows to use the element only in footer or header of the grid. If you want to have such info in the some other place on the page - it possible to create a bit more complicated logic by using DataTable’s API and events.

5

Got it, thanks a lot!

6

What I don’t like a bit about webix is that if someone doesn’t know some kind of ‘magic’ - yours code will never work.


For instance there http://docs.webix.com/datatable__headers_footers.html#customheaderandfootercontent
webix.ui.datafilter.customFilterName won’t work at all until you’d add in the object some ‘magic’ property:


trackCells:true.

Spent an hour to find that:(

7

Yep, that is miss from our side.
Sorry for inconvenience.

trackCells flag sets event tracking mode, without it active element will render self only once. With such flag, active element will repaint self after each change in the data.

8

Thank you for info!


By the way there is another nuance there with custom filter object - it must have declared methods getValue and setValue like this:

getValue:function(){},
setValue: function(){},
`

Without these methods Chrome throws an error: function getValue not defined…
9

Does trackCells work with multilevel tree table? Here It’s just working with first level of tree table.