Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] DataTable column resizing with extra header row

Expand Messages
  • Satyam
    Not sure if it would work but if you set the width of the input boxes to a percentage value wouldn t it adjust to the size of the cell? Otherwise, how about
    Message 1 of 7 , Dec 8, 2009
    • 0 Attachment
      Not sure if it would work but if you set the width of the input boxes to
      a percentage value wouldn't it adjust to the size of the cell?

      Otherwise, how about listening to columnResizeEvent?

      http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#event_columnResizeEvent

      I am not sure if the width reported would be the one attempted or the
      one effectively reached. When you find out, please let us know.

      Satyam

      Vinay escribió:
      > I've got a DataTable use case in which I want to insert an additional row in the table header (to use for filtering). Each cell in this row contains an input[text] in which the user can type the filtering text. The input uses the browser's default width (around 160px). The table is set to have draggable and resizeable columns.
      >
      > I insert this row via an event listener on the render event, and the row is added as expected (above the actual column heading row). I can sort the datatable correctly on each column, but I have one problem I can't see how to solve:
      >
      > If I resize a column, I can make it bigger than the size of the input without problems, but if I want to make it smaller, it is limited to the width of the corresponding input in the filtering row. I'm happy to shrink this input with the resize in progress, but I can't quite see which events I need to hook and what I need to do once I've hooked them.
      >
      > Has anyone tried something like this and figured out how to do it? I'd be grateful for any pointers.
      >
      > Thanks in advance,
      >
      >
      > Vinay Sajip
      >
      >
      >
      > ------------------------------------
      >
      > Yahoo! Groups Links
      >
      >
      >
      > ------------------------------------------------------------------------
      >
      >
      > No virus found in this incoming message.
      > Checked by AVG - www.avg.com
      > Version: 9.0.709 / Virus Database: 270.14.98/2552 - Release Date: 12/08/09 08:34:00
      >
      >
    • Vinay
      ... No, I already thought of that - doesn t work. ... This event is fired from the onMouseUp of the resizer and so, unfortunately, cannot be used during the
      Message 2 of 7 , Dec 9, 2009
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
        >
        > Not sure if it would work but if you set the width of the input boxes to
        > a percentage value wouldn't it adjust to the size of the cell?

        No, I already thought of that - doesn't work.

        > Otherwise, how about listening to columnResizeEvent?
        >
        > http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#event_columnResizeEvent
        >
        > I am not sure if the width reported would be the one attempted or the
        > one effectively reached. When you find out, please let us know.

        This event is fired from the onMouseUp of the resizer and so, unfortunately, cannot be used during the drag.
      • Satyam
        How about adding a full row of headers by using nested headers with one top header containing each only one child header? Satyam
        Message 3 of 7 , Dec 9, 2009
        • 0 Attachment
          How about adding a full row of headers by using nested headers with one
          top header containing each only one child header?

          Satyam

          Vinay escribió:
          > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
          >
          >> Not sure if it would work but if you set the width of the input boxes to
          >> a percentage value wouldn't it adjust to the size of the cell?
          >>
          >
          > No, I already thought of that - doesn't work.
          >
          >
          >> Otherwise, how about listening to columnResizeEvent?
          >>
          >> http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#event_columnResizeEvent
          >>
          >> I am not sure if the width reported would be the one attempted or the
          >> one effectively reached. When you find out, please let us know.
          >>
          >
          > This event is fired from the onMouseUp of the resizer and so, unfortunately, cannot be used during the drag.
          >
          >
          >
          > ------------------------------------
          >
          > Yahoo! Groups Links
          >
          >
          >
          > ------------------------------------------------------------------------
          >
          >
          > No virus found in this incoming message.
          > Checked by AVG - www.avg.com
          > Version: 9.0.709 / Virus Database: 270.14.99/2553 - Release Date: 12/08/09 20:54:00
          >
          >
        • Vinay
          ... Nice idea. This could work but for the fact that for a nested header, the column reordering works by dragging the top-level row header, which would be
          Message 4 of 7 , Dec 9, 2009
          • 0 Attachment
            --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
            >
            > How about adding a full row of headers by using nested headers with one
            > top header containing each only one child header?
            >

            Nice idea. This could work but for the fact that for a nested header, the column reordering works by dragging the top-level row header, which would be obscured by the filter input box. I tried this out with just a label in the top header row; the column resizing is restrained by the width of that label.

            Regards,

            Vinay Sajip
          • Satyam
            Then, your only option will be to override YAHOO.widget.ColumnDD.onDragOver. Look at the source code because the API docs won t tell you much about it since
            Message 5 of 7 , Dec 9, 2009
            • 0 Attachment
              Then, your only option will be to override
              YAHOO.widget.ColumnDD.onDragOver. Look at the source code because the
              API docs won't tell you much about it since it is overriding D&D's own
              method. The code itself will give you a good idea on how to manage your
              own input box. Not the most elegant but if nothing else works .....

              Satyam

              Vinay escribió:
              > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
              >
              >> How about adding a full row of headers by using nested headers with one
              >> top header containing each only one child header?
              >>
              >>
              >
              > Nice idea. This could work but for the fact that for a nested header, the column reordering works by dragging the top-level row header, which would be obscured by the filter input box. I tried this out with just a label in the top header row; the column resizing is restrained by the width of that label.
              >
              > Regards,
              >
              > Vinay Sajip
              >
              >
              >
              > ------------------------------------
              >
              > Yahoo! Groups Links
              >
              >
              >
              > ------------------------------------------------------------------------
              >
              >
              > No virus found in this incoming message.
              > Checked by AVG - www.avg.com
              > Version: 9.0.709 / Virus Database: 270.14.99/2553 - Release Date: 12/08/09 20:54:00
              >
              >
            • Vinay
              ... Ok, thanks for the pointer. Regards, Vinay Sajip
              Message 6 of 7 , Dec 9, 2009
              • 0 Attachment
                --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                >
                > Then, your only option will be to override
                > YAHOO.widget.ColumnDD.onDragOver. Look at the source code because the
                > API docs won't tell you much about it since it is overriding D&D's own
                > method. The code itself will give you a good idea on how to manage your
                > own input box. Not the most elegant but if nothing else works .....
                >

                Ok, thanks for the pointer.

                Regards,

                Vinay Sajip
              Your message has been successfully submitted and would be delivered to recipients shortly.