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

Discussion in 'Javascript' started by Larz, Jan 20, 2009.

  1. Larz

    Larz Guest

    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 .
     
    Larz, Jan 20, 2009
    #1
    1. Advertising

  2. Larz

    kindy Guest

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


    On Jan 21, 6:42 am, Larz <> wrote:
    >  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, Jan 21, 2009
    #2
    1. Advertising

  3. Larz

    Elegie Guest

    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>
    ---


    Regards,
    Elegie.
     
    Elegie, Jan 21, 2009
    #3
  4. Larz

    Laser Lips Guest

    On Jan 20, 10:42 pm, Larz <> wrote:
    >  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
     
    Laser Lips, Jan 21, 2009
    #4
  5. Larz

    Elegie Guest

    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>
    ---
     
    Elegie, Jan 21, 2009
    #5
  6. Larz

    Larz Guest

    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
     
    Larz, Jan 21, 2009
    #6
  7. Larz

    Elegie Guest

    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.
     
    Elegie, Jan 21, 2009
    #7
  8. Larz

    Larz Guest

    On Jan 21, 1:43 pm, Elegie <> wrote:
    > 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.



    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
     
    Larz, Jan 21, 2009
    #8
  9. Larz

    Laser Lips Guest

    On Jan 21, 4:25 pm, Larz <> wrote:
    >  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, Jan 22, 2009
    #9
  10. Larz

    Laser Lips Guest

    On Jan 22, 12:43 pm, Laser Lips <> wrote:
    > On Jan 21, 4:25 pm, Larz <> wrote:
    >
    >
    >
    > >  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 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
     
    Laser Lips, Jan 25, 2009
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. matteo cunietti

    Re: drag and drop of table cell......

    matteo cunietti, Oct 20, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    417
    matteo cunietti
    Oct 20, 2004
  2. Oliver Klein
    Replies:
    0
    Views:
    721
    Oliver Klein
    Aug 24, 2003
  3. johnsonlim026
    Replies:
    0
    Views:
    798
    johnsonlim026
    Mar 1, 2010
  4. KJ
    Replies:
    2
    Views:
    177
  5. Targa

    Drag & Drop table within table

    Targa, Oct 7, 2004, in forum: ASP General
    Replies:
    1
    Views:
    221
    Mark Schupp
    Oct 7, 2004
Loading...

Share This Page