Use another grouping row instead of an additional row created by rowGroup.startRender

Bart Baekelandt

Normally rowGroup.startRender is used to modify the contents of the
grouping row. This grouping row is a separate row showing
some summary information on the group and with this grouping row
you can expand and collapse the group via a click (works fine).

Instead of using this grouping row I want to use the first row of the group
as the grouping row and not a separate row.
As such I want to use the DataTables more like a "directory expansion".

With the rowGroup.startRender you can make this but then you have
on the first two rows of the group almost the same information displayed.
So basically I do not need the grouping row as I don't have additional or
summary information for the group.

As I am pretty new to the DataTables perhaps I did not
encounter the right method so all ideas are welcome.

kthorngren

The RowGroup extension adds a tr that is not part of the Datatable to show the start of the group. This happens whether you use rowGroup.startRender or let rowGroup display the default group row. There is not an option to use one of the Datatables rows as the group start.

the first two rows of the group almost the same information displayed.

I'm not sure what you mean. This example groups on the Office column. It also displays the office column. The same information is displayed in the office column. Is this what you mean? If so you can use columns.visible to hide the column used for the grouping.

So basically I do not need the grouping row as I don't have additional or
summary information for the group.

You could return an empty tr using rowGroup.startRender. You can style the row to reduce the row height. But you will need the row if you are using the collapsing solution.

Kevin

Bart Baekelandt

Here is some example output I have (I can share the example if you want to - I based it upon the examples and other forum code I did find).

I can collapse/expand with the +/- but that is on the grouping row (so hiding this will not help me). So instead of having a grouping row I want to modify the first row (otherwise I have too many rows and collapsing/expanding is associated with the first row). The grouping row does not give me more info (all the info is in the the rows already there).
For the different levels with startRender I use hidden columns that define the groups (so this info you cannot see in the screenshot). Basically this all works very fine but visually you have too many rows (indicated with a circle in the screenshot above).

The example is a network packet trace (that is expanded/collapsed) and typically the protocols have a hierarchy (nested like a directory tree that you can expand/collapse and inside a directory you have other directories and/or files, etc...)

Bart Baekelandt

So basically I want to use the grouping but not the grouping row so I think maybe startRender does not fit the job and I need some other approach...

kthorngren

Another option is to use Child Detail Rows. You have complete control of how the child data is displayed. The expand/collapse button is part of the row data.

Kevin

Bart Baekelandt

I looked at that too but there I had the impression that I was missing the "multiple level thing". In my example with the row grouping the nesting is automatically there via the row grouping (level parameter in the startRender and using multiple hidden columns).
So the child can have other children, etc... so the expansion control (+) needs to appear in the child row too (nesting of the expansion control).

allan

Hi,

RowGroup does not support the collapse of a group at this time I'm sorry to say. It is something that I'd like to add in future, but to date - it is not a feature of RowGroup.

Allan

Bart Baekelandt

That is a clear answer and finalizes my investigation on this topic. I have a working example so that is ok but a bit more rows :-)
Thanks

kthorngren

Here is a child detail rows example that has multiple levels of datatables.
http://live.datatables.net/tefaxula/67/edit

I added dom: 't', to the child tables to hide all the Datatables elements. You could use styling to remove extra whitespace, etc.

Kevin

Bart Baekelandt

Ok. Looks nice. I will investigate this path further and when I succeed post my result.
Thanks !

Bart Baekelandt

Here the modified code from Kevin that shows more or less what I want

http://live.datatables.net/wizegoju/1/edit

Works fine but the only drawback in contrary to the "rowgroup approach" is that there is no global column (every level has for my cases the same columns). So when rowgroup collapsing is there I will prefer this one.

Nevertheless it is a nice alternative.

Thanks to Kevin & Allan

kthorngren

is that there is no global column

Are you saying you want the expand/collapse button to be aligned in the same column for all levels?

As I said before you are free to create what you need in the child rows. You can align the columns as described in this thread. I updated an example based on that thread to display the "details-control".
http://live.datatables.net/gupazase/262/edit

You can use different formatting functions. for each child level to display the data the way you want. Datatables has no knowledge of nor control over the HTML generated for the child rows. It simply appends a tr to the parent row that you provide the HTML output for.

Kevin

Bart Baekelandt

Yep I want one "expansion column" and indeed Kevin your remark is usefull :

You can use different formatting functions. for each child level to display the data the way you want. Datatables has no knowledge of nor control over the HTML generated for the child rows. It simply appends a tr to the parent row that you provide the HTML output for.

So after some thinking and playing around I came up with

http://live.datatables.net/suhorode/3/edit

that is basically what I want and I think a lot more is possible but that fits the job.

So now I have three solutions

Again thanks for your very usefull hints.