DataTables 1.7 beta release 2 + scrolling + treeTable plugin

DataTables 1.7 beta release 2 + scrolling + treeTable plugin

kkudikkudi Posts: 77Questions: 0Answers: 0
edited June 2010 in General
Hi

I'm not sure if you're familiar with the treeTable plugin ( http://plugins.jquery.com/project/treetable )
which basically allows you to have rows in a hierarchical/tree structure.

This works fine with 1.6.2 and 1.7 beta release 2 WITHOUT scrolling.

Once scrolling is enabled, the images that allow you to expand/collapse each row are gone. I have tried a lot of different css hacks to be able to get them at the place where they should be but in vain.


to see the issue

just download the plugin

and

a trivial example such as this....would do

Use the following two rows
[code]

1
2
3
4
5


1
2
3
4
5


$('#table_id').dataTable({

"sScrollX":"100%"

});
$('#table_id').treeTable();

[/code]


As you can see the treeTable exists and you can even use its functionality BUT the expand/collapse images are not shown even though you can see them with firebug.


Any workarounds are greatly appreciated

Thanks

Replies

  • kkudikkudi Posts: 77Questions: 0Answers: 0
    edited June 2010
    to visualize the situation

    here's a link

    http://www.doc.ic.ac.uk/~am907/table.png

    is there a way to make it appear there? without changing the margins?

    regards
  • kkudikkudi Posts: 77Questions: 0Answers: 0
    It's worthwhile to say that only the root's parent expand/collapse image is not showing since it's outside the black area.

    im not sure how this can be fixed with css
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    I had no idea that this plug-in worked with DataTables - that's very useful information. I might have a play around with that sometime soon(ish)....

    The problem sounds very odd indeed! I can't think of anything that would cause this effect in 1.7.beta.2 as opposed to the earlier versions... The fact that the 'span' has a margin and padding of -19px suggests that is the reason why they are being bumped off to the side. Did it have that style applied if you use 1.6.x? I guess the obvious thing to do would be to give the cell padding-left: 19px (or something like that) and see if that helps at all...

    Allan
  • kkudikkudi Posts: 77Questions: 0Answers: 0
    Hi Allan,

    Yes it works like a charm.

    The treeTable plugin works fine if you don't have scrolling enabled (both x and y). Once scrolling is enabled it still works but the parent row's expand/collapse image is not shown because it's meant to be outside the row.
    if you give padding-left:19px to the cell, it works but it's not how it should be.

    Without scrolling :

    http://www.doc.ic.ac.uk/~am907/table1.png
  • kkudikkudi Posts: 77Questions: 0Answers: 0
    It seems that the way scrolling is designed in 1.7, nothing can be visible at the area where the arrow is at the parent row in table1.png
  • kkudikkudi Posts: 77Questions: 0Answers: 0
    im not sure if there's a workaround, because as you can see on

    http://www.doc.ic.ac.uk/~am907/table2.png

    the book's width does not change.

    if i change it to the way i do scrolling ( which is less nicer ) it works fine.... -> http://www.doc.ic.ac.uk/~am907/table3.png
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Ah I see what is happening. If you fire up Firebug and look at the element div.dataTables_scrollBody you will see that it has overflow: auto applied to it. This is required by the scrolling - indeed it is the scrolling. As a consequence, parts which are not in the visible area of the scroller are hidden. Try disabling the overflow style in Firebug.

    So this is a side effect of the scrolling and not something that can be "fixed" (it isn't really "broken"). The work around is to apply the padding to the first column's TD elements to bring the image back into the visible area.

    Does this treeTable plug-in work with sorting and filtering? (wondering how it does that if it does :-) )

    Allan
  • kkudikkudi Posts: 77Questions: 0Answers: 0
    the workaround you're suggesting will work but won't fix the problem

    as you can see in http://www.doc.ic.ac.uk/~am907/table4.png

    The second column data move to the third row when expanded.

    Whereas if you look at http://www.doc.ic.ac.uk/~am907/table3.png there's no problem as such but it's not true scrolling as such. I mean it is, but it's a scroll of the entire div element and not the table and it looks a lot uglier.



    the plug-in works with sorting, filtering it should, i haven't tried it though
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    What I think you will need to do is call 'fnDraw()' each time a table row is expected or closed. This should update the header widths to match what is used in the table. Does treeTable provide a callback function which would allow this? The reason this is needed, is that the header and the body are two different tables (one which allows scrolling, and the other fixed at the top of the scrolling table). There is no way to have a listener on the width of an element, so this needs to be done manually - hence why I think fnDraw _should_ do the trick for you.

    Allan
  • kkudikkudi Posts: 77Questions: 0Answers: 0
    edited June 2010
    Allan, instead of redrawing the table is there a way to just recalculate the column widths for efficiency and performance??
  • kkudikkudi Posts: 77Questions: 0Answers: 0
    Hi Allan,

    I have tried calling fnDraw on each collapse/expand and nothing changes

    Andreas
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    I was thinking about this and I'll expose the column resizing function as an API function in the next beta release. However, I would have expected fnDraw to work... Are you able to put an example table up somewhere that I can 'play' with?

    Allan
  • kkudikkudi Posts: 77Questions: 0Answers: 0
    Hi Allan,

    sorry it took so long

    this is a table to play with
    http://www.doc.ic.ac.uk/~am907/a/home.html

    the parent row's image is hidden because of the scrolling problem
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Thanks for the example! That's really helpful indeed :-).

    I think I know what the problem is now - the width is being copied from the header (the fixed header) into the table below - but the table below needs more width than that - so it just ignores the size that is set. The trick here is that the width does need to be copied this way for some tables, but the other way for tables such as this.... Going to need a little bit of thinking to solve this one - but I certainly hope to have this properly addressed in the next beta.

    Regards,
    Allan
This discussion has been closed.