Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><code>&lt;rich:extendedDataTable&gt;</code> really doesn't handle horizontal scrolling very well. In fact, it seems like the developers set out to make horizontal scrolling next to impossible.</p> <p>You can put <code>&lt;rich:extendedDataTable&gt;</code> in a <code>&lt;div&gt;</code> with horizontal scrolling enabled, but it's not going to work if you leave it at that. One of the nested <code>&lt;div&gt;</code>s in <code>&lt;rich:extendedDataTable&gt;</code> (<code>div.extdt-innerdiv</code>) is absolutely positioned, removing it from the flow of the document.</p> <p>For reference, this is the basic output structure of <code>&lt;rich:extendedDataTable&gt;</code>, assuming three <code>&lt;rich:column&gt;</code> elements with a width of 100px and two records:</p> <pre><code>&lt;div id="form_id:edt_id" class="extdt-maindiv rich-extdt-maindiv"&gt; &lt;div id="form_id:edt_id:od" class="extdt-outerdiv"&gt; &lt;div id="form_id:edt_id:innerd" class="extdt-innerdiv"&gt; &lt;table id="form_id:edt_id:tu" class="extdt-table-layout"&gt; &lt;colgroup id="form_id:edt_id:colgroup:header"&gt; &lt;col width="100" /&gt; &lt;col width="100" /&gt; &lt;col width="100" /&gt; &lt;/colgroup&gt; &lt;thead id="form_id:edt_id:header" class="extdt-thead"&gt; &lt;tr class="extdt-subheader rich-extdt-subheader"&gt; &lt;th id="form_id:edt_id:column_1_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell"&gt;Column Header 1&lt;/th&gt; &lt;th id="form_id:edt_id:column_2_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell"&gt;Column Header 2&lt;/th&gt; &lt;th id="form_id:edt_id:column_3_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell"&gt;Column Header 3&lt;/th&gt; &lt;/tr&gt; &lt;tr class="extdt-table-filterrow rich-extdt-subheader"&gt; &lt;!-- only if filtering is enabled --&gt; &lt;th class="extdt-subheadercell rich-extdt-subheadercell"&gt;&lt;!-- omitted for example purposes --&gt;&lt;/th&gt; &lt;th class="extdt-subheadercell rich-extdt-subheadercell"&gt;&lt;!-- omitted for example purposes --&gt;&lt;/th&gt; &lt;th class="extdt-subheadercell rich-extdt-subheadercell"&gt;&lt;!-- omitted for example purposes --&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td colspan="3"&gt; &lt;div id="form_id:edt_id:sd" class="extdt-content"&gt; &lt;table id="form_id:edt_id:n" class="extdt-table-layout"&gt; &lt;colgroup id="form_id:edt_id:colgroup:body"&gt; &lt;col width="100" /&gt; &lt;col width="100" /&gt; &lt;col width="100" /&gt; &lt;/colgroup&gt; &lt;tbody id="form_id:edt_id:tb"&gt; &lt;tr id="form_id:edt_id:n:0" class="extdt-firstrow rich-extdt-firstrow"&gt; &lt;td id="form_id:edt_id:0:column_1_id" class="extdt-cell rich-extdt-cell"&gt; &lt;div class="extdt-cell-div"&gt;Column 1, Row 1&lt;/div&gt; &lt;/td&gt; &lt;td id="form_id:edt_id:0:column_2_id" class="extdt-cell rich-extdt-cell"&gt; &lt;div class="extdt-cell-div"&gt;Column 2, Row 1&lt;/div&gt; &lt;/td&gt; &lt;td id="form_id:edt_id:0:column_3_id" class="extdt-cell rich-extdt-cell"&gt; &lt;div class="extdt-cell-div"&gt;Column 3, Row 1&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr id="form_id:edt_id:n:1" class="extdt-firstrow rich-extdt-firstrow"&gt; &lt;td id="form_id:edt_id:1:column_1_id" class="extdt-cell rich-extdt-cell"&gt; &lt;div class="extdt-cell-div"&gt;Column 1, Row 2&lt;/div&gt; &lt;/td&gt; &lt;td id="form_id:edt_id:1:column_2_id" class="extdt-cell rich-extdt-cell"&gt; &lt;div class="extdt-cell-div"&gt;Column 2, Row 2&lt;/div&gt; &lt;/td&gt; &lt;td id="form_id:edt_id:1:column_3_id" class="extdt-cell rich-extdt-cell"&gt; &lt;div class="extdt-cell-div"&gt;Column 3, Row 2&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;tfoot id="form_id:edt_id:footer"&gt; &lt;tr class="extdt-footer rich-extdt-footer"&gt; &lt;td class="extdt-footercell rich-extdt-footercell" scope="colgroup" colspan="3"&gt; &lt;!-- table footer goes here if defined --&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tfoot&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="form_id:edt_id:column_1_idmenu"&gt; &lt;script type="text/javascript"&gt; // context menu script snipped for example purposes &lt;/script&gt; &lt;/div&gt; &lt;div id="form_id:edt_id:column_2_idmenu"&gt; &lt;script type="text/javascript"&gt; // context menu script snipped for example purposes &lt;/script&gt; &lt;/div&gt; &lt;div id="form_id:edt_id:column_3_idmenu"&gt; &lt;script type="text/javascript"&gt; // context menu script snipped for example purposes &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>You could add horizontal scrolling to <code>div.extdt-innerdiv</code>, but <code>&lt;rich:extendedDataTable&gt;</code>'s column auto-resizing functionality (<code>ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios()</code>) essentially gets confused by this, resizing all columns that begin past the component's <code>maxWidth</code> (derived from the initial width of <code>div.extdt-maindiv</code>) to 20px wide.</p> <p>I've tried...</p> <ul> <li>Wrapping <code>&lt;rich:extendedDataTable&gt;</code> with a <code>&lt;div&gt;</code> element and setting the following: <ul> <li><code>position: relative;</code></li> <li><code>width: 100%;</code></li> <li><code>overflow-x: auto;</code></li> <li>a desired height, otherwise you'll just see scrollbars due to the next bullet point.</li> </ul></li> <li>Making <code>div.extdt-maindiv</code> absolutely-positioned</li> <li>Giving both <code>div.extdt-outerdiv</code> and <code>div.extdt-innerdiv</code> static positioning and auto widths</li> </ul> <p>...but that doesn't seem to have any effect.</p> <p>I'm thinking it may be due to the fact that I'm making most of these changes in Firebug, and <code>mainDiv.getWidth()</code> (from <code>calculateWidthsFromRatios()</code>) is retrieving a cached value, <code>mainDiv.element.boxWidth</code>. This value is being set in <code>ClientUI.common.box.Box.setWidth()</code> (common-scrollable-data-table.js), and it's only called once; it does not get called again if I resize the browser window (the <code>&lt;rich:extendedDataTable&gt;</code> in my case has 100% width).</p> <p>I will try making these changes in my CSS file to see if everything just magically works. The JavaScript for <code>&lt;rich:extendedDataTable&gt;</code> is pretty complex, though, and it's not documented, so I could be missing something somewhere. I'll follow up with my results.</p> <hr> <p><strong>EDIT</strong>: After making the changes in my CSS, I still experienced the column-shortening problem.</p> <p>So, to avoid having to create a wrapper div, I added horizontal scrolling to <code>div.extdt-innerdiv</code>:</p> <pre><code>.extdt-innerdiv { overflow-y: hidden; overflow-x: auto !important; } </code></pre> <p>Then, in the footer of the <code>&lt;rich:extendedDataTable&gt;</code>, I disabled the <code>calculateWidthsFromRatios()</code> function:</p> <pre><code>&lt;rich:extendedDataTable id="edtId"&gt; &lt;!-- rest of extended data table --&gt; &lt;f:facet name="footer"&gt; &lt;script type="text/javascript"&gt; jQuery(function() { // Disable ratio-based column resizing. ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios = function() {}; }); &lt;/script&gt; &lt;/f:facet&gt; &lt;/rich:extendedDataTable&gt; </code></pre> <p>I used the footer of the table in order to force this JavaScript to execute every time the component reRendered.</p> <p>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 <code>mainDiv.element.boxWidth</code>. In order to enable resizing like this, one might as well just submit a patch to JBoss to fix <code>&lt;rich:extendedDataTable&gt;</code>, as there are currently no plans to modify its behavior in RichFaces 3.X (according to <a href="https://jira.jboss.org/jira/browse/RF-4871" rel="noreferrer">#RF-4871</a> in the JBoss Community JIRA).</p> <p>Good luck.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload