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

Datatable - hide repeating cell values

Expand Messages
  • David Wallace
    Hi. I am using a YUI Datatable. I would like a table cell to appear empty, if it has the same value as the cell above it. For example, if my data is X | 1 |
    Message 1 of 6 , Aug 12, 2008
    • 0 Attachment

      Hi.  I am using a YUI Datatable.  I would like a table cell to appear empty, if it has the same value as the cell above it.  For example, if my data is

      X | 1 | a

      X | 2 | b

      Y | 1 | c

      Y | 2 | d

      Y | 3 | e

       

      I would like to see

      X | 1 | a

        | 2 | b

      Y | 1 | c

        | 2 | d

        | 3 | e

       

      I could just populate the repeated cells with blanks; but I want to be able to use the table-sorting.  In the example above, if the user sorts the table by the second column, it should turn into

      X | 1 | a

      Y | 1 | c

      X | 2 | b

      Y | 2 | d

        | 3 | e

       

      I hope this is clear.  Can anyone provide any guidance?

       

      Thanks,

      David.

    • Satyam
      I would assign a formatter function to the column where you don t want repeated values. I would store the last value shown somewhere and in each call to the
      Message 2 of 6 , Aug 12, 2008
      • 0 Attachment
        I would assign a formatter function to the column where you don't want
        repeated values. I would store the last value shown somewhere and in
        each call to the formatter, check against it. Something like this
        should work for any column, even for more than a single column in the
        same database:


        var formatNoDups = function (el, oRecord, oColumn, oData) {
        if (oColumn.lastValue == oData) {
        el.innerHTML = ' ';
        } else {
        el.innerHTML = oData;
        oColumn.lastValue = oData;
        }
        };

        I'm using a non existing property of oColumn, lastValue to store the
        last used value. In that way I can assign this same function to more
        than one column at a time and each will keep its own copy.

        You have to clear the lastValue of all column in response to renderEvent
        so they are ready for the next sort. You might also want to clear the
        lastValues of all the columns to the right when a column changes values
        so you make sure they all the ones to the right print the new values
        again. That makes it a little harder, and it is not your case.

        Satyam

        David Wallace wrote:
        >
        > Hi. I am using a YUI Datatable. I would like a table cell to appear
        > empty, if it has the same value as the cell above it. For example, if
        > my data is
        >
        > X | 1 | a
        >
        > X | 2 | b
        >
        > Y | 1 | c
        >
        > Y | 2 | d
        >
        > Y | 3 | e
        >
        >
        >
        > I would like to see
        >
        > X | 1 | a
        >
        > | 2 | b
        >
        > Y | 1 | c
        >
        > | 2 | d
        >
        > | 3 | e
        >
        >
        >
        > I could just populate the repeated cells with blanks; but I want to be
        > able to use the table-sorting. In the example above, if the user
        > sorts the table by the second column, it should turn into
        >
        > X | 1 | a
        >
        > Y | 1 | c
        >
        > X | 2 | b
        >
        > Y | 2 | d
        >
        > | 3 | e
        >
        >
        >
        > I hope this is clear. Can anyone provide any guidance?
        >
        >
        >
        > Thanks,
        >
        > David.
        >
        >
        > No virus found in this incoming message.
        > Checked by AVG - http://www.avg.com
        > Version: 8.0.138 / Virus Database: 270.6.1/1607 - Release Date: 12/08/2008 7:19
        >
      • David Wallace
        Hi. I am using a YUI Datatable. The data that I wish to display doesn t fit nicely in a single row. I have (say) 8 columns of data to display, where only 4
        Message 3 of 6 , Aug 18, 2008
        • 0 Attachment

          Hi.  I am using a YUI Datatable. 

           

          The data that I wish to display doesn’t fit nicely in a single row.  I have (say) 8 columns of data to display, where only 4 will really fit.  I therefore want one logical row of the data to wrap across two <tr>s.  I’d also like the colour alternation to kick in every two rows.  In other words, I’d like to see something like the following (RxFy means field y of record x; vertical lines are table cell borders).

           

          (white)|R1F1|R1F2|R1F3|R1F4|

          (white)|R1F5|R1F6|R1F7|R1F8|

          (blue) |R2F1|R2F2|R2F3|R2F4|

          (blue) |R2F5|R2F6|R2F7|R2F8|

          (white)|R3F1|R3F2|R3F3|R3F4|

          (white)|R3F5|R3F6|R3F7|R3F8|

           

          I hope this is clear.  Can anyone provide any guidance?

           

          Thanks,

          David.

        • Satyam
          DataTable does not support this. If horizontal scrolling is not an option, nor column resizing, showing and hiding, all tricks you can use so the use can go
          Message 4 of 6 , Aug 19, 2008
          • 0 Attachment
            DataTable does not support this. If horizontal scrolling is not an
            option, nor column resizing, showing and hiding, all tricks you can use
            so the use can go across the data, then you are pretty much left on your
            own.

            The only thing I can think of would be to declare four columns for
            fields F1 to F4 and then assign formatters to each, and in each
            formatter fill the cell with something like:

            elCell.innerHTML = '<div class="top-half">' + oRecord.getData('F1') +
            '</div>' + oRecord.getData('F5');

            The div would naturally provide a break. You would have to define class
            top-half to have a fixed height, otherwise the row won't look straight
            across the table, and a border-bottom to separate both halves. I don't
            really know if this would suit your data. If you can arrange the order
            of the fields so that the ones in the top half are all brief one-liners
            and you leave the longish to the bottom half, it should be easier. You
            will probably have to mess with settings for white-space, overflow and
            perhaps also surround the bottom part in another div.

            If making the middle line fixed doesn't work, you might have to write a
            function to adjust the row height to be called upon listening to
            initEvent and renderEvent. You would leave your top-half divs flow
            freely and then, when the table finishes rendering, you would go through
            each and every row, check the heights of each div in the row, pick the
            tallest and assign that height to the rest of the top-half divs in the
            row. Actually, if you use Dom's getElementsByClassName 'apply' argument
            (a function to be called on each element) a couple of calls to it, one
            to pick the largest height, a second one to set it, for each row, would
            make it easy. To loop through the records you have getFirstTrEl and then
            getNextTrEl:

            http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#method_getFirstTrEl
            http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#method_getNextTrEl
            http://developer.yahoo.com/yui/docs/YAHOO.util.Dom.html#method_getElementsByClassName

            If you want sorting, you would have to intercept the header click and
            find out which half was clicked and call sortColumn yourself.

            Satyam


            David Wallace wrote:
            >
            > Hi. I am using a YUI Datatable.
            >
            > The data that I wish to display doesn’t fit nicely in a single row. I
            > have (say) 8 columns of data to display, where only 4 will really fit.
            > I therefore want one logical row of the data to wrap across two <tr>s.
            > I’d also like the colour alternation to kick in every two rows. In
            > other words, I’d like to see something like the following (RxFy means
            > field y of record x; vertical lines are table cell borders).
            >
            > (white)|R1F1|R1F2|R1F3|R1F4|
            >
            > (white)|R1F5|R1F6|R1F7|R1F8|
            >
            > (blue) |R2F1|R2F2|R2F3|R2F4|
            >
            > (blue) |R2F5|R2F6|R2F7|R2F8|
            >
            > (white)|R3F1|R3F2|R3F3|R3F4|
            >
            > (white)|R3F5|R3F6|R3F7|R3F8|
            >
            > I hope this is clear. Can anyone provide any guidance?
            >
            > Thanks,
            >
            > David.
            >
            >
            > No virus found in this incoming message.
            > Checked by AVG - http://www.avg.com
            > Version: 8.0.138 / Virus Database: 270.6.5/1618 - Release Date: 18/08/2008 6:51
            >
          • Lucas Smith
            ... If the table is read-only, you might be able to get away with something like this: http://yuiblog.com/sandbox/yui/v252/examples/datatable/multi_row.html
            Message 5 of 6 , Aug 19, 2008
            • 0 Attachment
              --- In ydn-javascript@yahoogroups.com, "David Wallace"
              <david.wallace@...> wrote:
              >
              > Hi. I am using a YUI Datatable.
              >
              >
              >
              > The data that I wish to display doesn't fit nicely in a single row. I
              > have (say) 8 columns of data to display, where only 4 will really fit.
              > I therefore want one logical row of the data to wrap across two <tr>s.
              > I'd also like the colour alternation to kick in every two rows. In
              > other words, I'd like to see something like the following (RxFy means
              > field y of record x; vertical lines are table cell borders).
              >
              >
              >
              > (white)|R1F1|R1F2|R1F3|R1F4|
              >
              > (white)|R1F5|R1F6|R1F7|R1F8|
              >
              > (blue) |R2F1|R2F2|R2F3|R2F4|
              >
              > (blue) |R2F5|R2F6|R2F7|R2F8|
              >
              > (white)|R3F1|R3F2|R3F3|R3F4|
              >
              > (white)|R3F5|R3F6|R3F7|R3F8|
              >
              >
              >
              > I hope this is clear. Can anyone provide any guidance?
              >
              >
              >
              > Thanks,
              >
              > David.
              >

              If the table is read-only, you might be able to get away with
              something like this:
              http://yuiblog.com/sandbox/yui/v252/examples/datatable/multi_row.html

              But really, the weight of the DataTable js lib wouldn't be worth it.
              Better to just write code to create the table elements in custom code.

              Luke
            • Frank Dietrich
              ... Or, if You can, make the server return data in this form and do the alternating row-coloring the way it s done in this sample
              Message 6 of 6 , Aug 19, 2008
              • 0 Attachment
                >If the table is read-only, you might be able to get away with
                >something like this:
                >http://yuiblog.com/sandbox/yui/v252/examples/datatable/multi_row.html
                >
                >But really, the weight of the DataTable js lib wouldn't be worth it.
                >Better to just write code to create the table elements in custom code.
                >

                Or, if You can, make the server return data in this form and do the alternating row-coloring
                the way it's done in this sample

                http://developer.yahoo.com/yui/examples/datatable/dt_row_coloring.html

                in Your case then toggling every two rows.





                www.dd-tech.de - www.personalplanung.com - www.kulturbox.de
              Your message has been successfully submitted and would be delivered to recipients shortly.