Callback for hiding and unhiding child rows in Responsive Datatables

[Deleted User]

I have a table with custom Warning icons inside it.
These Warnings each have a tooltip (? symbol) that displays more information when you click on them.
Our tooltip.js runs on page load or drawCallback to initialise the tooltip's functionality.
The tooltips in the spoiler don't get initialised, since they aren't actually in the DOM at the time of initialisation.

The child spoiler contents is created on demand by Datatables.
Ideally I'd like to initialise these after that render call of pressing the + button.

Is there a callback for this? I have tried responsive-display and a few others without success.
My current working solution is to call the initialisation code after a 250ms delay.

'data': 'WarningOrdering',

     render: function (data, type, row) {

         setTimeout(setUpTooltips, 250);

         return returnString;

     }

This works, but I would much prefer a more elegant solution.
Learning the correct way of doing this would be useful for the future.

colin

Hi @Bawat ,

You can use the event responsive-resize to tell when columns have been hidden/displayed due to a responsive action. This should do the trick for you.

Cheers,

Colin

[Deleted User]

Hi @colin

I tried that one earlier and couldn't get it to work. Am I using it wrong?

Here is a video of me testing it.
https://gyazo.com/2fc69d839ad3de381663f57a2a8e74bc

Here is the start of the initialisation code, this is all inside a JQuery Document Ready.

The first implementation I tried.

A second implementation I tried.

colin

Hi @Bawat ,

Yep, that responsive-resize is triggered when the columns are hidden/revealed. In your video, your opening the child rows, but the columns in the main table aren't being hidden or revealed due to the responsiveness. In your case, in that video, use the event responsive-display, check for true on showHide (fourth parameter), and update tooltips then.

Cheers,

Colin

[Deleted User]

Hi @colin ,

Still not working.
Here is a video of the attempt with a breakpoint inside the responsive-display.
https://gyazo.com/5dab3c8eb7af79049e6f97b59f8c457e

colin

Hi @Bawat ,

Thanks for the video, the most helpful thing would be if you could create a test case that we could experiment with. 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

prataprockerss

Hello @Bawat

I was also facing the same issue for x-editable initiation. responsive-display is work for me

but it works with .dt namespace.

example

Thanks
@colin for reference.