Add data from hidden columns to existing child row using the Responsive extension

oriberu

First, thanks for DataTables; it's an impressive module.

Using DataTables' Responsive extension, is it possible to add the data representing hidden columns to a pre-existing child row (not overwriting existing content) instead of creating a new child row? That would also include not placing a new user control. The options described in the extension's documentation do not suggest a solution to me.

Alternatively, I would also write my own handler functions, if I knew which hooks to use.

colin

Hi @oriberu ,

This example here should help - it's demonstrating how you can create your own child renderer. Using this as a framework, you should be able to create the behaviour you're after.

Hope that helps,

Cheers,

Colin

oriberu

@colin Thank you for your answer.

I did some testing with the renderer, but could only get it to trigger at all when the responsive.details.type property was set to inline or column, in which case a new user control is created, and the existing child row is overwritten (both of which I don't want). The latter I can probably avoid by returning false from the responsive.details.renderer, but I don't see how to bypass the former.

colin

Hi @oriberu ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

oriberu

@colin Thanks for your comment.

I made an incomplete test case illustrating the behaviour I would like to have in the comments. I hope this makes my problem a little clearer.

allan

I'd suggest you by-pass the Responsive renderer in this case since you've already got your own renderer. You can use columns().every() to loop over each column in the table and then inside that loop use column().responsiveHidden() to determine if the column is hidden or not. If so, then display that data in your custom component.

Allan

oriberu

@allan Thank you for your suggestion.

Yes, it also occured to me to solely use my own renderer for transposing the data and - after a lot of trial and error - I ended up using Responsive's automatic hiding/restoring of columns (edit) combined with one function to render the content into my details pane and another set of functions for removing and restoring that data when further resizing of the viewport is done.

The latter are triggered by an event handler listening to the responsive-resize event and - inspired by your post - employ columns().responsiveHidden() to compare the number of supposed columns with the number of actual columns to decide on the appropriate action.

Thanks to both of you, @colin and @allan, for helping me understand DataTables a little better.