lose Resize of extendedDatatable after click on button h:commandButton

Question

I am working in Jsf with Richfaces. I custom the rich:extendedDataTable by adding a javascript file to allow resize the column's width. So i have a rich:extendedDataTable as a head Table, I do this steps :

1. The table contains many lines of data.
2. I do a double-click on a row i get another table (rich:extendedDataTable also) of details of this row
3. I choose a row in table of details and i clique in botton (type "h:commandButton") to export its informations in pdf file
4. I return to head table

So i lose the behavor of resize for the columns, This is my probleme i do the debuging with google chrome before and after having the problem, this is result of important difrences:

before:

<colgroup id="id_form_reg:EnteteRegGlo:colgroup:header">
<col width="51.35">
<col width="102.7">

<span id="id_form_reg:EnteteRegGlo_hdrop_j_id2318right" class="extdt-hdrop" style="visibility: hidden; top: 0px; left: 0px; height: 0px; width: 0px;">

<div id="id_form_reg:EnteteRegGlo:j_id2318header:menuDiv" class="extdt-menu-div-out" style="top: 0px; left: -1px;">

<colgroup id="id_form_reg:EnteteRegGlo:colgroup:body">
<col width="51.35">
<col width="102.7">

after:

<colgroup id="id_form_reg:EnteteRegGlo:colgroup:header">
<col width="null">
<col width="null">

<span id="id_form_reg:EnteteRegGlo_hdrop_j_id2318right" class="extdt-hdrop" style="visibility: hidden; top: 0px; left: 25px; height: 24px; width: 25px;">

<div id="id_form_reg:EnteteRegGlo:j_id2318header:menuDiv" class="extdt-menu-div-out" style="top: 0px; left: 30px;">                     

<colgroup id="id_form_reg:EnteteRegGlo:colgroup:body">
<col width="NaN">
<col width="NaN">   

Answer 1

Ah , this is, the code:

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);
 * }
 */
};