1 2 3 4 5 Previous Next 93 Replies Latest reply on Jan 13, 2011 11:24 AM by ATD Go to original post
      • 30. Re: horizontal bar Scroolling.
        ATD
        ps - this was my "double scrolling" example - very old javascripty stuff, though: http://apex.oracle.com/pls/otn/f?p=267:90

        Still needs some updates to get the column widths right - but, as you should see, the first column's heading width is wrong

        Andy
        • 31. Re: horizontal bar Scroolling.
          vee
          I had noticed that issue when it tested the code.

          I added that last line so that text is not wrapped to the next line in all the report columns and it took care of the problem for me.
          $('div.scroll_report table.report-standard td').attr('nowrap', 'nowrap');
          Andy, do u have an example which still has this issue ?.

          As for making the code generic, I think the selector for the data table *$('table.report-standard')* alone needs to be changed.
          Other than that,It doesn't rely on other apex classes, so I hope it should easily be portable across templates.

          Another thing that hasn't been taken care of is pagination , this code has to be hooked to the report's pagination requests too.
          • 32. Re: horizontal bar Scroolling.
            ATD
            Hi Vee,

            Moving the code into a Dynamic Action fixes the sorting and pagination issues - at least, it does in my example :D

            I don't have a specific example for row heights - it's just something I'm sure needs to be taken into account (just search for the number of threads created about fixed column widths/wrapping text in reports!)

            Andy
            • 33. Re: horizontal bar Scroolling.
              jariola
              Hi,

              Andy, I try check your double scroll sample and post if I figure out something.

              Vee & Andy, it would be good create function from this horizontal scroll,
              where you can pass variable how many columns you like freeze and e.g. width you like use for report.

              Regards,
              Jari
              • 34. Re: horizontal bar Scroolling.
                ATD
                Perhaps a plugin?
                • 35. Re: horizontal bar Scroolling.
                  jariola
                  Hi,

                  Yes that is good idea. jQuery plugin and you call it like
                  $('my_selector').horizontalScroll({my_options});
                  Regards,
                  Jari
                  • 36. Re: horizontal bar Scroolling.
                    ATD
                    OK - well, I'm nowhere near ready to create plugins!
                    • 37. Re: horizontal bar Scroolling.
                      vee
                      I 've made it into jQuery plugin
                      (function($) {
                           // jQuery plugin definition
                           $.fn.reportHorizontalScroll = function(params) {
                                // merge default and user parameters
                                params = $.extend( {minwidth: '300px', maxwidth: '500px'}, params);
                                // traverse all nodes fetched by selector
                                this.each(function() {
                                     // express a single node as a jQuery object
                                     var $t = $(this);
                      
                            $scroll_div = $('<div class="scroll_report"><div style="float:left;display:inline" name="no_scroll"></div><div name="scrollable" style="float:left;display:inline;min-width: '+params.minwidth+'; _width:'+params.minwidth+';overflow-x: auto; max-width: '+params.maxwidth+';"> </div><br/></div>');
                            $t.after($scroll_div);
                            $t.appendTo( $scroll_div.children('div[name=no_scroll]'));
                            $t.clone().appendTo( $scroll_div.children('div[name=scrollable]') );
                            $scroll_div.find('td').attr('nowrap', 'nowrap');
                      
                            //fixed columns
                            $scroll_div.children('div[name=no_scroll]').find('td,th').addClass('cols_to_remove');
                            $.each(params.columns.split(','),function(){ 
                              col=this;
                              $scroll_div.children('div[name=no_scroll]').find('th#'+col+',td[headers='+col+']').removeClass('cols_to_remove');
                              $scroll_div.children('div[name=scrollable]').find('th#'+col+',td[headers='+col+']').remove();      
                            });
                            $scroll_div.children('div[name=no_scroll]').find('.cols_to_remove').remove();
                            
                                });
                                // allow jQuery chaining
                                return this;
                           };
                      })(jQuery);
                      You can just save that to a JS file an load it in your page.

                      <b>Usage:</b>
                      $('<jQuery Table selector>').reportHorizontalScroll({'minwidth':'<minimum width of the scrolling div>','maxwidth':'maximum width of the scrolling div','columns':'<COLUMN1 ALIAS>,<COLUMN2 ALIAS>...'});
                      the 'columns' property in the parameter object is a comma separated list of the column aliases of columns that needs to be freezed .

                      Example.
                      $('table.report-standard').reportHorizontalScroll({'minwidth':'200px','maxwidth':'400px','columns':'CUSTOMER_ID,CUSTOMER_ID_DISPLAY'});
                      Note: It assumes the report structure generates heading columns with id="<column alias>" and data columns with *[headers="<column alias>"]*
                      • 38. Re: horizontal bar Scroolling.
                        jariola
                        Hi,

                        Here is my "plugin"
                        <script type="text/javascript">
                        ;(function($){$.fn.htmldbHscroll=function(opt){
                         opt=$.extend({
                          width:400,
                          columns:1,
                          report:'table:eq(0)'
                         },opt);
                        
                         return this.each(function(i){
                          var self=$(this);
                          var tbl1=self.find(opt.report);
                          var tbl2=tbl1.clone();
                          var ntr1=$('<tr/>');
                          var r1=tbl1.find('tr');
                          var r2=tbl2.find('tr');
                        
                          tbl1.find('th,td').css({"white-space":"nowrap"});
                          tbl2.find('th,td').css({"white-space":"nowrap"});
                        
                          self.find('tr:eq(1)').after(ntr1);
                          ntr1.append($('<td/>').append(tbl1));
                          ntr1.append($('<td/>',{"valign":"top"}).append(tbl2));
                        
                          r1.each(function(i){
                           var trOne=$(this);
                           var trTwo=r2.eq(i);
                           trOne.children(':gt('+(opt.columns-1)+')').remove();
                           trTwo.children(':lt('+opt.columns+')').remove();
                          });
                          tbl2.wrap($('<div/>',{"css":{"overflow-x":"scroll","width":opt.width}}));
                          var ntr2=tbl1.find('tr:last').clone();
                          ntr2.find('td').each(function(i){
                           $(this).text('\u00A0');
                          });
                          tbl1.append(ntr2);
                         })
                        }})(jQuery);
                        I assume that report template Before Rows is like
                        <table cellpadding="0" border="0" cellspacing="0" summary="" #REPORT_ATTRIBUTES# id="report_#REGION_STATIC_ID#">#TOP_PAGINATION#<tr><td><table cellpadding="0" border="0" cellspacing="0" summary="" class="t110standard">
                        And jQuery selector is parent table.

                        You call it e.g. from report region footer like
                        <script>
                        $('#report_#REGION_ID#').htmldbHscroll({width:500,columns:3});
                        </script>
                        Regards,
                        Jari

                        Edited by: jarola on Jan 9, 2011 11:58 AM


                        I hope it works on IE as I did not have now possibility to test

                        Edited by: jarola on Jan 9, 2011 12:05 PM
                        typo

                        Edited by: jarola on Jan 9, 2011 12:27 PM

                        Code updated work with IE
                        Sample here
                        http://actionet.homelinux.net/htmldb/f?p=100:94
                        • 39. Re: horizontal bar Scroolling.
                          jariola
                          Hi,

                          vee, have you check your plugin with IE?
                          What I check sample Andy did make using your code it do not work with IE.
                          Right hand side report Last row is under scroll bar

                          Regards,
                          Jari
                          • 40. Re: horizontal bar Scroolling.
                            ATD
                            Hi Jari,

                            I've just tested your page in IE7 (it's the only version of IE that I have and I'm not upgrading to IE8 :D ).

                            The frozen column needs to be adjusted so that its height is 18px shorter than the main report table - that allows for the height of the scrollbar. At present, it is about 9px off

                            To see this: http://apex.oracle.com/pls/otn/f?p=267:11 and check Image 113 ("ScrollingReport_IE7.jpg")

                            Andy
                            • 41. Re: horizontal bar Scroolling.
                              jariola
                              Hi Andy,

                              Thanks to report this.
                              I did make changes and it did not work again with IE.

                              Now it should again work with IE

                              Regards,
                              Jari

                              Edited by: jarola on Jan 9, 2011 4:47 PM

                              And current code is
                              ;(function($){$.fn.htmldbHscroll=function(opt){
                               opt=$.extend({
                                width:400,
                                columns:1,
                                report:'table:first',
                                parent:'td:first',
                                thHeight:26
                               },opt);
                               return this.each(function(i){
                                var tbl1=$(this).find(opt.report);
                                var tbl2=tbl1.clone();
                                var t=tbl1.parent(opt.parent).attr({"valign":"top"});
                                var r1=tbl1.find("tr");
                                var r2=tbl2.find("tr");
                              
                                tbl1.find("th,td").css({"white-space":"nowrap"});
                                tbl2.find("th,td").css({"white-space":"nowrap"});
                                t.after($("<td/>",{"valign":"top"}).append(tbl2));
                                r1.each(function(i){
                                 $(this).children(":gt("+(opt.columns-1)+")").remove();
                                 r2.eq(i).children(":lt("+opt.columns+")").remove();
                                });
                                tbl2.wrap($("<div/>",{"css":{"overflow-x":"scroll","width":opt.width}}));
                                t=tbl1.find("tr:last").clone();
                                t.children().text("\u00A0");
                                tbl1.append(t).wrap($("<div/>"));
                                tbl1.find("th").css({"height":opt.thHeight});
                                tbl2.find("th").css({"height":opt.thHeight});
                               })
                              }})(jQuery);
                              I did add few parameters.
                              If your report template do not match my assumption, you can give selectors by options report and parent
                              • 42. Re: horizontal bar Scroolling.
                                ATD
                                Hi Jari,

                                At the moment, I'm just loading your page into IE7, so don't have any theme in mind!

                                For this bit:
                                t=tbl1.find("tr:last").clone();
                                t.children().text("\u00A0");
                                IE7 makes the new row the same height as the other rows - this is too big as it is bigger than the scrollbar. Can you add in a height style on the t object to set it to 18px (it was either 18 or 20, but I think 18)

                                Andy
                                • 43. Re: horizontal bar Scroolling.
                                  ATD
                                  Hi Jari,

                                  In fact, on the TD tags, set the "font-size" to 10px and the "line-height" to 10px - this seems about right

                                  Andy
                                  • 44. Re: horizontal bar Scroolling.
                                    jariola
                                    Hi Andy,

                                    Thanks for tip. Now it is better with IE
                                    ;(function($){$.fn.htmldbHscroll=function(opt){
                                     opt=$.extend({
                                      width:400,
                                      columns:1,
                                      report:'table:first',
                                      parent:'td:first',
                                      thHeight:26
                                     },opt);
                                     return this.each(function(i){
                                      var tbl1=$(this).find(opt.report);
                                      var tbl2=tbl1.clone();
                                      var t=tbl1.parent(opt.parent).attr({"valign":"top"});
                                      var r1=tbl1.find("tr");
                                      var r2=tbl2.find("tr");
                                    
                                      tbl1.find("th,td").css({"white-space":"nowrap"});
                                      tbl2.find("th,td").css({"white-space":"nowrap"});
                                      t.after($("<td/>",{"valign":"top"}).append(tbl2));
                                      r1.each(function(i){
                                       $(this).children(":gt("+(opt.columns-1)+")").remove();
                                       r2.eq(i).children(":lt("+opt.columns+")").remove();
                                      });
                                      tbl2.wrap($("<div/>",{"css":{"overflow-x":"scroll","width":opt.width}}));
                                      t=tbl1.find("tr:last").clone();
                                      t.children().text("\u00A0").css({"font-size":"10px","line-height":"10px"});
                                      tbl1.append(t).wrap($("<div/>"));
                                      tbl1.find("th").css({"height":opt.thHeight});
                                      tbl2.find("th").css({"height":opt.thHeight});
                                     })
                                    }})(jQuery);
                                    Regards,
                                    Jari
                                    1 2 3 4 5 Previous Next