FixedColumns - need help solving the alignment issues

Artjom

Hi, Alan.

Q1: I have a column alignment issues in fixed part of a table. What would be the best way to approach this problem? So far I have tried to fix it by external intervention through readjusting the width of individual cells but that wasn't successful (I don't understand how the cell width is computed).

REMARK: there are in fact four first columns fixed not three

http://www.freeimagehosting.net/newuploads/kh7wk.png

Code fragment:
....

function initFixedColumnsPlugin(dataTable, userConfig) {

var tableWithFixedColumns = new FixedColumns(dataTable, {
"iLeftColumns" : userConfig.fixedColumnsNumber,
"iLeftWidth" : userConfig.fixedColumnsWidth,
"fnDrawCallback" : function() {

//console.log('fixed table redraw');
applyFirefoxHeaderFix(this);
applyHeaderAlignmentFix(this); // <--------------------- THIS ONE
applyRowHighlightFix(this);
applyEmptyTableFix(this);
},
"sHeightMatch" : "semiauto"
});

return tableWithFixedColumns;
}

....

The function applyHeaderAlignmentFix(() is called on redraw but it seems that it doesn't affect the cell width at all.
Can it at all be fixed in such a manner?

I should mention that I have to use the old version of jQuery 1.5.2 (cause many other scripts in this project depend on it) and so this circumstance dictates that I have to also use the current available version of Datatables (1.9.4) and FixedColumns (2.0.3).

Q2: Our client wants that fixedColumns functionality would be activated for certain screen resolution (or when the browser windows is resized beyond the certain threshold). I have set sScrollX to 88% and it kind of has solved this. But the problem is that this solution doesn't work that well (there are certain issues with horizontal and vertical scrollbars appearing and disappearing when the browser window is resized). What would be the best way to approach the problem of FixedColumns activation for certain screen resolutions?

Artjom

Artjom

Alan, I have tried the nighty version of Fixed Columns and it seems to work with jQuery 1.5.2. However, the fixed columns functionality is not there due to on() method that is not available in this version of jquery.

Can the delegate() method be used instead of on()? Are there any other differences that preclude me from using fixedColumns 2.5 with versions of jQuery older than 1.7?

allan

> Can the delegate() method be used instead of on()?

I don't see why not :-).

> Are there any other differences that preclude me from using fixedColumns 2.5 with versions of jQuery older than 1.7?

I don't think so - but it isn't something I've tried. DataTables and its extras are likely to be moving to jQuery 1.7 requirement soon.

Allan

Artjom

Thanks for the reply, Alan. I have another related question. Delegate method requires a selector as one of the parameters to filter the elements that triggered the event, while on() could be used without it.

.delegate( selector, eventType, handler(eventObject) )

Could you give me a hint on what selector should I use in this case?
Basically, it is the same element on which the on() method is invoked, isn't it?

Starting from line 410:

// When the body is scrolled - scroll the left and right columns
$(this.dom.scroller).on( 'scroll.DTFC', function () {
if ( that.s.iLeftColumns > 0 )
{
that.dom.grid.left.liner.scrollTop = that.dom.scroller.scrollTop;
}
if ( that.s.iRightColumns > 0 )
{
that.dom.grid.right.liner.scrollTop = that.dom.scroller.scrollTop;
}
} );

Artjom

Any help? The substitution doesn't seem to be straightforward. I have put delegate() method instead of on() in the code but when I use the vertical scrolling the left (fixed) and right parts do not scroll together. Really have trouble providing this selector parameter in delegate()...

Alan, could you show some examples on how to replace on() with delegate() properly?

Artjom

I kind of managed to make it work by putting scroll() method instead of on() in some cases. But it mostly a workaround, not a proper solution.

Starting from line 409:

...

$(this.dom.scroller).scroll(function () {
if ( that.s.iLeftColumns > 0 )
{
that.dom.grid.left.liner.scrollTop = that.dom.scroller.scrollTop;
}
if ( that.s.iRightColumns > 0 )
{
that.dom.grid.right.liner.scrollTop = that.dom.scroller.scrollTop;
}
} );

if ( that.s.iLeftColumns > 0 )
{
// When scrolling the left column, scroll the body and right column
// Jaanus
$(that.dom.grid.left.liner).scroll(function () {
that.dom.scroller.scrollTop = that.dom.grid.left.liner.scrollTop;
if ( that.s.iRightColumns > 0 )
{
that.dom.grid.right.liner.scrollTop = that.dom.grid.left.liner.scrollTop;
}
} );
...

What can I say. The transition from version 2.0.3 to 2.5 nightly has fixed most of our alignment issues (not all, there are still small misalignment present, bug report will follow). However, right now the scrolling is kind of slow, probably due to using scroll() method instead of a delegate().

Alan, could you still offer an advice on replacing on() with delegate() in this two cases?

Artjom

List of issues with fixed columns 2.5 nighty (datatables 1.9.4; jquery 1.5.2):

1. Maximize issue

description: if maximize button is pressed after changing pages (pagination is a custom solution in this case) the datatable would not redraw and would still keep the width of a minimized window.

video link: http://www.youtube.com/watch?v=r9b_bbEbJqU&feature=youtu.be

2. Vertical scroll issue

description: there is a misalignment of columns if the vertical scrollbar is visible and the table is scrolled horizontally to the rightmost position. This problem is present in chrome and firefox.

Furthermore, at the end of the video you can see that after maximizing the browser window there are horizontal and vertical scrollbars visible but they shouldn't be (sScrollX = 100% and sScrollY is also sufficiently large). On a page refresh these horizontal scrollbars disappear.

video link: http://www.youtube.com/watch?v=R2f9iMep8m0&feature=youtu.be

Some of the problems are reproducible with this test case

http://live.datatables.net/ekajav/5/