This discussion is archived
6 Replies Latest reply: Apr 20, 2010 2:38 AM by 755361 RSS

horizontal scrolling similar to excel

Tyson Jouglet Expert
Currently Being Moderated
Hey guys,

Today I received a request that I am having trouble getting started with. Our app currently has an interactive report with somewhere around 30 columns. The user would like for the three left most columns to remain locked in the same place but be able to scroll left and right to see the rest of the data in the report. That way when they find the given information they need they can easily click add or edit and continue working without having to scroll back to the left of the report and potentially lose the track of which record they were looking at.

Has anyone had to work on anything like this before?

Edit: The three left most columns contain the edit, add and the Id for the record. They add needs to be within the record due to some sequencing requirements.

Cheers,

Tyson Jouglet

Edited by: Tyson Jouglet on Jan 8, 2009 10:48 AM
  • 1. Re: horizontal scrolling similar to excel
    ATD Guru
    Currently Being Moderated
    Hi Tyson,

    This would actually be rather difficult to achieve. Tables are constructed as rows of cells - each row (the TR tag) is a single object.

    The only way that I could get a fixed first column was to split the data into two side-by-side tables: [http://apex.oracle.com/pls/otn/f?p=267:39]. But this had to be constructed manually, so wouldn't work with IRs (and probably not even standard reports).

    I have had a similar request and, whilst I haven't started working on this yet (it's way down in the list of priorities), my thoughts are:

    You need to use javascript to set columns of cells to either display:none or display:block to hide/show blocks of columns. The user would be provided with buttons that allowed them to move left or right rather than using a scrollbar. On the page would be a javascript variable of, say, 'x' and this would initially be set to 1 (columns being zero-based, 1 is the second column) and the left/right buttons would decrease/increase this by 1. The display setting for each cell in the column would then depend on whether it's position in the TR object is x, x+1, x+2, x+3 - if it is, it's displayed, otherwise it's hidden.

    Not a very nice solution as the user would be used to using the scroll bar to move left/right but it would keep the first column in view.

    Andy
  • 2. Re: horizontal scrolling similar to excel
    Tyson Jouglet Expert
    Currently Being Moderated
    Andy,

    That is exactly what I am looking for. I am going to have some fun with JQuery and see if I can come up with an extension that can make this practical. I am hoping to be able to do something like this:
    $("#myid").scrollable(3);
    This would freeze the first 3 columns and make the rest horizontally scrollable. The only problem is, I will have to encase the table with more html and im not sure how that will affect the rest of the document. We will see what happens...

    Thanks as always,

    Tyson
  • 3. Re: horizontal scrolling similar to excel
    ATD Guru
    Currently Being Moderated
    Hi Tyson,

    If you manage to get something working, please let me know as I may wish to "borrow" it :D

    Regards

    Andy
  • 4. Re: horizontal scrolling similar to excel
    652929 Newbie
    Currently Being Moderated
    I've had this problem a few times in the generall case (no apex). I usually did it by
    having two floating divs with set widths, one table in each. The right div haveing horisontal/vertical scroll.
    That way the "frozen panes" was solved. And then an event on vertical scroll that pulled
    the other div along. Using 4 divs the column headings can be frozen aswell. Essentially one
    div acts as a viewport.

    This works quite nicely untill you get varying row heights, so that your left and right
    table does not align. I haven't been able to find a solution for that, other than
    overriding height or calculating max in both none of with works very well.

    --
    Øyle
  • 5. Re: horizontal scrolling similar to excel
    Tyson Jouglet Expert
    Currently Being Moderated
    Hey Andy,

    So I have come up with version 1 of the scrollable plugin for jQuery. This is by no means finished, I am just exited about the progress. I created an extension that takes two parameters. size and width. size specifies the number of columns you want to remain frozen and width specifies how wide you want the scrollable portion to be. I am having issues with the scrollable part showing up in IE but in FF everything is working as intended. So if anyone has any pointers on how to re factor this or maybe a better way to approach this, I am all ears.

    Here is the plugin code. I saved mine as jQuery.scrollable-1.0.js
    (function($){
         /*
          *   jQuery.scrollable
          *  Version: 1.0
          *   Author: Tyson Jouglet
          *     Date: January 14th, 2009
          *  Purpose: This plugin will allow for certain columns of a table
          *           to remain fixed, while allowing others to scroll horizontally.
          *           This way a report with mass amounts of columns can fit into a
          *           more reasonable space.
          */
         $.fn.scrollable = function(size,width){
              var frozenHTML = '';
              var scrollableHTML = '';
              this.width = (!width) ? '100px' : width;
              //insert our table structure after the item which called the scrollable function
    $('<table id="scrollableContainer"><tr><td><table id="frozen"></table></td><td><div id="scrollable"><table></table></div></td></tr></table>').insertAfter(this);
              //build frozen columns
              //find each row of our table
              $(this).find('tr').each(function(){
                   frozenHTML += '<tr>';
                   //Get all td tags that are <= size. 
                   //Store the HTML and remove the element from the DOM.
                   $(this).find('td:lt('+size+')').each(function(i){
                        frozenHTML += '<td>' + $(this).html() +'</td>';
                        $(this).remove();
                   })
                   frozenHTML += '</tr>';
              });
              //build scrollable columns
              $(this).find('tr').each(function(){
                   scrollableHTML += '<tr>';
                   //get all remaing td tags.
                   $(this).find('td').each(function(i){
                        scrollableHTML += '<td>' + $(this).html() +'</td>';
                        $(this).remove();
                   })
                   scrollableHTML += '</tr>';
              });
              //add the html to the document.
              $(frozenHTML).appendTo('#frozen');
              $(scrollableHTML).appendTo('#scrollable');
              //apply formatting
              $('#frozen').parent().css('vertical-align','top');
              $('#scrollable').parent().css('vertical-align','top');
              $('#scrollable').css('overflow-y','hidden')
                              .css('overflow-x','auto')
                                  .css('width',this.width);
              //remove the rest of the old table.
              $(this).remove();
         }
    })(jQuery);//maintain reference to the jQuery object so we can use $
    here is a sample page.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
         <head>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
              <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
              <script type="text/javascript" src="jQuery.scrollable-1.0.js"></script>
              <script type="text/javascript">
                   $(function(){
                        $('#mytable').scrollable(1,'75px');
                   })
              </script>
              <title>Scrollable Test!</title>
         </head>
         <body>
              <table id="mytable">          
                   <tr>
                        <td>11111</td>
                        <td>22222</td>
                        <td>33333</td>
                        <td>44444</td>
                        <td>55555</td>
                        <td>66666</td>
                   </tr>
                   <tr>
                        <td>11111</td>
                        <td>22222</td>
                        <td>33333</td>
                        <td>44444</td>
                        <td>55555</td>
                        <td>66666</td>
                   </tr>
                   <tr>
                        <td>11111</td>
                        <td>22222</td>
                        <td>33333</td>
                        <td>44444</td>
                        <td>55555</td>
                        <td>66666</td>
                   </tr>
                   <tr>
                        <td>11111</td>
                        <td>22222</td>
                        <td>33333</td>
                        <td>44444</td>
                        <td>55555</td>
                        <td>66666</td>
                   </tr>
                   <tr>
                        <td>11111</td>
                        <td>22222</td>
                        <td>33333</td>
                        <td>44444</td>
                        <td>55555</td>
                        <td>66666</td>
                   </tr>
                   <tr>
                        <td>11111</td>
                        <td>22222</td>
                        <td>33333</td>
                        <td>44444</td>
                        <td>55555</td>
                        <td>66666</td>
                   </tr>               
              </table>
         </body>
    </html>
    Cheers,

    Tyson
  • 6. Re: horizontal scrolling similar to excel
    755361 Newbie
    Currently Being Moderated
    Hello Tyson,

    can you please, please tell me how to implement this code to my IR...

    Thank you a lot!!!!!

    Ajda

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points