RowGroup with custom rendered cells

vismark

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?

kthorngren

applied on a cell that has a custom render function, the group will be created with the row data

See if this thread and the comments at the bottom of the rowGroup.dataSrc docs help.

how can I start the extension as disabled and enable it only via UI?

You can use the rowGroup().enable() to enable and disable the grouping.

Kevin

vismark

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?

colin

You can acess cell().render() in the rowGroup.startRender - something like this. That should do the trick.

Colin

vismark

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.

colin

The second parameter to startRender is group, which is the column being used for the grouping.

Colin

vismark

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?

kthorngren

You can use the rowGroup().dataSrc() API to get the dataSrc, like this:
http://live.datatables.net/jesizeno/1/edit

Kevin

vismark

@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

kthorngren

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 appropriate cell-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

vismark

@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.

kthorngren

The question is always the same since the beginning: how to access rendered data in rowGroup gunction.

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.

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.

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.

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

vismark

@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.

kthorngren

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:

1. Make sure the column index is not in the rowGroups array otherwise multiple double clicks on the column will create multiple rowgroup levels for that column.
2. Use order() to update the table order based on the rowgroups to properly group the rows.

Kevin

vismark

@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 of dt.column.index('fromVisible', $elm.index())?

kthorngren

why do you suggest to use dt.column($elm.index() + ':visible').index() instead of dt.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