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

DataTable column resizing with extra header row

Expand Messages
  • Vinay
    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
    Message 1 of 7 , Dec 8, 2009
    • 0 Attachment
      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
    • 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 2 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 3 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 4 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 5 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 6 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 7 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.