Little followup. I took ColReorder 1.0.7 and ColReorderWithResize 1.0.7. Opened ColReorder 1.0.8 (latest) and copied / adapted all the changes i found. Some suspicious code, i didn't copy over. Now i seem to have a working 1.0.8 ColReorderWithResize. Order and sort state saving works. I tried implementing column size saving. The save part works. The load part... not so much ... I have no idea how i should load the sizes... if i could get help on that part, i'd be happy to share the final result with everyone.
My load code looks like this:
Inside _fnConstruct
[code]
/* Load Column Sizes */
var asSizes = null;
if (this.s.dt.oLoadedState && typeof this.s.dt.oLoadedState.ColSizes != 'undefined' &&
this.s.dt.oLoadedState.ColSizes.length == this.s.dt.aoColumns.length) {
asSizes = this.s.dt.oLoadedState.ColSizes;
}
if (asSizes) {
for (i = 0, iLen = this.s.dt.aoColumns.length; i < iLen; i++) {
/* Mark the original column order for later reference */
this.s.dt.aoColumns[i].sWidth = asSizes[i];
}
}
[/code]
Save code :
[code]
"_fnStateSave": function (oState) {
var i, iLen, aCopy, iOrigColumn;
var oSettings = this.s.dt;
/* Sorting */
for (i = 0; i < oState.aaSorting.length; i++) {
oState.aaSorting[i][0] = oSettings.aoColumns[oState.aaSorting[i][0]]._ColReorder_iOrigCol;
}
Bump, any tips / idea on how i could properly load column sizes?
My grid is obviously configured to bAutoWidth : false and im not expecting it to work otherwise (and thats perfectly fine).
Simply setting sWidth during _fnConstruct isnt enough. Help? :)
I've been looking at this in an "on and off" kind of way (column resizing is a "nice to have" rather than a "must have" in the project I'm working on), but it sounds like you're pretty close.
My sense of it is that after setting the sWidth values, you'll need to have some follow up and do something like what _fnConstruct is doing with the column ordering.
_fnConstruct, towards the end (look for the line with the coment "If we have an order to apply - do so") calls _fnOrderColumns(...), which does the internal "index switching" for the column reorder. In turn, this calls fnColReorder(...) which handles the DOM manipulation so that the table columns are "drawn" in the right order.
For resizing, you'd probably need to copy this same sort of process and have, lets say, an equivalent _fnSizeColumns(...) to make sure that the sizings are being applied to the correct column indices and an fnColResize(...) to actually manipulate the DOM so that the columns have the correct widths.
Either that, or roll this functionality into the existing column ordering functions...? Having said that, it might be confusing for future code maintenance if functions called _fnOrderColumns/fnColReorder also do resizing, so probably better keep it separate I suppose.
Admittedly this is a bit of guesswork on my part... is there any chance I could have a grab of your current code state?
I've had a chance to muck around with this today and had some success - here's the state of my code at the moment:
http://pastebin.com/7jYhaVxw
The main change is the addition of the _fnResizeColumns() function, and the related modification to the body of the if(asSizes){...} block. The rest of it should look pretty familiar.
Currently it loads and applies the column sizes OK, but...
:(
The sizes don't track with re-ordered columns. I think all it needs is to check for column re-ordering, and then re-order the sizes in the re-sizing array to match the re-ordered columns before applying them.
I have a feeling this will be pretty simple - since the ColReorderWithResize.js source is doing just this kind of thing when re-ordering the column indices (check _fnOrderColumns() andn fnArraySwitch()), I guess it should be more or less a copy and paste adaptation of some of this code.
Unfortunately I'm out of time today to work any more on this, but I feel like I've made some progress at least.
Anyway, check it out and let me know your thoughts.
I should be able to take a look at it at the end of the week or during the weekend. I appreciate you taking the time to fix this issue and ill make sure to update this thread as soon as i get around doing it!
I'm a C# guy, so doing stuff in js is doable but pretty slow for me! Hehe!
Been looking at this again this morning and breaking my brain a bit. :)
The problem seems to be that the column sizes are stored in the order that the columns appear on the screen, rather than in the order of the internal model.
I think what needs to happen is that when the drag completes (see _fnMouseUp()) the index of the resized column needs to be converted to the equivalent internal model index and stored there.
Because this *isn't* happening at the moment, if you resize a column, then drag it to a new position, and resize it again, you start getting weird things happening in the saved state - have a look at the data stored in the cookies and hopefully you'll see what I mean.
Anyway, it all looks OK until you reload, and then (while it doesn't break horribly) the columns aren't resized as they should be - columns get resizing information from other columns, though how obvious it is that this is happening depends on exactly which columns were moved from where to where and their relative sizes.
The available information on column ordering and resizing isn't enough to "correct" for this... at least as far as I can tell.
The upshot, I think, is that this line in _fnMouseUp()...
[code]
//Save the new resized column's width
this.s.dt.aoColumns[colResized].sWidth = $(this.s.mouse.resizeElem).innerWidth() + "px";
[/code]
...needs to adjust the colResized (visible position) index to the *internal* model index. I'm not sure how to achieve this at the moment.
fnColReorder() seems to do something along these lines for column ordering, but my brain is refusing cooperate in figuring out how this works. I feel it can probably be adapted to do the conversion though.
No actual code updates worth sharing today, I'm afraid.
OK, something to share this time - I had another 15 minutes spare to play, and the resulting code is here:
http://pastebin.com/7jYhaVxw
The main problem was in the state saving in _fnStateSave() which was saving the column sizes in the wrong order (visible rather than internal indexing). The change is in line 617 of the PasteBin code:
The column sizes *and* ordering are now maintained between page refreshes.
I'm almost ready to say "it works", except that the column sizing still isn't *always* 100% consistent for a page reload immediately after a resize. I'm not sure why this happens. For subsequent refreshes (without a resize) the sizing of the columns stays the same.
While it seems totally usable, and the mild sizing inconsistency "annoying" rather than "a show stopper", my OCD is bothered by it.
Bothered enough to keep playing with it though...? We'll see.
Using the latest DataTables (1.9.4) and the nightly builds from today of ColVis and FixedColumns.
I tried both 1.0.7 and your version (1.0.8) of the ColReorderWithResize.js feature but somehow my table columns aren't following up with the resize size I am setting it to. E.g. the THs are resized bigger then the TDs. This seems to happen by scroller? I read in the changelog of 1.0.7 that should have been fixed by Martin Marchetta. I use a fixed left column also, but not sure if that caused the problem because when I remove that extra feature it is still broken.
Hey adlaws, i had some issues with your last version, my sizing would get applied to the wrong columns when the column were re ordered and THEN resized.
After some debugging i found out that _fnMouseUp provides a parameter called colResized, this parameter is the original column index it was then using this index to search into dt.aoColumns[] which is sorted.
So it would set the sWidth of the wrong column, on that resize. Visually, it was ok, but on reloads, it applied the size to the wrong column.
I fixed it by adding a little loop to find the column with matching _ColdReorder_iOrigCol :
[code]
var i;
var j;
var column;
var currentColumn;
var aoColumnsColumnindex;
var nextVisibleColumnIndex;
var previousVisibleColumnIndex;
var scrollXEnabled;
for (i = 0; i < this.s.dt.aoColumns.length; i++)
{
if (this.s.dt.aoColumns[i]._ColReorder_iOrigCol === colResized)
{
aoColumnsColumnindex = i;
break;
}
}
// Save the new resized column's width
this.s.dt.aoColumns[aoColumnsColumnindex].sWidth = $(this.s.mouse.resizeElem).innerWidth() + "px";
[/code]
Here is the full version of it: http://pastebin.com/HdnYEJ1j
It works well for me, still shows the little bug you had (size isnt quite the same on the first reload) but im able to live with that.
I had a few bugs in the version i pasted that were fixed after 1.0.8. So i took latest 1.1.0-dev and merged the resize code to make a new ColReorderWithResize-1.1.0-dev:
My head's spinning a tad. ;-) I'm going to try ColReorderWithResize-1.1.0-dev, but I'm not sure if that's considered the "best" for the job at the moment. Is stuff getting fragmented, or is that just me reading too quickly?
It would be nice to have ColReorderWithResize as an official supported plug-in, or at least SOME sort of resizing functionality officially supported. It's been the bane of my existence, solved in part (thankfully!) with this plug-in, but there are still quirks.
ColReorderWithResize isn't supported anymore and isn't part of the "official" plugins.
This 1.1.0-dev is just the one i made for myself. I am not the maintainer of anything, im just sharing what i had to do myself since there isnt an official version.
Is it getting fragmented? Probably. Is pastebin a proper distribution method? no.
Ive named it ColReorderWithResize-1.1.0-dev because its based of ColReorder-1.1.0-dev, but it is in no way an official "ColReorderWithResize".
There is not official plug-in which does column resizing for DataTables. It is something that I plan to do in future, but there are other more pressing matters first - DataTables 1.10 for example :-). until then, this is a community effort, and I very much appreciate everyone who has put effort into this!
Is there a latest version of the ColReorderWithResize plugin in Github somewhere? There seem to be a lot of links to various forks here in the forums, but the only one I could see in Github was rather old.
Since there is no official source, I cloned the one version I could find in Github, used the most recent code posted here as the base, and made my modifications.
The updated code is availabe here:
https://github.com/jhubble/ColReorderWithResize
Primary bugfix is a problem with sorting status of columns not being maintained properly.
I also made it easier to enable by automatically adding table-layout="fixed" if it is not yet enabled.
I'll probably be adding a few additional updates for features in the near future.
For a "quick and dirty fix", I added the following line of code after line # 1025 in ColReorderWithResize.js
[code]
this.s.dt.oInstance.fnAdjustColumnSizing();
[/code]
I haven't spent the time digging in the code as to why it's not already being called, but that should allow the table columns to resize after the headers have been moved!
Replies
My load code looks like this:
Inside _fnConstruct
[code]
/* Load Column Sizes */
var asSizes = null;
if (this.s.dt.oLoadedState && typeof this.s.dt.oLoadedState.ColSizes != 'undefined' &&
this.s.dt.oLoadedState.ColSizes.length == this.s.dt.aoColumns.length) {
asSizes = this.s.dt.oLoadedState.ColSizes;
}
if (asSizes) {
for (i = 0, iLen = this.s.dt.aoColumns.length; i < iLen; i++) {
/* Mark the original column order for later reference */
this.s.dt.aoColumns[i].sWidth = asSizes[i];
}
}
[/code]
Save code :
[code]
"_fnStateSave": function (oState) {
var i, iLen, aCopy, iOrigColumn;
var oSettings = this.s.dt;
/* Sorting */
for (i = 0; i < oState.aaSorting.length; i++) {
oState.aaSorting[i][0] = oSettings.aoColumns[oState.aaSorting[i][0]]._ColReorder_iOrigCol;
}
aSearchCopy = $.extend(true, [], oState.aoSearchCols);
oState.ColReorder = [];
oState.ColSizes = [];
for (i = 0, iLen = oSettings.aoColumns.length; i < iLen; i++) {
iOrigColumn = oSettings.aoColumns[i]._ColReorder_iOrigCol;
/* Column filter */
oState.aoSearchCols[iOrigColumn] = aSearchCopy[i];
/* Visibility */
oState.abVisCols[iOrigColumn] = oSettings.aoColumns[i].bVisible;
/* Column reordering */
oState.ColReorder.push(iOrigColumn);
/* Column Sizes */
oState.ColSizes.push(oSettings.aoColumns[i].sWidth);
}
}
[/code]
My grid is obviously configured to bAutoWidth : false and im not expecting it to work otherwise (and thats perfectly fine).
Simply setting sWidth during _fnConstruct isnt enough. Help? :)
I've been looking at this in an "on and off" kind of way (column resizing is a "nice to have" rather than a "must have" in the project I'm working on), but it sounds like you're pretty close.
My sense of it is that after setting the sWidth values, you'll need to have some follow up and do something like what _fnConstruct is doing with the column ordering.
_fnConstruct, towards the end (look for the line with the coment "If we have an order to apply - do so") calls _fnOrderColumns(...), which does the internal "index switching" for the column reorder. In turn, this calls fnColReorder(...) which handles the DOM manipulation so that the table columns are "drawn" in the right order.
For resizing, you'd probably need to copy this same sort of process and have, lets say, an equivalent _fnSizeColumns(...) to make sure that the sizings are being applied to the correct column indices and an fnColResize(...) to actually manipulate the DOM so that the columns have the correct widths.
Either that, or roll this functionality into the existing column ordering functions...? Having said that, it might be confusing for future code maintenance if functions called _fnOrderColumns/fnColReorder also do resizing, so probably better keep it separate I suppose.
Admittedly this is a bit of guesswork on my part... is there any chance I could have a grab of your current code state?
Cheers!
For my current code, yes sure, here it is. It's not final ofc and missing some credits
http://pastebin.com/bhScgaC8
I've had a chance to muck around with this today and had some success - here's the state of my code at the moment:
http://pastebin.com/7jYhaVxw
The main change is the addition of the _fnResizeColumns() function, and the related modification to the body of the if(asSizes){...} block. The rest of it should look pretty familiar.
Currently it loads and applies the column sizes OK, but...
:(
The sizes don't track with re-ordered columns. I think all it needs is to check for column re-ordering, and then re-order the sizes in the re-sizing array to match the re-ordered columns before applying them.
I have a feeling this will be pretty simple - since the ColReorderWithResize.js source is doing just this kind of thing when re-ordering the column indices (check _fnOrderColumns() andn fnArraySwitch()), I guess it should be more or less a copy and paste adaptation of some of this code.
Unfortunately I'm out of time today to work any more on this, but I feel like I've made some progress at least.
Anyway, check it out and let me know your thoughts.
Cheers!
I should be able to take a look at it at the end of the week or during the weekend. I appreciate you taking the time to fix this issue and ill make sure to update this thread as soon as i get around doing it!
I'm a C# guy, so doing stuff in js is doable but pretty slow for me! Hehe!
Been looking at this again this morning and breaking my brain a bit. :)
The problem seems to be that the column sizes are stored in the order that the columns appear on the screen, rather than in the order of the internal model.
I think what needs to happen is that when the drag completes (see _fnMouseUp()) the index of the resized column needs to be converted to the equivalent internal model index and stored there.
Because this *isn't* happening at the moment, if you resize a column, then drag it to a new position, and resize it again, you start getting weird things happening in the saved state - have a look at the data stored in the cookies and hopefully you'll see what I mean.
Anyway, it all looks OK until you reload, and then (while it doesn't break horribly) the columns aren't resized as they should be - columns get resizing information from other columns, though how obvious it is that this is happening depends on exactly which columns were moved from where to where and their relative sizes.
The available information on column ordering and resizing isn't enough to "correct" for this... at least as far as I can tell.
The upshot, I think, is that this line in _fnMouseUp()...
[code]
//Save the new resized column's width
this.s.dt.aoColumns[colResized].sWidth = $(this.s.mouse.resizeElem).innerWidth() + "px";
[/code]
...needs to adjust the colResized (visible position) index to the *internal* model index. I'm not sure how to achieve this at the moment.
fnColReorder() seems to do something along these lines for column ordering, but my brain is refusing cooperate in figuring out how this works. I feel it can probably be adapted to do the conversion though.
No actual code updates worth sharing today, I'm afraid.
Cheers!
OK, something to share this time - I had another 15 minutes spare to play, and the resulting code is here:
http://pastebin.com/7jYhaVxw
The main problem was in the state saving in _fnStateSave() which was saving the column sizes in the wrong order (visible rather than internal indexing). The change is in line 617 of the PasteBin code:
[code]
/* Column Sizes */
oState.ColSizes[iOrigColumn] = oSettings.aoColumns[i].sWidth;
[/code]
The column sizes *and* ordering are now maintained between page refreshes.
I'm almost ready to say "it works", except that the column sizing still isn't *always* 100% consistent for a page reload immediately after a resize. I'm not sure why this happens. For subsequent refreshes (without a resize) the sizing of the columns stays the same.
While it seems totally usable, and the mild sizing inconsistency "annoying" rather than "a show stopper", my OCD is bothered by it.
Bothered enough to keep playing with it though...? We'll see.
Cheers!
Using the latest DataTables (1.9.4) and the nightly builds from today of ColVis and FixedColumns.
I tried both 1.0.7 and your version (1.0.8) of the ColReorderWithResize.js feature but somehow my table columns aren't following up with the resize size I am setting it to. E.g. the THs are resized bigger then the TDs. This seems to happen by scroller? I read in the changelog of 1.0.7 that should have been fixed by Martin Marchetta. I use a fixed left column also, but not sure if that caused the problem because when I remove that extra feature it is still broken.
Any idea what would be causing this?
After some debugging i found out that _fnMouseUp provides a parameter called colResized, this parameter is the original column index it was then using this index to search into dt.aoColumns[] which is sorted.
So it would set the sWidth of the wrong column, on that resize. Visually, it was ok, but on reloads, it applied the size to the wrong column.
I fixed it by adding a little loop to find the column with matching _ColdReorder_iOrigCol :
[code]
var i;
var j;
var column;
var currentColumn;
var aoColumnsColumnindex;
var nextVisibleColumnIndex;
var previousVisibleColumnIndex;
var scrollXEnabled;
for (i = 0; i < this.s.dt.aoColumns.length; i++)
{
if (this.s.dt.aoColumns[i]._ColReorder_iOrigCol === colResized)
{
aoColumnsColumnindex = i;
break;
}
}
// Re-enable column sorting
this.s.dt.aoColumns[aoColumnsColumnindex].bSortable = true;
// Save the new resized column's width
this.s.dt.aoColumns[aoColumnsColumnindex].sWidth = $(this.s.mouse.resizeElem).innerWidth() + "px";
[/code]
Here is the full version of it: http://pastebin.com/HdnYEJ1j
It works well for me, still shows the little bug you had (size isnt quite the same on the first reload) but im able to live with that.
http://pastebin.com/8Pzd1FYN
It would be nice to have ColReorderWithResize as an official supported plug-in, or at least SOME sort of resizing functionality officially supported. It's been the bane of my existence, solved in part (thankfully!) with this plug-in, but there are still quirks.
ColReorderWithResize isn't supported anymore and isn't part of the "official" plugins.
This 1.1.0-dev is just the one i made for myself. I am not the maintainer of anything, im just sharing what i had to do myself since there isnt an official version.
Is it getting fragmented? Probably. Is pastebin a proper distribution method? no.
Ive named it ColReorderWithResize-1.1.0-dev because its based of ColReorder-1.1.0-dev, but it is in no way an official "ColReorderWithResize".
Regards,
Allan
The updated code is availabe here:
https://github.com/jhubble/ColReorderWithResize
Primary bugfix is a problem with sorting status of columns not being maintained properly.
I also made it easier to enable by automatically adding table-layout="fixed" if it is not yet enabled.
I'll probably be adding a few additional updates for features in the near future.
[code]
this.s.dt.oInstance.fnAdjustColumnSizing();
[/code]
I haven't spent the time digging in the code as to why it's not already being called, but that should allow the table columns to resize after the headers have been moved!