1 2 3 Previous Next 93 Replies Latest reply: Jan 13, 2011 5:24 AM by ATD RSS

    horizontal bar Scroolling.

    Vedant
      hi,

      i want to dispaly a report with horizontal bar Scroolling.

      GHow can i do this.


      Thanks

      Edited by: 805629 on Jan 6, 2011 3:33 AM

      Edited by: 805629 on Jan 6, 2011 9:17 PM
        • 2. Re: horizontal bar Scroolling.
          jariola
          Hi Andy,

          Nice sample.
          it just did give me idea to try same with jQuery
          http://actionet.homelinux.net/htmldb/f?p=100:94

          jQuery code look like this
          $(function(){
           $('#report_data_#REGION_ID# td,#report_data_#REGION_ID# th').css({"white-space":"nowrap"});
          
           var lTH=$('#report_data_#REGION_ID# th:nth-child(1)');
           var lTD=$('#report_data_#REGION_ID# td:nth-child(1)');
          
           $('#report_data_#REGION_ID#').children().wrap('<tr/>').wrap('<td valign="top"/>').wrap($('<div/>',{"css":{"overflow-x":"scroll","width":"400"}})).wrap($('<table/>',{"cellspacing":0,"cellpadding":0,"border":0,"class":"apexir_WORKSHEET_DATA"}));
           var lNewTable=$('<table/>',{"cellspacing":0,"cellpadding":0,"border":0,"class":"apexir_WORKSHEET_DATA"});
           lNewTable.append($('<tr/>').append(lTH));
          
           lTD.each(function(i){
            lNewTable.append( $('<tr/>').append( $(this) ) );
           });
           lNewTable.append( $('<tr/>').append( $('<td/>',{"text":"\u00A0"}) ) );
          
           $('#report_data_#REGION_ID#').children('tr').prepend( $('<td valign="top"/>').append(lNewTable) );
          });
          Report template is just standard, but I did remove class from inner table

          Regrads,
          Jari
          • 3. Re: horizontal bar Scroolling.
            ATD
            Much easier with jQuery!

            But, of course, my example was pre-Apex 4 and I didn't use jQuery at the time :D
            • 4. Re: horizontal bar Scroolling.
              jariola
              Hi,

              I know you have done sample while ago.
              I hope my sample gives some ideas to you

              regards,
              Jari
              • 5. Re: horizontal bar Scroolling.
                ATD
                Oh, I have loads of ideas! Just haven't had much time to work them out yet!

                I've done a few tutorials and created a few standalone pages - selecting items is a bit tricky (though, I'm sure it's all very logical!). I haven't seen any document that uses the {"css":{"overflow-x":"scroll","width":"400"}} that you've done - is there a website that shows tricks like that, as the jQuery.com site doesn't (or, least, i can't find it on there!)?

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

                  I do not remember where I did learn that, sorry.
                  Probably it was some other forum post.

                  If I find it , I post link

                  Regrads,
                  Jari
                  • 7. Re: horizontal bar Scroolling.
                    ATD
                    Thanks, Jari - I need the "tips and tricks" stuff as it looks easier than the way the tutorials show you :D
                    • 8. Re: horizontal bar Scroolling.
                      jariola
                      Hi,

                      I think it was this link
                      http://api.jquery.com/jQuery/#jQuery2



                      Regards,
                      Jari
                      • 9. Re: horizontal bar Scroolling.
                        ATD
                        Ummm... That's actually the site I've been using! I've not seen anything about the {} methods though. Oh well, if it works... :D

                        Thanks

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

                          There is that one example
                          $("<div/>", {
                            "class": "test",
                            text: "Click me!",
                            click: function(){
                              $(this).toggleClass("test");
                            }
                          }).appendTo("body");
                          
                          .....
                          Regards,
                          Jari
                          • 11. Re: horizontal bar Scroolling.
                            ATD
                            Silly me :) They didn't make that clear! I'll carry on searching - this is fun!!

                            Thanks again

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

                              =)

                              I noticed my sample did not work with IE
                              I did make change and now it should work on IE also
                              function setReportScroll(){
                              
                               $('#report_data_#REGION_ID# td,#report_data_#REGION_ID# th').css({"white-space":"nowrap"});
                              
                               var lTH=$('#report_data_#REGION_ID# th:nth-child(1)');
                               var lTD=$('#report_data_#REGION_ID# td:nth-child(1)');
                              
                               var lBody=$('#report_data_#REGION_ID#').find('tbody').detach()
                               
                               var lNewTable=$('<table/>',{"cellspacing":"0","cellpadding":"0","border":"0","class":"apexir_WORKSHEET_DATA"});
                              
                               lNewTable.append($('<tr/>').append(lTH));
                              
                               lTD.each(function(i){
                                lNewTable.append( $('<tr/>').append( $(this) ) );
                               });
                               lNewTable.append( $('<tr/>').append( $('<td/>',{"text":"\u00A0"}) ) );
                              
                               $('#report_data_#REGION_ID#').append(
                                $('<tr/>').append(
                                 $('<td valign="top"/>').append(lNewTable)
                                ).append(
                                 $('<td valign="top"/>').append(
                                  $('<div/>',{"css":{"overflow-x":"scroll","width":"400"}}).append(
                                   $('<table/>',{"cellspacing":"0","cellpadding":"0","border":"0","class":"apexir_WORKSHEET_DATA"}).append(lBody)
                                  )
                                 )
                                )
                               )
                              }
                              Regards,
                              Jari

                              Edited by: jarola on Jan 6, 2011 7:06 PM
                              • 13. Re: horizontal bar Scroolling.
                                ATD
                                The sooner Microsoft drop IE the better ;) Far too many times, things work nicely in FireFox or Chrome/Iron and then fails completely in IE
                                • 14. Re: horizontal bar Scroolling.
                                  vee
                                  Jari,Andy: Isn't that a lot of JS code just for adding a horizontal scroll bar (No offense intended)?.
                                  To be frank, I can't what all of that does.

                                  The following JS code simply add a horizontal scroll bar to a report(works in IE)

                                  <li>For standard reports*
                                  $('table.report-standard').wrap('<div style="min-width: 300px; _width:300px;overflow-x: auto; display: block; max-width: 500px;">');
                                  <li>and Interactive reports*
                                  $('table.apexir_WORKSHEET_DATA').wrap('<div style="min-width: 300px; _width:300px;overflow-x: auto; display: block; max-width: 500px;">');
                                  Note: Modify numeric values as required
                                  1 2 3 Previous Next