Keep Details Row in the DOM and use display:none to hide it. Like FooTables does.

Keep Details Row in the DOM and use display:none to hide it. Like FooTables does.

jpgjpg Posts: 4Questions: 1Answers: 0

Currently the Details row is not present ANYWHERE in the DOM and cannot be accessed or manipulated without the details row being visible/expanded.

It looks like the details row doesn't exist until you call the rendered function by clicking on the selector.

Sure I can use the API to create a 2D array and then from there I can drill down, but the table contents can change depending on who is logged in and what they are allowed to view. Therefor, we cannot rely on an array order to map elements to. In addition, our script will automatically update several fields (client side) and it cannot do that if the elements are not in the DOM....

I feel like I have to be missing something simple, I just don't understand why the only way to access the hidden columns is through the API...

I thank you all in advance for your assistance.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,824Questions: 1Answers: 10,131 Site admin

    Currently the Details row is not present ANYWHERE in the DOM and cannot be accessed or manipulated without the details row being visible/expanded.

    The child rows can be access using the row().child() method.

    It looks like the details row doesn't exist until you call the rendered function by clicking on the selector.

    Yes, this is correct in that configuration. You could have the API create the child rows and not show them if you wished. You'd still need to access them by the API if you then wanted to access them while not visible though.

    I've taken the view of not having elements in the table's DOM which are not needed for a couple of reasons:

    1. Performance with large tables
    2. Compatibility with older browsers
    3. Consistency

    Allan

  • jpgjpg Posts: 4Questions: 1Answers: 0

    Hi Allan,

    Thanks for the speedy response. Unfortunately, because we have varying column counts dependent on who is logged in, and one cell containing a form, there seems to be no way to accomplish what we need to with row().child().

    Maybe you can point me in the right direction as to where I could insert the row().child() code so that it is automatically generated every time. From there I can use some javascript to add/remove the display: none; class.

    Looking at the sheer amount of code involved in this project (15,000+ lines), maybe that's not a simple task.

    Thanks again for you assistance, and for making a really amazing package.

    Best Regards,

    J.P.

  • allanallan Posts: 61,824Questions: 1Answers: 10,131 Site admin

    Hi JP,

    In the child row example you will be able to see in the code that it calls row().child().show():

    row.child( format(row.data()) ).show();

    To have it generate the child row (which you can then retrieve using row().child()) but not show it, you would simply remove the .show() call.

    If you wanted to generate the child rows for all rows in the table on load, you would just call row().child() on each row.

    Allan

  • jpgjpg Posts: 4Questions: 1Answers: 0

    Thanks again for your assistance.

    It appears that the example you linked to is to append additional data to a child row.

    Our data is already part of the table and is only being hidden due to the responsive script.

    Our platform is MVC and we are using 'for each' to populate the table data in the view.

    Looking through responsive.js it looks like this snippet:

     // Click handler to show / hide the details rows when they are available
                    $(dt.table().body()).on('click', selector, function (e) {
    

    Is what opens/generates the details row.

    What we are looking to do is have that somehow automatically fire and open/generate all child rows for all entries. From there I can hide/display them at my convenience with a simple script.

    But looking at the code there does not appear to be an easy way to do this.

    Any assistance or information you can provide is much appreciated.

    Best regards,

    -JP

  • allanallan Posts: 61,824Questions: 1Answers: 10,131 Site admin
    Answer ✓

    Oh I see - I hadn't realised you were using Responsive. What you are looking for is something that I've been actively thinking about adding for v1.1 which I hope to start work on tomorrow.

    You are correct that at the moment it would require additional code to do what you are looking for.

    Allan

  • jpgjpg Posts: 4Questions: 1Answers: 0

    Thank you for taking the time to resolve this issue, it is much appreciated.

    And I do apologize for not being more clear in my first post.

    We look forward to v1.1 and this new functionality. I think that a lot of people will really benefit from this feature.

    Best regards,

    JP

This discussion has been closed.