Question

I have issue with RichFaces extended dataTable

If the columns are more say 20, instead of giving a horizontal scroll bar, the columns are getting compressed.

I tried giving column width in %, px .But no use.

Anyone familiar with this?

<rich:column label="Select" sortable="false" width="10%">
  <f:facet name="header"> 
    <h:selectBooleanCheckbox id="chk" align="center"
      value="#{bean.selectAll}" onclick="selectAll();"/>
  </f:facet>
  <input id="part_#{rowKey}" type="checkbox"
    name="selectedParts" value="#{listVar.id}" />
</rich:column>

Answer 1

<rich:extendedDataTable> really doesn’t handle horizontal scrolling very well. In fact, it seems like the developers set out to make horizontal scrolling next to impossible.

You can put <rich:extendedDataTable> in a <div> with horizontal scrolling enabled, but it’s not going to work if you leave it at that. One of the nested <div>s in <rich:extendedDataTable> (div.extdt-innerdiv) is absolutely positioned, removing it from the flow of the document.

For reference, this is the basic output structure of <rich:extendedDataTable>, assuming three <rich:column> elements with a width of 100px and two records:

<div id="form_id:edt_id" class="extdt-maindiv rich-extdt-maindiv">
    <div id="form_id:edt_id:od" class="extdt-outerdiv">
        <div id="form_id:edt_id:innerd" class="extdt-innerdiv">
            <table id="form_id:edt_id:tu" class="extdt-table-layout">
                <colgroup id="form_id:edt_id:colgroup:header">
                    <col width="100" />
                    <col width="100" />
                    <col width="100" />
                </colgroup>
                <thead id="form_id:edt_id:header" class="extdt-thead">
                    <tr class="extdt-subheader rich-extdt-subheader">
                        <th id="form_id:edt_id:column_1_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 1</th>
                        <th id="form_id:edt_id:column_2_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 2</th>
                        <th id="form_id:edt_id:column_3_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 3</th>
                    </tr>
                    <tr class="extdt-table-filterrow rich-extdt-subheader"> <!-- only if filtering is enabled -->
                        <th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
                        <th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
                        <th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="3">
                            <div id="form_id:edt_id:sd" class="extdt-content">
                                <table id="form_id:edt_id:n" class="extdt-table-layout">
                                    <colgroup id="form_id:edt_id:colgroup:body">
                                        <col width="100" />
                                        <col width="100" />
                                        <col width="100" />
                                    </colgroup>
                                    <tbody id="form_id:edt_id:tb">
                                        <tr id="form_id:edt_id:n:0" class="extdt-firstrow rich-extdt-firstrow">
                                            <td id="form_id:edt_id:0:column_1_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 1, Row 1</div>
                                            </td>
                                            <td id="form_id:edt_id:0:column_2_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 2, Row 1</div>
                                            </td>
                                            <td id="form_id:edt_id:0:column_3_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 3, Row 1</div>
                                            </td>
                                        </tr>
                                        <tr id="form_id:edt_id:n:1" class="extdt-firstrow rich-extdt-firstrow">
                                            <td id="form_id:edt_id:1:column_1_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 1, Row 2</div>
                                            </td>
                                            <td id="form_id:edt_id:1:column_2_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 2, Row 2</div>
                                            </td>
                                            <td id="form_id:edt_id:1:column_3_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 3, Row 2</div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                </tbody>
                <tfoot id="form_id:edt_id:footer">
                    <tr class="extdt-footer rich-extdt-footer">
                        <td class="extdt-footercell rich-extdt-footercell" scope="colgroup" colspan="3">
                            <!-- table footer goes here if defined -->
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <div id="form_id:edt_id:column_1_idmenu">
        <script type="text/javascript">
            // context menu script snipped for example purposes
        </script>
    </div>
    <div id="form_id:edt_id:column_2_idmenu">
        <script type="text/javascript">
            // context menu script snipped for example purposes
        </script>
    </div>
    <div id="form_id:edt_id:column_3_idmenu">
        <script type="text/javascript">
            // context menu script snipped for example purposes
        </script>
    </div>
</div>

You could add horizontal scrolling to div.extdt-innerdiv, but <rich:extendedDataTable>‘s column auto-resizing functionality (ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios()) essentially gets confused by this, resizing all columns that begin past the component’s maxWidth (derived from the initial width of div.extdt-maindiv) to 20px wide.

I’ve tried…

• Wrapping <rich:extendedDataTable> with a <div> element and setting the following:
  • position: relative;
  • width: 100%;
  • overflow-x: auto;
  • a desired height, otherwise you’ll just see scrollbars due to the next bullet point.
• Making div.extdt-maindiv absolutely-positioned
• Giving both div.extdt-outerdiv and div.extdt-innerdiv static positioning and auto widths

…but that doesn’t seem to have any effect.

I’m thinking it may be due to the fact that I’m making most of these changes in Firebug, and mainDiv.getWidth() (from calculateWidthsFromRatios()) is retrieving a cached value, mainDiv.element.boxWidth. This value is being set in ClientUI.common.box.Box.setWidth() (common-scrollable-data-table.js), and it’s only called once; it does not get called again if I resize the browser window (the <rich:extendedDataTable> in my case has 100% width).

I will try making these changes in my CSS file to see if everything just magically works. The JavaScript for <rich:extendedDataTable> is pretty complex, though, and it’s not documented, so I could be missing something somewhere. I’ll follow up with my results.

---

EDIT: After making the changes in my CSS, I still experienced the column-shortening problem.

So, to avoid having to create a wrapper div, I added horizontal scrolling to div.extdt-innerdiv:

.extdt-innerdiv { overflow-y: hidden; overflow-x: auto !important; }

Then, in the footer of the <rich:extendedDataTable>, I disabled the calculateWidthsFromRatios() function:

<rich:extendedDataTable id="edtId">
    <!-- rest of extended data table -->
    <f:facet name="footer">
        <script type="text/javascript">
            jQuery(function() {
                // Disable ratio-based column resizing.
                ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios = function() {};
            });
        </script>
    </f:facet>
</rich:extendedDataTable>

I used the footer of the table in order to force this JavaScript to execute every time the component reRendered.

Even with this solution, the user won’t be able to manually expand the widths of the columns, because the JavaScript in extended-data-table.js prevents columns from being resized wider than mainDiv.element.boxWidth. In order to enable resizing like this, one might as well just submit a patch to JBoss to fix <rich:extendedDataTable>, as there are currently no plans to modify its behavior in RichFaces 3.X (according to #RF-4871 in the JBoss Community JIRA).

Good luck.