2 Replies Latest reply on Oct 8, 2010 9:24 AM by thecondor

    Using scalable and fixed columns in rich:extendedDataTable

    thecondor

      Hello,

       

      I need to format an existing rich:extendedDataTable with character-width-fixed columns. It means, that they should be some columns who show a fixed amount of characters and other than fill the rest of the space. In simple HTML it will be defined on this way. Please use Firefox to test the sample. With IE the widths with 'em' should be increased.

       

      <html>
          <head>
              <title>Das style-Element</title>
              <style type="text/css">
      td,th {overflow:hidden;}
      .col1 {width: 4em;}
      .col2 {width: 8em;}
      .col3 {width: *;}
      .col4 {width: 5em;}
              </style>
          </head>
          <body>
          <div style="width:100%;">
              <table border="1" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed">
                  <colgroup>
                      <col width="4em"/>
                      <col width="8em"/>
                      <col width="*"/>
                      <col width="5em"/>
                  </colgroup>
                  <thead>
                      <tr>
                          <th class="col1">Spalte 1</th>
                          <th class="col2">Spalte 2</th>
                          <th class="col3">Spalte 3</th>
                          <th class="col4">Spalte 4</th>     
                      </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td>1234567890123456789</td>
                          <td>1234567890123456789</td>
                          <td>
      This is a very long text. This is a very long text. This is a very long text. This is a very long text.
                          </td>
                          <td>1234567890123456789</td>
                      </tr>
                      <tr>
                          <td>1234567890123456789</td>
                          <td>1234567890123456789</td>
                          <td>
      This is a very long text. This is a very long text. This is a very long text. This is a very long text.
                          </td>
                          <td>1234567890123456789</td>
                      </tr>
                      <tr>
                          <td>1234567890123456789</td>
                          <td>1234567890123456789</td>
                          <td>
      This is a very long text. This is a very long text. This is a very long text. This is a very long text.
                          </td>
                          <td>1234567890123456789</td>
                      </tr>
                  </tbody>
              </table>
          </div>
          </body>
      </html>

       

      if you see the result (see the two attached pictures), the first, second and fourth column displays in the two different zoom factors (almost) the same amount of characters (8, 16 and 10). The third column fill the rest of the space.

       

      It is possible to define something like this with rich:extendedTable?

      zoom_factor1.jpg

      zoom_factor2.jpg

      Greetings

       

      TC

        • 1. Re: Using scalable and fixed columns in rich:extendedDataTable
          ilya_shaikovsky

          I think no because of resizability feature. EDT replaces the width's in % also to px on rendering to be able to recalculate on resize and store.

          • 2. Re: Using scalable and fixed columns in rich:extendedDataTable
            thecondor

            Hello,

             

            i solve almost the problem, but there is a little problem. If the Table doesn't have scroll bars, then everthing is ok. If the users zooms the font, works correct.

             

            Correct.jpg

            But if vertical scroll bars are present, between the header and the body exist a diference. It is because I changed the width from the class 'extdt-empty-cell' using css to another value and it affects on the header and on the body.

             

            Wrong.jpg

            The solution is to assign a new width to the empty cell on the header if scrollbars are present using Javascript. I changed this width using FireBug on Firefox and works nice. But, how can I do this with JavaScript? Maybe you have another idea?

             

            Best Regards

             

            TC