Callback for hiding and unhiding child rows in Responsive Datatables

Callback for hiding and unhiding child rows in Responsive Datatables

[Deleted User][Deleted User] Posts: 0Questions: 0Answers: 0
edited August 2018 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: 15,118Questions: 1Answers: 2,583

    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][Deleted User] Posts: 0Questions: 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: 15,118Questions: 1Answers: 2,583

    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][Deleted User] Posts: 0Questions: 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: 15,118Questions: 1Answers: 2,583

    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

  • prataprockerssprataprockerss Posts: 1Questions: 0Answers: 0
    edited August 2019

    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.

This discussion has been closed.