True Scrolling Issue

kkudi

Hi Allan,

Is there any way to fix the alignment issue I'm facing shown in the picture below?

http://img191.imageshack.us/img191/5972/alignmentissue.jpg

Basically as you can see, The Ccy cells are not aligned with the Ccy header and the Book column cells are not aligned either.
Ths starts to happen from the middle onwards.

As you can see nearly none of the visible columns are right or left aligned.

Any ideas on how to solve this problem?

This happens in both 1.7 beta release 2 and 1.7 beta release 3.

Your help is greatly appreciated

allan

Interesting one - I'm a little surprised that beta 3 didn't fix this for you (unless it's Ajax sourced in some way...), but it would be great to narrow down what is going wrong here. I'm working on revamping this bit of code for beta 4 at this time, so now is the opportune moment ;-)

Is it just an HTML table you are displaying? Or is it server-side processing or anything else? I think beta 3 has issues with Ajax sourced data - and possibly something else. If you could detail how you are using the plug-in that would be great. Then I can test it before sending out beta 4.

Regards,
Allan

kkudi

Hi Allan,

Thanks for your quick reply.

Um, how am i using the table? the objects are initialized with no data...and then an ajax call ( nothing to do with the AjaxReload plugin) is made to the server and I use fnAddData for all the data I get back from the server.

As the data are being updated continuously on the server ( due to listeners) I'm polling with Ajax and use fnUpdate to update the table.

Everything works flawlessly and superbly fast too.

Only issue is the alignment.

Thanks
Andreas

allan

Hi Andreas,

Thanks very much for the confirmation. I suspect that you will be hitting the same problem as the Ajax sourced methods built into DataTables... I hope to have beta 4 ready reasonably soon (within a week) which will hopefully address this. It would be fantastic if you could test it and let me know how it goes when it is available.

Regards,
Allan

kkudi

Hi Allan,

Thanks for your replies.

When are you planning to roll out beta 4?

Thanks
Andreas

allan

Hopefully within a week :-)

Allan

kkudi

Hi Allan,

with regards to scrolling again I noticed something completely random...not sure if it's datatables related....

If i have 250 + plus rows of data in the table, scrolling horizontally is a nightmare. the browser locks for considerably a long period of time.

I never realized before because I ve always used the scrollwheel and the scrollwhell does not replicate the issue.

So basically If I try use the scroller by clicking on either arrow or the bar itself the browser locks.

Any ideas?

The table is being updated every 10 seconds.....but even in between those 10 seconds when there's no javascript activity it takes a considerable amount of time to scroll up and down

kkudi

I have noticed that this behaviour can not be replicated in one of your examples, but I have nearly made my datatable configuration as simple as yours in the example, stopped the ajax updates and the scrolling still locks when used with arrows/bar. Scrolling horizontally with the scroll wheel right in the middle of the mouse works smoothly.

This my table initialization

[code]

tradePosTable =
$('#trading_positions_table').dataTable({
"sDom": '<"top"i>rt<"pos_links"><"bottom"p><"clear">',
"aoColumns":[
{"sType": "string"},
{"sType": "numeric-comma"},
{"sType": "numeric-comma"},
{"sType": "numeric-comma"},
{"sType": "numeric-comma"},
{"sType": "numeric-comma"},
{"sType": "numeric-comma"},
{"sType": "numeric-comma"},
{"sType": "numeric-comma"},
{"sType": "string"},
{"sType": "numeric-comma"},
{"sType": "string"},
{"sType": "numeric-comma"}
],
"sPaginationType": "full_numbers",
"bPaginate": true,
"aLengthMenu": [[10, 25, 50,100, -1], [10, 25, 50,100, "Alla"]],
"aaSorting":[],
"bFilter": false,
"bInfo":true,
"bAutoWidth": true,
"bSortClasses": false,
"iDisplayLength": 250,
"sScrollY":275,
"sScrollX":"100%",
"bProcessing":true,
"oLanguage":{
"sZeroRecords": "No positions"
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
decorateTradingPosRow(nRow);
return nRow;
}

});

//create buttons within the table
$('div.pos_links').html(
"" +
"" +
"" +
""
);
[/code]

kkudi

May I need to add that this behaviour is browser-specific.

In Safari 5 and IE7 this is not replicated. It only happens in Firefox 3.6.3

kkudi

3.6.6 hasn't fixed the issue either.

I'm surprised that this is caused, im sure it's something silly since Safari 5 and IE7 do not replicate the blocking behaviour when scrolling horizontally

allan

I would guess that this is caused by the recalculation of the column widths that 1.7 beta 3 is doing... It will absolutely hammer the DOM when adding new data, and Firefox has very poor DOM performance (which I guess is why you are feeling it there). I don't really have a good solution for you at the moment (assuming that is the problem - running the Javascript profiler in Firebug would confirm it), at least until I can ship out the next beta. Beta 4 will really improve performance of that kind of redraw (still assuming that I am right...).

Regards,
Allan

kkudi

cool, really looking forward to that :=)