12 Replies Latest reply: Mar 21, 2012 1:45 PM by rafael uchoa RSS

ExtendedDataTable: resizing column when horizontal scrollbar is shown

Rudi Adianto Newbie

Hi all,

 

In my current project, I put some CSS rule to show up horizontal scrollbar as suggested here: https://jira.jboss.org/jira/browse/RF-4871.

The problem is, while\ horizontal scrollbar is shown the columns cannot be resized to wider width. Resizing to narrower width works just fine.

I’m assuming that this has something to do with some javascript function.

How do I override this javascript function, so that I can make the column be resized wider while horizontal scrollbar is shown?

 

Best Regards,

Rudi Adianto

  • 1. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
    Charles Yang Newbie
    I also had severl problems with ExtendedDataTable in various cases, forced me go back to use the basic Richfaces DataTable, which is much stable. I think ExtendedDataTable is donated by someone and has not being thoroughly tested.
  • 2. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
    Nick Belaevski Master

    Hi,

     

    You can start the search from these JS functions of the component: calculateWidthsFromRatios() and updateLayout().

  • 3. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
    Rudi Adianto Newbie

    Solved.

     

    For you who has the same problem and seeking some working solution, here it goes.

    Put these on the header of your page, inside <script> tag:

     

         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();
              
         }
    

     

    Notice that I comment out the lines that check for 'maxDelta'. This checking for maxDelta that prevents the column to be resized wider.

    For you who want to change directly in the source code and recompile, you can find this in ExtendedDataTableHeader.js.

     

    I hope this help.

  • 4. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
    Jay Balunas Master

    Thanks for sharing this workaround!!

     

    This should become a wiki article I think.

  • 5. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
    Rudi Adianto Newbie

    Hi Jay,

    I'll write the article on the weekend.

  • 6. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
    Frantz Degrigny Newbie

    I have followed this tips because I need an horizontal bar with a data table associated with a pager.

    I hav managed to display the horizontal scroll but i still cannot replace the JS functions to enable full column resize functionnality.

     

    I have put the JS functions into the HTML header but it seems that they are never called.


    How I can to do this ?

  • 7. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
    Rudi Adianto Newbie

    Hi Frantz,


    What version of Richfaces are you using?

    The tips was tested with 3.3.2.

    If you want, you can paste your (x)html code in pastebin.com so I can check it.

     

    I promised to write a wiki article. But currently I am really busy , barely have time to breath, let alone writing an article.

  • 8. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
    Frantz Degrigny Newbie

    I am using the 3.3.2 version too. (with IE 7 browser)

     

    Here is my source page : http://pastebin.com/m577750cf

  • 9. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
    cobaasta cobaasta Newbie

    For those who don't want do change the source,

    here is how i changed the OnSepMouseDown() Method with the help of addMethods() during 'runtime' (onload="setMaxDelta")


    function setMaxDelta() {
        try {
            // Overwrite the function window.ExtendedDataTable.DataTable.header.OnSepMouseDown()
            window.ExtendedDataTable.DataTable.header.addMethods({
                OnSepMouseDown : function(event) {
                    Event.stop(event);
                    this.dragColumnInfo = {
                        srcElement: Event.element(event),
                        dragStarted: false,
                        mouseDown: true,
                        startX: Event.pointerX(event),
                        originalX: 0
                    };
                    var srcElement = this.dragColumnInfo.srcElement;
                    this.maxDelta = 99999;
                    if (ClientUILib.isOpera) {
                        this.maxDelta -= 1;
                    };
                    this.minDelta = this.minColumnWidth - this.getColumnWidth(srcElement.columnIndex);
                    Event.observe(document, 'mousemove', this.eventSepMouseMove, true);
                    Event.observe(document, 'mouseup', this.eventSepMouseUp, true);
                }
            });
            // Add the events listeners to the instance
            var header = document.getElementById('yourFormId:yourTableId').component.header;
            header.eventSepMouseDown = header.OnSepMouseDown.bindAsEventListener(header);
            header.addListeners();
        } catch (e) { }
    }

     

    A note to the solution for the horizontal scrollbar:
    overflow-x:auto instead of overflow-x:scroll shows the scrollbar only if needed.
    You can apply the same style to extdt-outerdiv instead of extdt-innerdiv too.

     

    A problem with the  horizontal scrollbar solution in IE:

    Although the scrollbar works fine, i got a JavaScript error (DnD is undefined) on resize of the window!

    I got this error as soon as a part of the table is cropped, and it doesn't matter if i style the extdt-innerdiv or the extdt-outerdiv with scroll or auto.

     

    IE 7, RichFaces 3.3.2.SR1

     

    problem with the horizontal scrollbar solution in IE

  • 10. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
    cobaasta cobaasta Newbie

    And how can i disable the column resize on window resize?
    I mean the addaption of the extendedDataTable to the available space.
    I want the columns to be as wide as they are (their size in px or 100px default), and nothing else...

  • 11. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
    Lucas Marti Newbie

    Hy all,

     

    first I'd like to thank you for posting this solution! It works fine. But there is still one problem left:

     

    when resizing the window the scrollbar disappears and the table gets resized. Once I reload the page, the scrollbar appears again.

     

    I suppose that I have to register a function to the onResize event.

     

    Does anyone have an idea?

     

    thanks

     

    Lucas

  • 12. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
    rafael uchoa Newbie

    For legacy systems that need that feature, there is a javascript that copies the THEAD to other DIV and adds the scroll-x and scroll-y css styles.

     

    http://jaimonmathew.wordpress.com/2010/02/02/scroller/