Use another grouping row instead of an additional row created by rowGroup.startRender
Use another grouping row instead of an additional row created by rowGroup.startRender
Bart Baekelandt
Posts: 8Questions: 1Answers: 0
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.
This question has accepted answers - jump to:
Answers
The RowGroup extension adds a
trthat is not part of the Datatable to show the start of the group. This happens whether you userowGroup.startRenderor let rowGroup display the default group row. There is not an option to use one of the Datatables rows as the group start.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.visibleto hide the column used for the grouping.You could return an empty
trusingrowGroup.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
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...)
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...
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
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).
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
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
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
Ok. Looks nice. I will investigate this path further and when I succeed post my result.
Thanks !
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
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
trto the parent row that you provide the HTML output for.Kevin
Yep I want one "expansion column" and indeed Kevin your remark is usefull :
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.