Rich Extended DataTable column widths

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="#{listVa开发者_StackOverflow社区r.id}" />
</rich:column>

<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.

You should specify the width without "px" or "%" eg

<rich:column label="Select" sortable="false" width="100">

Extended Datatable has issues with horizontal scrolling, but you can specify a fixed table width in pixels and put the table in a div with overflow-x set to scroll.

I combined all sorts of ideas and came up with the following:

There are - as mentioned - to things to fix. One is the scrollability beyond 100% of table width and the second one is the scrollbar itself. So i'll have some js-file to fix the resizing-problem and some css to add the scrollbar...

page.xhtml - your page with some extended-dt inside.

<head>
    <a4j:loadStyle
        src="resource:///org/company/project/css/ExtendedDatatableFix.css"
        media="screen" />
    <a4j:loadScript
        src="resource:///org/company/project/js/ExtendedDataTableHeaderFixScrollable.js" />
</head>
<body>
    <!-- prevent IE to come up with ExtendedDataTable-bla not defined-js-error -->
    <rich:extendedDataTable id="dummy_table_for_extended_datatable_fix" rendered="false">
    </rich:extendedDataTable>


    <rich:extendedDataTable id="here_goes_your_datatable">
        <!-- your ext-dt -->
    </rich:extendedDataTable>
</body>

ExtendedDatatableFix.css - not that accurate, but hey - room for improvement

.extdt-maindiv {
    margin-bottom: 17px;
}
.extdt-outerdiv {
    overflow-x:auto !important;
    overflow-y:hidden;
    height: 108% !important;
}
.extdt-innerdiv {
    height: 100% !important;
}
.extdt-content{
    overflow-x:hidden;
    overflow-y:scroll;
}

ExtendedDataTableHeaderFixScrollable.js - copied from here: http://community.jboss.org/thread/146108

 ExtendedDataTable.DataTable.header.prototype.OnSepMouseMove = function(event) {
      if(this.dragColumnInfo && this.dragColumnInfo.mouseDown) {
           if(!this.dragColumnInfo.dragStarted) {
                this.dragColumnInfo.dragStarted = true;
                this._showSplitter(this.dragColumnInfo.srcElement.columnIndex);
           }
           var delta = Event.pointerX(event) - 
                this.dragColumnInfo.startX
           if (delta < this.minDelta) {
                delta = this.minDelta;
           }
           /*if (delta > this.maxDelta) {
                delta = this.maxDelta;
           }*/
           var x = this.dragColumnInfo.originalX + delta;
           var finalX = x - this.minColumnWidth - 6 //6 stands for sep span width;
           this.columnSplitter.moveToX(finalX);                     
           Event.stop(event);
      }
 }

 ExtendedDataTable.DataTable.header.prototype.OnSepMouseUp = function(event) {
      Event.stop(event);
      Event.stopObserving(document, 'mousemove', this.eventSepMouseMove);
      Event.stopObserving(document, 'mouseup', this.eventSepMouseUp);
      if(this.dragColumnInfo && this.dragColumnInfo.dragStarted) {
           this.dragColumnInfo.dragStarted = false;
           this.dragColumnInfo.mouseDown = false;

           var delta = Event.pointerX(event) - 
                this.dragColumnInfo.startX;
           if (delta < this.minDelta) {
                delta = this.minDelta;
           }
           /*if (delta > this.maxDelta) {
                delta = this.maxDelta;
           }*/
           var columnIndex = this.dragColumnInfo.srcElement.columnIndex;
           var newWidth = this.getColumnWidth(columnIndex) + delta;

           this.extDt.setColumnWidth(columnIndex, newWidth);
           this.setColumnWidth(columnIndex,newWidth);
           this.extDt.updateLayout();
           if (this.extDt.onColumnResize){
                //set properly value to this.columnWidths
                this.extDt.columnWidths = "";
                for (i=0; i<this.columnsNumber; i++){
                     this.extDt.columnWidths += "" + this.getColumnWidth(i) + ";";
                }//for
                this.extDt.onColumnResize(event, this.extDt.columnWidths);
           }
      }
      this._hideSplitter();
 }

ExtendedDataTable.DataTable.prototype.calculateWidthsFromRatios = function() {
    LOG.debug('firing calculateWidthsFromRatios');
    var c = this.getColumns();
    var scrollbarWidth = this.getScrollbarWidth();
    this._scrollbarWidth = scrollbarWidth;
    LOG.debug('Scrollbar: ' + scrollbarWidth);
    var mainDivWidth = this.mainDiv.getWidth();
    LOG.debug('Main DIV: ' + mainDivWidth);
    var maxWidth = mainDivWidth - scrollbarWidth;
    LOG.debug('Width to spread: ' + maxWidth);
    var totalWidth = 0;
    for (i = 0; i < c.length - 1; i++) {
        LOG.debug('Column[' + i + '] ratio: ' + this.ratios[i]);
        var w = Math.round(this.ratios[i] * maxWidth);
        if (w < parseInt(this.minColumnWidth)) {
            w = parseInt(this.minColumnWidth);
        }
        LOG.debug('setting column ' + i + ' to width: ' + w);
        this.setColumnWidth(i, w);
        this.header.setColumnWidth(i, w);
        totalWidth += w;
    }
    /*
     * if (totalWidth > maxWidth) {
     * c[c.length - 2].width -= (totalWidth - maxWidth);
     * }
     */
};

To enable horizontal scrollbar see the workaround here https://jira.jboss.org/jira/browse/RF-4871.

To make the columns resizable when horizontal scrollbar is shown see this http://community.jboss.org/message/518878#518878.

According to this example here:

RichFaces Showcase

The width is used this way(check the source of the xhtml):

<rich:column filter="#{carsFilteringBean.mileageFilterImpl}" width="150px"

For me it worked without a problem.

Greetings.