Detecting if column size is "allowable"

Detecting if column size is "allowable"

idlehenidlehen Posts: 3Questions: 0Answers: 0
edited September 2011 in General
I'm trying to implement column resize with scrolling on DataTables and for the most part I have it working. I'm doing this by modifying the current 3rd party resize plugin so that the mouse drag event changes the width of the current TH and the table for both the header and body tables. One problem I ran into is trying to resize a column smaller than the "allowed" width (which I assume is the width of the longest word in the header/body). I was wondering if there is a way to detect if the resize is allowed or not (is this a style on the table cell set somewhere?). This is a problem for me because I need to know whether or not to resize the table based off whether or not the column resizes; if the columns don't resize then resizing the table results in funky behavior and the headers and body get misaligned.

Replies

  • idlehenidlehen Posts: 3Questions: 0Answers: 0
    edited October 2011
    Nevermind, I fixed this by surrounding the content of my th's with divs, updating the widths of the div as well as the th and table on mousedrag, then calling this.s.dt.oInstance.fnAdjustColumnSizing() on mouseup. I then set the width of the inner div to the width of the resized th incase the resize was smaller than the width of the longest field of that column. This seems to have fixed most of my alignment issues.
  • jp_noronhajp_noronha Posts: 59Questions: 0Answers: 0
    Hi idlehen

    i would be most interested to know abouto your solution regarding rezise. it is a feature that has been requested.

    thanks in advance.
    Joao Paulo Noronha
  • idlehenidlehen Posts: 3Questions: 0Answers: 0
    edited October 2011
    I don't think I'm in a position where I can post the code, but I basically worked off the ColReorderWithResize code and did the following modifications:

    1) The original plugin works by changing the widths of the two nodes next to the border that is being dragged on the mousemove event. Instead of changing the sibling node's width to account for the change in the node being resized, I changed the width of the whole table and then resized the node. Then in the mouseup event I call DataTable's this.s.dt.oInstance.fnAdjustColumnSizing() method and let that handle the resizing and realignment of the body and header.

    2) I surrounded my content in the TH tags of my table with divs. I also make sure to update the widths of my divs with each resize. I only did this because I need control over the width of my columns. If you do not then letting DataTables handle the width is probably better (they seem to do a pretty good job of it anyways). I got this solution from this thread here:
    http://datatables.net/forums/discussion/4819/i-want-complete-control-over-the-field-width/p1

    I am however running into alignment issues in IE7 which I'm trying to work out now.
This discussion has been closed.