DataTables 1.7 beta release 2 + scrolling + treeTable plugin
DataTables 1.7 beta release 2 + scrolling + treeTable plugin
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
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
This discussion has been closed.
Replies
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
im not sure how this can be fixed with css
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
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
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
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
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
Allan
I have tried calling fnDraw on each collapse/expand and nothing changes
Andreas
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
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