is there anyway to expand a table column with drag and drop ?

[Larz]

I want to have a table or similar grid structure and be able to
expand the size of the column using a drag and drop similar to how it
can be done in a spreadsheet. I know there are grid packages out there
that can do this with custom code that such the following where you
install their product: http://dhtmlx.com/docs/products/dhtmlxGrid/

I'm not sure I want to get all of their functionality and be locked
into doing everything that way. I've looked at some drag and drop
libraries, but it doesn't seem like an easy thing to do, or at least I
have had no luck with it so far and I suspect the DOM doesn't actually
allow it ?

Is there an easy enough way to do something like this with some kind
of table or similar to build a grid ?

If not I am considering having [+] and [-] buttons on the first two
rows that allow the table to be expanded as I have had some luck with
that, though it actually works a little strange in firefox .

 

[kindy]

maybe extjs[http://extjs.com/] can help you.

 

[Elegie]

Larz wrote :

Hello,

I want to have a table or similar grid structure and be able to
expand the size of the column using a drag and drop similar to how it
can be done in a spreadsheet.

<snip>

The following should provide you with some good material to start with.
It has been only slightly tested though, and since I have not been
working with javascript for a very long time now, it might not be up to
date regarding object properties to be tested/used and current scripting
good practices. I still hope that will help. Have fun !


---
<style type="text/css">
th {
font-weight : bold ;
background-color : navy ;
color : white ;
cursor : col-resize ;
}
td {
background-color : white ;
color:navy ;
border:1px solid black ;
}
</style>

<table>
<thead>
<tr>
<th>Artist</th>
<th>Album</th>
<th>Song</th>
</tr>
</thead>
<tbody>
<tr>
<td>Linkin Park</td>
<td>Meteora</td>
<td>Breaking The Habit</td>
</tr>
<tr>
<td>Placebo</td>
<td>Once More With Feeling</td>
<td>The Bitter End</td>
</tr>
<tr>
<td>Thom Yorke</td>
<td>The Eraser</td>
<td>Analyse</td>
</tr>
</tbody>
</table>

<script type="text/javascript">
// Notice :
// This script should be loaded as last script, to avoid
// conflicts with any other previously loaded script.

/**
* <p>Adds many event listeners to an object.</p>
* <p>Check for reference addEventListener and attachEvent.</p>
*/
function e(obj, evt, func) {
if (obj[evt]) {
obj[evt] = (function (handler) {
return function (evt) {
handler.apply(this, arguments) ;
return func.apply (this, arguments) ;
}
})(obj[evt]) ;
} else {
obj[evt] = func ;
}
}

/**
* <p>Clears the selection.</p>
*/
function s() {
if(document.selection) {
document.selection.empty() ;
} else if (window.getSelection) {
var sel = window.getSelection() ;
if (sel.removeAllRanges) {
sel.removeAllRanges() ;
}
}
}

// Main
e(window, "onload", function (evt) {

/**
* <p>Mouse x position.</p>
*/
var x = 0 ;

/**
* <p>Mouse position when the click is pressed down.</p>
*/
var start = 0 ;

/**
* <p>Reference to the TH object being clicked.</p>
*/
var th = null ;

/**
* <p>This handler tracks and stores the mouse position.</p>
*/
e(document, "onmousemove", function (evt) {
x = (evt || window.event).clientX ;
}) ;

/**
* <p>This handler stores the mouse position when a click is
* is performed on a TH element.</p>
*/
e(document, "onmousedown", function (evt) {
evt = evt || window.event ;
var el = evt.srcElement || evt.target ;
if(el && el.nodeName && el.nodeName.toLowerCase()=="th"){
th = el ;
start = x ;
} else {
th = null ;
start = 0 ;
}
}) ;

/**
* <p>This handler resizes the column.</p>
*/
e(document, "onmouseup", function (evt) {
evt = evt || window.event ;
if (th && typeof th.offsetWidth == "number") {
var width = th.offsetWidth + x - start ;
if (typeof th.originalWidth == "undefined") {
th.originalWidth = th.offsetWidth ;
}
th.style.width = (width>0 ? width : th.originalWidth) + "px" ;
s() ;
}
}) ;

}) ;
</script>

 

[Laser Lips]

 I want to have a table or similar grid structure and be able to
expand the size of the column using a drag and drop similar to how it
can be done in a spreadsheet. I know there are grid packages out there
that can do this with custom code that such the following where you
install their product:http://dhtmlx.com/docs/products/dhtmlxGrid/

 I'm not sure I want to get all of their functionality and be locked
into doing everything that way. I've looked at some drag and drop
libraries, but it doesn't seem like an easy thing to do, or at least I
have had no luck with it so far and I suspect the DOM doesn't actually
allow it ?

 Is there an easy enough way to do something like this with some kind
of table or similar to build a grid ?

 If not I am considering having [+] and [-] buttons on the first two
rows that allow the table to be expanded as I have had some luck with
that, though it actually works a little strange in firefox .

Check out my table script with draggable columns.

http://cylo.co.uk/ResizableTables.html

Graham Vincent

 

[Elegie]

Elegie wrote :

Hello again,

The following should provide you with some good material to start with.

I really like the smooth resize effect proposed by other posters, so
updated my script to include it, for the love of art. It still remains
pretty simple, and as a result should probably be lacking some
functionalities, though.

Cheers,
Elegie.


---
<style type="text/css">
th {
font-weight : bold ;
background-color : navy ;
color : white ;
cursor : col-resize ;
}
td {
background-color : white ;
color:navy ;
border:1px solid black ;
}
</style>

<table>
<thead>
<tr>
<th>Artist</th>
<th>Album</th>
<th>Song</th>
</tr>
</thead>
<tbody>
<tr>
<td>Linkin Park</td>
<td>Meteora</td>
<td>Breaking The Habit</td>
</tr>
<tr>
<td>Placebo</td>
<td>Once More With Feeling</td>
<td>The Bitter End</td>
</tr>
<tr>
<td>Thom Yorke</td>
<td>The Eraser</td>
<td>Analyse</td>
</tr>
</tbody>
</table>

<script type="text/javascript">
// Notice :
// This script should be loaded as last script, to avoid
// conflicts with any other previously loaded script.

/**
* <p>Adds many event listeners to an object.</p>
* <p>Check for reference addEventListener and attachEvent.</p>
*/
function e(obj, evt, func) {
if (obj[evt]) {
obj[evt] = (function (handler) {
return function (evt) {
handler.apply(this, arguments) ;
return func.apply (this, arguments) ;
}
})(obj[evt]) ;
} else {
obj[evt] = func ;
}
}

/**
* <p>Clears the selection.</p>
*/
function s() {
if(document.selection && document.selection.empty) {
document.selection.empty() ;
} else if (window.getSelection) {
var sel = window.getSelection() ;
if (sel.removeAllRanges) {
sel.removeAllRanges() ;
}
}
}

/**
* <p>Returns the width of an object.</p>
*/
function w(obj) {
return parseInt(obj.style.width, 10) || obj.offsetWidth ;
}

// Main
e(window, "onload", function (evt) {

/**
* <p>Mouse x position.</p>
*/
var x = 0 ;

/**
* <p>Previous mouse X position.</p>
*/
var x_1 = 0 ;

/**
* <p>Reference to the TH object being clicked.</p>
*/
var th = null ;

/**
* <p>Resizes the column.</p>
*/
var resize = (function (offset) {
var width = (w(th) + offset) ;
if (width>0) {
th.style.width = width + "px" ;
}
s() ;
}) ;

/**
* <p>This handler tracks and stores the mouse position.</p>
*/
e(document, "onmousemove", function (evt) {
x_1 = x ;
x = (evt || window.event).clientX ;
if (th) {
resize(x - x_1) ;
}
}) ;

/**
* <p>This handler stores the mouse position when a click is
* is performed on a TH element.</p>
*/
e(document, "onmousedown", function (evt) {
evt = evt || window.event ;
var el = evt.srcElement || evt.target ;
if(el && el.nodeName && el.nodeName.toLowerCase()=="th"){
th = el ;
}
}) ;

/**
* <p>This handler resizes the column.</p>
*/
e(document, "onmouseup", function (evt) {
th = null ;
}) ;

}) ;
</script>
---

 

[Larz]

I have tried your example as well as the Cylo code. Both look
promising.

One thing is that the site I am developing is a rails site and I am
using some jquery stuff to be able to move the columns around which
was working fine. That had enabled me to change the order or drop
columns using drag and drop, but the resize I was not able to do. When
I tried cylo resize with my code, the fields where still able to
change order, but when I dragged the field it dissapears and does not
show up in the drag, which is some sort of CSS or other related issue
perhaps.

I also need a way to store the resized columns back to the server ..
That might not be that hard, or I could hack it for now ..

Your simple example appealed to me because of the small code size,
but when I integrated it into my code, the draggale stuff I allready
have seemed to have interfered with it and I've had to mess around a
bit. I'm not sure I am allowed to post my code on the internet because
of where I work ..

At any rate, this has opened my mind up to what is possible ..
thanks

 

[Elegie]

Larz a écrit :

Hello,

One thing is that the site I am developing is a rails site and I am
using some jquery stuff to be able to move the columns around which
was working fine. That had enabled me to change the order or drop
columns using drag and drop, but the resize I was not able to do.

<snip>

I guess there must be some conflict arising from having two different
controllers for the mouse events (mousemove, mousedown and mouseup),
while we would rather have one controller only, which would act as a
proxy and select the resize or move actions, depending on certain
criteria (for instance key modifiers, external parameters, or mousedown
coordinates in the container being rather near the edge or in the center
of the area).

You seem to be designing some web reports; if this is the case, do you
really need a drag'n'drop columns moving? If so, do you need it to be
concurrent with the resizing? IIRC, it is not unusual to have separate
configuration forms for the report structures. Also... what about table
sorting and the like?

I'm sorry I cannot help more, but I know nothing of jQuery and its
components. The issue you raise, however, may have been addressed
already, as it is not so uncommon. I can only encourage you to go on
searching, and maybe try and discuss your options in jQuery-oriented forums.

Regards,
Elegie.

 

[Larz]

Larz a écrit :

Hello,


<snip>

I guess there must be some conflict arising from having two different
controllers for the mouse events (mousemove, mousedown and mouseup),
while we would rather have one controller only, which would act as a
proxy and select the resize or move actions, depending on certain
criteria (for instance key modifiers, external parameters, or mousedown
coordinates in the container being rather near the edge or in the center
of the area).

You seem to be designing some web reports; if this is the case, do you
really need a drag'n'drop columns moving? If so, do you need it to be
concurrent with the resizing? IIRC, it is not unusual to have separate
configuration forms for the report structures. Also... what about table
sorting and the like?

I'm sorry I cannot help more, but I know nothing of jQuery and its
components. The issue you raise, however, may have been addressed
already, as it is not so uncommon. I can only encourage you to go on
searching, and maybe try and discuss your options in jQuery-oriented forums.

Regards,
Elegie.

Hi,

those are some good points. I have something working from the cylo
code which is a little buggy but may be good for now, or will at least
let me move on to some other stuff so I can have other folks look at
what I have for now ..

thanks

 

[Laser Lips]

 I have tried your example as well as the Cylo code. Both look
promising.

 One thing is that the site I am developing is a rails site and I am
using some jquery stuff to be able to move the columns around which
was working fine. That had enabled me to change the order or drop
columns using drag and drop, but the resize I was not able to do. When
I tried cylo resize with my code, the fields where still able to
change order, but when I dragged the field it dissapears and does not
show up in the drag, which is some sort of CSS or other related issue
perhaps.

 I also need a way to store the resized columns back to the server ..
That might not be that hard, or I could hack it for now ..

 Your simple example appealed to me because of the small code size,
but when I integrated it into my code, the draggale stuff I allready
have seemed to have interfered with it and I've had to mess around a
bit. I'm not sure I am allowed to post my code on the internet because
of where I work ..

 At any rate, this has opened my mind up to what is possible ..
thanks

I'll update the http://Cylo.co.uk code so that you can get the current
widths of the table colunms.
Thanks for using it.

If anyone is interested I've almost finished developing the Mother,
and I mean the Mother of all DHTML Combo boxes. Watch this space.

Graham

 

[Laser Lips]

I'll update thehttp://Cylo.co.ukcode so that you can get the current
widths of the table colunms.
Thanks for using it.

If anyone is interested I've almost finished developing the Mother,
and I mean the Mother of all DHTML Combo boxes.  Watch this space.

Graham

I've updated the code to allow you to GET and SET the current widths
of columns in a table on the page. It works for any table.

You can find the new script here http://cylo.co.uk/ResizableTables.html

Please read the instructions half way down the page.

Thanks

Graham Vincent