"Rectangle is outside bounds" when using TableTools

steinark

I tried to search for this error message in the forums, but there was no match. I have a simple setup of DataTables and the TableTools, both with latest releases. When I click any of the buttons for PDF, CSV, Excel etc., nothing happens. But starting Firebug, I see an error message sent to the console - "PPB_Graphics2D.PaintImageData: Rectangle is outside bounds." Apparently related to something in the JS-Flash communication? I have checked several times, and is pretty sure the right versions of each component and framework is correct here, see View Source on my page. TableTools and DataTables files are accessed as they are unzipped.

I am using Chrome, but the same thing happens with Firefox.

My page is here:

http://proto.tracetracker.com/JIRA/jira.cgi?issue=Story-128&from=2012-09-01&to=2012-10-03&bizLocationName=Stovner&bizLocationId=urn:epc:id:sgln:705474.911112.0

TableTools is used in the table in the Event Details tab.

I tested TableTools on the DataTables table in the first tab, and there it works! This indicates it may have something to do with my data? What type of limitations would exist if so?

Thanks for any help,

Steinar Kjærnsrød

steinark

Am I the only one having this problem? If anyone cares to take a look, the interface has changed slightly since my original post. The DataTables tables are inside the "Prototype" accordion, then select "Event Details" tab.

Thanks for any help,

Steinar Kjærnsrød

jefffan24

Steinark I believe that specific error has to do with the chart under Distribution Chart.

First PPB_Graphics2D is used in NaCL, I don't know if your somehow using it or if its a coincedence but I found this: https://developers.google.com/native-client/pepperc/struct_p_p_b___graphics2_d__1__0#aa0f76efe067af8a0c00698574bc42fc5

Secondly if you bring up the console and click on the distribution chart tab and the click off, you'll see that is where the errors are coming from. Not the buttons.

I don't know why it is causing TableTools to break, or what else is happening but I hope this helps you!

steinark

Thanks for your answer Jeff, but it's definitely not the Distribution Chart that causes the problems and error message. I have now set up a page (below) and removed the HighCharts chart completely. By having the JS console window open, it is clear that the error happens when the Event Details tab is visited. So it is before any of the TableTools buttons are actually clicked, but they do not work when clicked (apart from the Print button). If I remove TableTools init code from the DataTables init (I remove the oDom and oTableTools properties), the error goes away.

http://proto.tracetracker.com/JIRA/jira.cgi?issue=Story-test&from=2012-09-01&to=2012-10-03&bizLocationName=Stovner&bizLocationId=urn:epc:id:sgln:705474.911112.0

Thanks,

Steinar

allan

The problem is that the DIV is initially hidden with the TableTools in it, so there is no height / width for the Flash movie elements to be applied, thus they simply won't work. You need to call the fnResizeButtons TableTools API method when the tab is made visible.

There are more details about it in my post here: http://datatables.net/forums/discussion/5859/tabletool-problem-when-hiding-datatable_wrapper/p1

Allan

steinark

Great, thanks Allan, you made my day :-) I already had an event handler on the "show" event on the tabset, and this handler uses the DataTables API to call [quote]fnAdjustColumnSizing()[/quote] on the involved tables. I have btw just learned that the same is necessary to do when the browser window is resized (window.resize event). So now the "show" event on the tabset has the necessary API calls.

Thanks,

Steinar

NathanSF

I've tried calling fnResizeButtons() on both the show and select for the tabs, still getting the Rectangle out of bounds errors in both cases.

I did have some luck with Alexandre Mathieu's solution here:
http://iksela.tumblr.com/post/3445022287/using-jquery-ui-tabs-and-datatables-tabletools

However, that solution is not working the first time I click on a tab. If I click on a tab that was hidden on load, then another tab, then back to the tab it works fine.

allan

@NathanSF - Please link us to a test page showing the problem.

Allan

NathanSF

Trick was to put the show event for tabs after the script for datatables in the source code. Don't understand, since it's a document ready and function is based on a tab event - but it's working with that change.