Column resizing

buzbyb

First of all - cheers for DataTables - it is fantastic!

Anyway, I don't except for a minute this is a new forum topic but I am having real difficulties trying to get any column resizing plugin to work with DataTables - is anyone succesfully using a column resizing plugin with datatables 1.7 and jQuery 1.4.2, and if they are, what are they using?

Please bear in mind that I'm a jQuery newbie!

Cheers
Buzby

pwc1011

Hello Buzbyb,

Maybe I don't understand your question , but why are you using a column resizing plugin?

Datatables handles the column resizing automatically. Have you tried creating a table and giving column sizes as part of the column definition?

You will also want to take the time to look through the examples, as Allan has provided many great resource there.

Finally, if you're new to jQuery, datatables will be a bit more complex than many plugins, since it does quite a bit more than most. Don't be intimidated... just start simple, get a table working, then explore the more involved options.

Best of luck,
Patrick

buzbyb

Sorry if I didn't make myself clear - I mean I want to allow the user to resize columns at runtime. I understand that DataTables doesn't have this functionality at the moment, and I'm having trouble finding a plugin that offers this feature but doesn't get upset when I try to combine it with DataTables... does that help?

buzbyb

Ok - I've got it working. I ended up using the jquery.kiketable.colsizable plugin from here: http://www.ita.es/jquery/jquery.kiketable.colsizable.htm

The reason this wasn't working originally is because my table (rendered via the .NET 2.0 GridView control) did not include a COLGROUP section. I had to override the Render method to ensure a COLGROUP section and COL tag was present for each column, then the column resizing worked fine.

John5788

Sorry to revive an old thread, but I am trying to work with kiketable plugin with DataTables.

I got everything to work, but I am experiencing strangeness when combining this with ColReorder.js plugin. At first, the stable build was breaking at around line 162:

[code]/*
* Move the DOM elements
*/
if ( oSettings.aoColumns[iFrom].bVisible )
{
/* Calculate the current visible index and the point to insert the node before. The insert
* before needs to take into account that there might not be an element to insert before,
* in which case it will be null, and an appendChild should be used
*/
var iVisibleIndex = this.oApi._fnColumnIndexToVisible( oSettings, iFrom );
var iInsertBeforeIndex = null;[/code]

where iFrom was null.

I updated to the latest nightly build and column reordering works. However, when I resize after moving a column, kiketables is resizing the wrong column. Has anyone experienced this and found a workaround?

versak

Found this and was able to get it working nicely with DataTables:
http://jsfiddle.net/ydTCZ/

The only thing I changed was the
[code] $("table th")[/code]
to
[code] $("table td") [/code]
because I have my filters in the header as TDs. This makes it easier to resize without interfering with the sorting.

allan

Cool - thanks for the link versak.

Allan

cbattarel

it's quite interesting but i guess it will be difficult to implement it along with the ColReorder plugin because it's based on the same user action (dragging the column header).
But maybe it can be improved by dragging only the col header extremity ?

allan

Yup - it won't integrate perfectly with DataTables and it's various other plug-ins that's for sure. A plug-in specifically designed for DataTables would be needed for that. Might be worth experimenting with this one though and see how far you can make it go.

Allan

cbattarel

i've just finished the integration of this resizing method into the ColReorder plugin; it works like a charm.
Where can i post my code ?

allan

Cool :-). Can you post it in the forum here, or is it too large? Otherwise you could create a github repo, or Google code SVN repo - or you could send it to me by e-mail (my address is at the top of the DataTables source code).

Allan

cbattarel

i've just emailed you the code.
Regard.
Christophe

kolklik

Hello

I'm currently investigating column re-sizing with datatables.net
and would be very interested in cbattarels solution as I require column reordering as well.

Is it possible to get a link to the source?

Regards

allan

Oh good grief - I forgot to post the code up when I came back from holiday. I will do so shortly :-)

Allan

kolklik

Sounds awesome Allan, ill be looking forward to it :)

allan

Now available here: http://datatables.net/extras/thirdparty/ColReorderWithResize/

Allan

kolklik

Awesome!
Thank you :)
- both of you

kolklik

Would it be possible to extend the area that makes it resizeable? currently its extremly tiny and a bit hard to hit :)

Oly

I have just implemented the solution from allan and it works very nicely, thanks to all.

One slightly ugly side effect at the moment is the bar above the table headers and the bar below the table where it shows 'Showing x to x of x entries' loses it's styling as soon as I specify an sDom parameter ""Rlfrtip" as shown as the initialisation in the example. The 'R' is obviously the addition and that is working. After some hacking around I found the stock code where sDom is not specified yields:
[code] 'sDom': '<"H"lfr>t<"F"ip>'[/code]
so I added the 'R' and all is well:
[code]'sDom': 'R<"H"lfr>t<"F"ip>'[/code]

Should the example initialisation code be modified a bit or is there a better way?

GregP

ColReorderWithResize looks promising for a feature that's a "must have" from my project manager. As mentioned by kolklik, though, that's a crazy-small target area (just the 1px border) for resize. Also, visual feedback for re-order would be sweet. Still, I could always implement it "as is" to say "it's there" and then work on the "improvement" piece afterwards.

Love how just when I need something for DT, I turn around and there it is...!

datatables

One annoyance with the ColReorderWithResize plugin is that when resizing a column, the column will also be set as a sortcolumn (at least when using the plugin with jQueryUI=true).

allan

Yup agreed - the target size should be increased and some kind of visual feedback would be excellent. I'll take a look as time allows, or if cbattarel beats me to it :-)

Allan

josemota

This should be made public into the Extras page [EDIT: never mind this, how dumb of me...], I'll give this a try.

Is this in sync with ColReorder?

GregP

My understanding is that it replaces ColReorder. It is ColReorder + Resize = ColReorderWithResize.

GregP

D'oh. Seeing this thread reminded me that I needed to implement ColReorderWithResize. Did so, but now there are bugs.

Reordering columns by dragging a column from anywhere to the right and moving it anywhere to the left seems to break the math for the indices... after reordering, I click on a header to sort, and the data ends up in the wrong columns.

Ironically, although it's the Reorder portion that this is forked from, it's the resize functionality I need more desperately; but the plugin has no options so I can't turn off the reordering while keeping the resizing.

Wish I had a public link to share, but alas I do not.

wazza

GregP, same situation for me.

Allan, Is there a chance to add availability to turn off the reordering functionality of Colreorder, leaving only the resizing?

brightgarden

I looked for this code in GitHub. Is it out anywhere so it's easier to contribute?
[UPDATE: found it. https://github.com/DataTables/DataTables]

----------------------
Larger resize handle

In _fnMouseListener, I modified

[code]if (e.pageX == Math.round(offset.left + nLength)) {[/code]

to

[code]
var columnBorderX = Math.round(offset.left + nLength);
if (e.pageX > (columnBorderX - 4) && e.pageX < (columnBorderX + 4)) {
[/code]

This isn't working entirely as the code makes it seem like it should. It only allows a 4px area to "grab" the handle on the left of the column border. The area to the right is negated by the mouselistener on the adjacent TH. This is obviously just a hack, but it is doing the trick for me at the moment.

-------------------------
Stop sorting when resizing

In our implementation, we wrap datatables in our own plugin because almost all the tables on the site use the same basic configuration. So just before the oTable.datatable(config) call, I add the following, a clue I got here: http://www.datatables.net/forums/discussion/1045/click-sort-handler/p1#Comment_5347

[code]
oTable.find('thead th').bind("click.MyDT", function(event){
if ($(event.target).css('cursor') === 'col-resize'){
event.cancelBubble = true;
event.stopImmediatePropagation();
}
});
[/code]

brightgarden

UPDATE: My observation is when the column is moved, it loses the click handler designed to stop propagation to prevent the column sort.

brainwave9

@brightgarden, I found a fix for that. In the method $.fn.dataTableExt.oApi.fnColReorder the click event gets removed. Look for '/* Sort listener */' and after the unbind statement, add the click event again.

[code]
/*
* Update DataTables' event handlers
*/

/* Sort listener */
for ( i=0, iLen=iCols ; i

froind

@brainwave9 and @brightgarden: Thankx, your solution helped me a lot!

edit: the solution only works after you reorder at least one column

edit2: i found it works if I trigger a dummy sort in the constructor. something like this:
[code]
this.s.dt.oInstance.fnColReorder(0,1);
this.s.dt.oInstance.fnColReorder(1,0);
[/code]

edit3: that messes around with the sorting functionality...

mmatyas

I was able to use this simple plugin I wrote a few months ago to get around the sorting being triggered issue. The plugin allows you to enable/disable sorting programmatically (e.g. after init):

http://datatables.net/forums/discussion/7377/disable-all-sorting-after-init/p1

After incorporating that plugin, do something like this in _fnMouseListener:

[code]
/* are we on the col border (if so, resize col) */
var columnBorderX = Math.round(offset.left + nLength);
if (e.pageX > (columnBorderX - 4) && e.pageX < (columnBorderX + 4))
{
that.s.dt.oInstance.fnSortOnOff( '_all', false );
$(nThTarget).css({'cursor': 'col-resize'});
} else {
$(nThTarget).css({'cursor': 'pointer'});
that.s.dt.oInstance.fnSortOnOff( '_all', true );
}
[/code]

There's probably a better way to do this, but seems to work for now.