Callback for hiding and unhiding child rows in Responsive Datatables

Callback for hiding and unhiding child rows in Responsive Datatables

BawatBawat Posts: 5Questions: 0Answers: 0
edited August 9 in Free community support

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.

Replies

  • colincolin Posts: 1,726Questions: 0Answers: 318

    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

  • BawatBawat Posts: 5Questions: 0Answers: 0

    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.

  • colincolin Posts: 1,726Questions: 0Answers: 318

    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

  • BawatBawat Posts: 5Questions: 0Answers: 0

    Hi @colin ,

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

  • colincolin Posts: 1,726Questions: 0Answers: 318

    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

Sign In or Register to comment.