Using DataTables with Intel XDK app Framework help!

alphaace

Hi Everyone,

I'm new to DataTables so accept my apologies if this is silly...

I'm trying to integrate datatables on the intel xdk app framework. While the datatable expands the vertical length of the div it doesn't expand the horizontal length and I can't seem to scroll. Here is the code.

I'm not sure how to provide an example for the xdk app framework but if someone let's me know I'm glad to post.

Thanks!

ADDENDUM:
I don't know if this will help, but if you hit the table just right it scrolls. It's almost like it's not registering the click or something else is registering it on a top layer. Every one in 10/20 tries though it scrolls left and right... Hopefully that helps someone!

[code]
var table = $('#table').dataTable( {
"symbol": symbol,
"exchange": exchange,
"aoColumns": columnData,
"aoColumnDefs": [
{ "aTargets": [0], "mRender": function (data, type, full) {return dateFormat(data)} },
{ "aTargets": [1], "mRender": function (data, type, full) {return numberWithCommas(data)} },
{ "aTargets": ["_all"], "mRender": function (data, type, full) {return numberWithCommas(parseFloat(data).toFixed(2))} },
],
"aaSorting": [[ 0, "desc" ]],
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"bProcessing": true,
"sScrollX": "100%",
"bScrollCollapse": true,
"bServerSide": true,
"sAjaxSource": str,
"bDeferRender": true,
"fnServerData": function( sUrl, aoData, fnCallback ) {
$.ajax( {
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "jsonp",
"cache": false
} );
}
} );
[/code]

allan

Not sure I'm afraid! Both what the problem is, and how you would post an example from your XDK framework. However, I think we would need to be able to see it to be able to say what is going wrong.

My only guesses at the moment are:

1. Make sure you've included the DataTables CSS
2. Use DataTables 1.10 beta
3. Re-enable auto width calculations.

Allan

alphaace

Hi Allan,

Hm, I've re-enabled auto width , included the css and am using the latest one -- no luck.

It feels like that if DataTable horizontally expanded out the div, rather than put in it's own scroll, the app framework would take over and provide the scroller. Is there a way to set the width to something large so we can test? If that does work, then we can figure out how to set the width exactly?

In case it helps, here's a picture of the cutoff. There's a few columns to the right...

http://alrig.com/test/photo.PNG

What's doubly disconcerting is that once in a while, I can scroll it...almost like the touch get's registered differently and then I can scroll left, change direction, scroll right right, no problem, until the scroll stops. I then lose the ability to scroll unless I select just right again. Almost as if I don't touch the right element.

Perhaps there is a way to check what the focus is as soon as the DataTable start's scrolling? Right now I have an alert every time #table is clicked. It is not clicked during a scroll, so perhaps the focus is off?

allan

Something very wrong there. Any script errors on the page (use the remote debugger in Safari / xCode).

Beyond that, I'd really need to be able to see it.

> It feels like that if DataTable horizontally expanded out the div, rather than put in it's own scroll, the app framework would take over and provide the scroller.

Disable the DataTables scroll options and that is exactly what will happen.

Allan

alphaace

Hm, how would I disable all the DataTables scroll options?

allan

Simply remove the sScrollX and sScrollY options from your initialisation :-)

Allan

alphaace

Hi Allan,

This still does not work. I sent the last weekend coding up a minimal example in JQuery Mobile so that you can see. It is available as a webapp at:

alrig.com/test.

Simply go there on an iphone or some other phone to try it.

To see that the scroll fails do the following:
1) Switch the slider from Graph to Table
2) Hit the favorites button
3) Scroll down the left panel and select "MSFT".

You will see only the first few columns. You can scroll up and down but not to the right.

I have tried every combination of sScrollX and sScrollY I can think of. All of them seem buggy. Disable them completely and letting the div resize at least allows consistent vertical scroll.

Any help would be much appreciated as I've now been fighting this for a week!

allan

I think there are a few things in the CSS that are conspiring against you, such as:

[code]
body.ui-mobile-viewport, div.ui-mobile-viewport {
overflow-x:hidden;
}
[/code]

I don't want to debug your app, but if you could put a version up that uses DataTables scroll-x that might be interesting.

Allan

alphaace

Hi,

Thank you for your help, I really appreciate it!

I uploaded code with

"scrollX":true,
"sScrollX": "100%",

and that seemed to make it a lot worse, now there is no scrolling at all..


By the way, adding:

*{
overflow-x:visible !important;
}

doesn't fix it so I'm not sure it's a css issue...

alphaace

Has anyone had any luck with this? I've been struggling for over a week with this.

allan

I would swear you sent me a link before, but I cannot for the life of me find it now.

Can you send it again please, with xScrolling enabled.

Allan

alphaace

Hi,

Uploaded! Thanks for the help!

The link is alrig.com/test

allan

Thank you - so the first issue is the following

[code]
.dataTables_wrapper {
position: relative;
clear: both;
height: 400px;
width: 400px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
[/code]

That is putting an overflow on the table container, not the table body container. You want to remove the last four lines there and just let the default DataTables CSS do what it needs to do.

Having said that, when I disable those styles, for some reason the scrolling still doesn't work and I've just spent half an hour trying to figure out why. Unfortunately, I don't know at the moment and have to move on to other things today.

Since my example here ( http://next.datatables.net/examples/basic_init/scroll_x.html ) does work, my best guess at the moment is that something from jQuery UI mobile is interfering with the native scroll. I would suggest therefore, that you try a very simple page with a scrolling DataTable without jQuery UI and see if that works. If so, at least that's a starting point for where to look!

Allan