13 Replies Latest reply on Sep 8, 2015 10:19 AM by vpenugo

    ExtendedDataTable: resizing column when horizontal scrollbar is shown

    bungrudi

      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
          charlesyang
          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
            nbelaevski

            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
              bungrudi

              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
                jbalunas

                Thanks for sharing this workaround!!

                 

                This should become a wiki article I think.

                • 5. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
                  bungrudi

                  Hi Jay,

                  I'll write the article on the weekend.

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

                    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
                      bungrudi

                      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

                        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

                          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

                            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

                              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
                                rafaeluchoanaskar

                                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/

                                • 13. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
                                  vpenugo

                                  If we want to work same thing in RF 4.x, Is there any modification required for this. actually I am getting 'ExtendedDataTable is undefined' javascript error.