RowGroup with custom rendered cells
RowGroup with custom rendered cells
vismark
Posts: 79Questions: 5Answers: 0
I'm trying to use RowGroup extension but i noticed that if applied on a cell that has a custom render function, the group will be created with the row data, not with the rendered one. Is there a way I can show the rendered data instead?
Also, how can I start the extension as disabled and enable it only via UI? Like only after a click over a button or something like that?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
See if this thread and the comments at the bottom of the
rowGroup.dataSrcdocs help.You can use the
rowGroup().enable()to enable and disable the grouping.Kevin
Thanks @kthorngren , I've already saw those links but this means I have to re-render back cell contents and that's not efficient in my opinion? There's really no way to access cell.render() data? I noticed that no info about the involved column nor the aggragated row data are passed into the startRender callback function...so if for example i wish to render it as [column name]: [group by value] I have no options rather than create some external references...is this right?
You can acess
cell().render()in therowGroup.startRender- something like this. That should do the trick.Colin
Thanks @colin , in the example you posted you are accessing data in column 1 manually...but what if you have to do it dynamically? How do you get the reference to which column is being used for the rowGroup? I don't know if dataSrc will be 1 or x at the init of the table. The user will choose which column to group via UI.
The second parameter to
startRenderisgroup, which is the column being used for the grouping.Colin
In [group] I have the string value of the cell being grouped, not the column index reference...i guess I could search the row array for that string to find the index position, but it's a workaround and I don't know if it will always work with other exensions / plugins enabled. Is this what you were suggesting?
You can use the
rowGroup().dataSrc()API to get the dataSrc, like this:http://live.datatables.net/jesizeno/1/edit
Kevin
@kthorngren this will work only if you have 1 group...if you have more than 1 group (like in my case) you receive back an array of indexes
Then maybe you will need to use
cells().render()with an appropriatecell-selector.Every time we answer your questions its not enough and you add on more requirements. To make this more efficient for all of us please update one of our examples with what you have so we can provide suggestions specifc to your requirements.
Kevin
@kthorngren I'm not updating any question, just demostrating that every suggestion gave until now is just a workaround and might not work in most of the scenarios. The question is always the same since the beginning: how to access rendered data in rowGroup gunction.
Of course I can use cells().render() to get the rendered content but the problem here is that I don't have the any reference to use inside the rowGroup.startRender callback and as I'm allowing the user to choose which row / rows to group, I can't map a column reference in the code like in the examples because I need it to be dynamic.
That said, I choosed to save the triggered column/s reference/s upon user's input and then I use it combined with the "level" parameter to access column index. A bit rough as method but there seems to be no other way...and I opened the discussion to know if this other way exists.
Might it worth to think about adding this reference in the next versions?
And last but not least, I would like to thank you for all the work you are doing on this library, please don't think I'm ungrateful about it.
The second point was not in your original question. The answers provided answered the question as presented. We even provided working examples not workarounds. General questions will typically receive general answers allowing the poster to make adjustments per their requirements.
This is why I asked you to provide a test case so we can provide suggestions specific to your requirements. Otherwise we spend extra time providing answers that don't address your specific situation.
If you would like to see if there is a better way then please post a test case so we can see what you are doing.
Kevin
@kthorngren here you go: https://jsfiddle.net/0trawxq8/
In the example (a simplified version of my code), if you right click on a th you obtain a rowGroup. If you take a look at the rowGroupStartRender function, you see the rough solution I'm using at the moment to obtain the column name.
Thanks for the example!
You can get the real column index using this:
var index = dt.column($elm.index() + ':visible').index();You can get the column name by using
column().header()instead of hard coding an array. I updated your example with both techniques:https://jsfiddle.net/rv89dfzm/1/
I also hid column 0 to show that the correct column index is retrieved with
:visible.Since this is rough code you may already be addressing these items but I have a couple suggestions for you:
rowGroupsarray otherwise multiple double clicks on the column will create multiple rowgroup levels for that column.order()to update the table order based on the rowgroups to properly group the rows.Kevin
@kthorngren thanks for the example. In the real complete code I'm already hiding and fix-ordering the triggered colum.
Question: why do you suggest to use
dt.column($elm.index() + ':visible').index()instead ofdt.column.index('fromVisible', $elm.index())?Either works and they seem to be equal in the amount of code needed to get the real index. Just thought I would highlight it as another option.
Kevin