FixedColumns - is more excel-like freezing behavior possible?

Artjom

Is it possible to achieve a more excel-like freezing behavior with FixedColumns plugin, that is, is it possible that even the last scrollable column could be compared side by side with the last fixed one. Currently the scrolling doesn't cover the whole range of columns.

See here in Columns > Freeze columns section

http://paramquery.com/demos

Regards,
Artjom

allan

> Currently the scrolling doesn't cover the whole range of columns.

Try the 2.5.0-dev version - the scrollbar covers the full table width: https://github.com/DataTables/FixedColumns/blob/master/media/js/dataTables.fixedColumns.js .

That that isn't what you are looking for, could you elaborate on what you mean please?

Allan

Artjom

Seems to be the same with 2.5.0 version. BTW, it is a bit unrelated but if you scroll to the very end of the table then the columns become misaligned. See the test case - http://live.datatables.net/ekajav/5/

The problem we have with fixed columns is that in order to cover an adequate scrolling distance the sScrollX option have to be adjusted what makes the columns wider. What I need is the table with a fixed viewport and that is scrollable till the very last column. See illustration

https://dl-web.dropbox.com/get/Public/sketch-01.png?w=AABGLOCTnUhXOW26DpOcOvp2DE1vrQmngFqJySiOfg_9Rw

Artjom

New link for the illustration: http://www.freeimagehosting.net/newuploads/2vuwc.png

allan

I'm afraid I don't really understand what "last column of a scrollable part" means? I don't use Excel much, so its not something I'm familiar with. There is only one scrollbar part, so surely the last column is on the right?

Allan

Artjom

I mean that the scrolling is quite limited right now. It doesn't cover all the available columns in the part of the table that is not fixed. One has to resort to sScrollX parameter to scroll further but it changes the visual appearance of the table (makes the columns wider). What if instead one could cover with scrolling every single column in the scrollable part of the table and compare it side by side with the last column in the fixed part. That is, 'last column of a scrollable part' is basically the rightmost column.

If you will follow this link http://paramquery.com/demos

and will go to Columns > Freezed Columns section then you will see exactly what I mean.

allan

Ah I do see what you mean! An "overscan" option effectively, so that the table will scroll beyond the last column to leave white space.

Yes, that's currently not possible I'm afraid, but I suspect probably not too difficult to implement. I've bookmarked this discussion for consideration as a future enhancement of FixedColumns. Thanks!

Allan

Artjom

I am glad to hear that you'll consider implementing this functionality. Alan, by 'future enhancement' do you mean the forthcoming FixedColumns version or the one after it?

allan

To be honest, it depends how difficult it is to implement. I'll try it for 2.5.0 as I expect not too difficult, but that release is probably at least a month away, more likely two, with everything that is going on here at the moment.

Allan

Artjom

One more thing :). It is a bit unrelated to the primary discussion but if in the provided test case you will scroll to the very end of the table then the columns will become misaligned in Firefox.

Chrome is unable to properly render it at all and IE10 seems to be OK.

See the test case in here - http://live.datatables.net/ekajav/5/

It seems that horizontal scrollbar is not accounted for in this case. Also the fixed part is transparent. Is it supposed to be like this?

allan

I'm not sure what is going wrong in Chrome there I'm afraid. I'll need to look into it when I have a bit more time to spend on it (and not a baby in one arm!)

Thanks for the test case.

Allan

Artjom

I have checked this test case http://live.datatables.net/ekajav/5/
with other browsers. Here is my report on encountered problems. I'll just leave it in here.

IE8 - alignment issues:

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

IE9 - alignment issues:

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

IE10 - OK

Firefox - 1. vertical scrollbar is always visible; 2. alignment issues due to vertical scrollbar:

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

Chrome - major issues

Artjom

For what it worth, the chrome works in our development environment but I can reproduce the test case issue by setting the sHeightMatch value to "none" (right now it is set to "semiauto").

Alan, is there a fix for vertical scrollbar issue that creates misalignment of columns that is present in both firefox and chrome?

This problem is also reproducible in our development environment (it happens from time to time).

allan

Not yet, sorry I've not had a chance to look into this yet. I will try to do so as soon as I can.

Allan

Artjom

Any news on vertical scroll issue? I could test it if it's fixed.

allan

Sorry no - not yet. With everything that is going on at the moment, I've not had a chance to look at this yet. I hope to try and make some time in the coming weeks.

Allan

Artjom

Hi Alan, did you have any success with fixing these issues? It seems that right now fixedColumns plugin has many problems with the scrollbars.

allan

Sorry - getting free time work working on issues is proving to be particularly difficult at the moment with the amount of contract work I have to do. I hope to get to it soon, but can't say when at the moment.

Allan

alongtheivy

I am having an alignment issue too! A little different from above though. I made a stackoverflow question about it, since I can't post pics here. I'll paste most the text though.

http://stackoverflow.com/questions/20474564/uncaught-typeerror-cannot-read-property-style-of-undefined-using-fixedcolumns

Basically, I'm trying to fix the two left columns in my datatable. I can fix the two left columns with this code:

[code]
var fixedTable = new FixedColumns( dTable, {
"iLeftColumns": 2,
"iLeftWidth" : 133
} );
[/code]

This is causing two problems:

1) I'm getting the following error:

Uncaught TypeError: Cannot read property 'style' of undefined from this section of my code:
[code]
/* Apply custom sizing to the cloned header */
var nThs = _fnGetUniqueThs( oSettings, nTheadClone );
iCorrector = 0;
for ( i=0 ; i

allan

Can you link to a test page showing the problem so we can debug it please.

Allan

allan

Also, it would be worth trying out 1.10 pre beta from git, which I think will resolve at least point 2.

alongtheivy

I don't think it's possible for me to post a test page. I'm working in a company application with over 1500 files. the line that gives the problem is
[code]
nThs[i-iCorrector].style.width = "";
[/code]

I thought maybe it was because of the fixed width, or maybe because my datatables are responsive and contained in a twitter bootstrap container, that it was causing some issue with width. but i'm not sure. I don't know why that line is there honestly. I am a new programmer with about 2 months experience.

Do you have a link for the 1.10 pre beta on git? I had downloaded your FixedColumns.min.js a few days ago from the downloads page.

Thanks Allan, your prompt responses are great.

allan

DataTables 1.10 pre-beta: https://github.com/DataTables/DataTables/tree/1_10_wip/media/js

An error on that line normally indicates that there is a mismatch between aoColumns / aoColumnDefs, and the columns in the thead, tbody and tfoot. But without being able to see the page, I can't say for sure what it is.

Allan

alongtheivy

I didn't realize you meant another version of datatables. do you know what was edited to fix the scrollbar misalignment issue that happens in fixedcolumns? I'm not allowed to change my version of datatables we are using.

thank you for letting me know, i'll try and look into that. By mismatch, do you mean number of columns matching headers or something? I had the datatable working completely correctly and all lined up before using fixedcolumns, so that's why I thought the issue was purely in fixedcolumns. And yes, my page is company only, so I can't post it, i know this limits your ability to help, but any more information you know from past issues would be very much appreciated.

allan

> do you know what was edited to fix the scrollbar misalignment issue that happens in fixedcolumns?

Yes, but it was a cumulation of lots of changes. So no easy fix.

> By mismatch, do you mean number of columns matching headers or something?

Typically yes. The error you indicate suggests that there is a mismatch somewhere, since it is trying to get a cell which isn't present.

> so that's why I thought the issue was purely in fixedcolumns

It might well be! I'm afraid I'm purely guessing since I don't have all the facts - sorry!

Allan

alongtheivy

Thank you, I know how much you like having test cases and I'm sorry I can't provide one in this instance. I have upgraded my datatables from 1.9.2 to 1.10.0-dev. I did have jquery 1.7.1, would I need to upgrade it to a later jquery version?
I thought i needed to, so I put jquery 1.10.1, and a lot of my information is not showing up in my datatables anymore and when I try to switch to other tabs with more datatables, I get errors like these:

[code]
Uncaught TypeError: Object [object Object] has no method 'match' jquery.dataTables.js:4039
Uncaught Error: Syntax error, unrecognized expression: ##station-tab jquery.js:4
crew stations 66 views.trains.schedule.js?ts=1386708111794:772
Uncaught TypeError: Object [object Object] has no method 'match' jquery.dataTables.js:4039
Uncaught TypeError: Object [object Object] has no method 'match'
[/code]

any guesses / suggestions are very welcome. Thanks so much, Allan.

allan

jQuery 1.7.1 should be okay - 1.7 is the new minimum for DataTables 1.10.

Line 4039 in the current 1.10 dev version is this: https://github.com/DataTables/DataTables/blob/1_10_wip/media/js/jquery.dataTables.js#L4039 .

I've seen that error before when an old version of jQuery UI is used. They incorrectly uses a jQuery internal parameter and broke things. Which version of jQuery UI are you using (assuming you are using it) - if not the latest, try updating.

Allan

alongtheivy

Yes, the Jquery UI I was using was an old version, i updated it and it brought the fixed column functionality back, but a ton of my information is still missing randomly. All I can find online is that it has something to do with ajax calls? Right now I get this error as I try to move from tab to tab with datatables
[code]
Uncaught TypeError: Cannot read property '0' of undefined FixedColumns.min.js:36
(anonymous function)
[/code]

as for the "match" error, all I found online was it couldn't match a string or something and that most people add .html(); to the end of lines to fix it. I think all of these errors are very confusing since it doesn't point out what is wrong in my code, but in all the files I am downloading (fixedColumns, jquery-ui.js, etc.) I'm not that experienced of a programmer to know what to do in order to resolve these issues...

You probably can't help anymore, but if you do think of anything, I'm always open for help. Thanks again, Allan.

allan

Yup, I'm really sorry, but without being able to see it, I'm not sure what is going wrong.

Allan

alongtheivy

I understand. I do have a question about it you should know though :)
what versions of bootstrap and jquery are your datatables 1.10 and FixedColumns 2.0.3 compatible with? I had downloaded the new jquery 1.10.1 and I'm getting errors in FixedColumns with

Uncaught TypeError: Cannot read property 'msie' of undefined

from lines like this:

[code]
"bOldIE": ($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0"))
[/code]

that imply FixedColums doesn't support jquery above 1.9. Since The jQuery.browser() method has been deprecated since jQuery 1.3 and is removed in 1.9.

allan

> FixedColumns 2.0.3

That's the problem. Use the 2.5.0-dev nightly version from http://datatables.net/download .

Allan