This discussion is archived
1 2 3 4 Previous Next 57 Replies Latest reply: Oct 25, 2010 12:57 PM by Sc0tt Go to original post RSS
  • 15. Re: Does anyone know how to freeze column headings?
    ATD Guru
    Currently Being Moderated
    Hi Gary,

    Even though it doesn't make sense (a table can be any width), it does seem to matter what the table width is before we start changing column widths.

    I have add a width of 10000px to both the reportheadings and reportbody table tags and this seems to have fixed it. On my sample page ([http://htmldb.oracle.com/pls/otn/f?p=267:42]), I've set every column to 200px. I think that the worst that could happen would be that after the column widths have been applied the table width setting needs to be adjusted - but my page looks ok for now, so I'll leave that out.

    Andy
  • 16. Re: Does anyone know how to freeze column headings?
    greich Newbie
    Currently Being Moderated
    That did it. The columns are all spacing evenly, but at least it all lines up properly.

    Thanks again.
  • 17. Re: Does anyone know how to freeze column headings?
    ATD Guru
    Currently Being Moderated
    Yeah!

    Now we know what we need to do to with the table width, you should be able to specify the proper widths for your columns now.

    Andy
  • 18. Re: Does anyone know how to freeze column headings?
    greich Newbie
    Currently Being Moderated
    As an FYI to anyone who read this, I recommend summing the total of your column widths and adding like 10% when determining the table width. If you go too big, the column widths will be over ruled and the spacing becomes even.

    Thanks again Andy.
  • 19. Re: Does anyone know how to freeze column headings?
    ATD Guru
    Currently Being Moderated
    You're welcome, Gary

    and thanks for the tip

    Andy
  • 20. Horizontal scrolling report
    ATD Guru
    Currently Being Moderated
    Hi Gary,

    OK - here's my first attempt at getting a report to scroll horizontally but with the first column fixed: [http://apex.oracle.com/pls/otn/f?p=267:46] For a change, it actually seems to work better in IE than FF!

    Let me know what you think

    Andy
  • 21. Re: Horizontal scrolling report
    srikavi Explorer
    Currently Being Moderated
    Hi ATD,
    Very nice, I have done a sample with the same code provided by you and its working fine.
    The total thread is very informative and intresting.

    Thank you very much

    bye
    Srikavi
  • 22. Re: Horizontal scrolling report
    ATD Guru
    Currently Being Moderated
    Hi Srikavi,

    I'm still trying to improve on it, but so far it seems to be ok.

    When it's as good as I can get it, I'll update this thread with the code that I've used. As you may have seen, it wasn't that difficult to do after all!

    For those that use JQuery, Tyler has posted some code here: Re: horizontal scrolling similar to excel - this is also a work in progress

    Andy
  • 23. Re: Horizontal scrolling report
    greich Newbie
    Currently Being Moderated
    Andy,

    Would you mind posting your report template?

    Thanks,

    Gary
  • 24. Re: Horizontal scrolling report
    ATD Guru
    Currently Being Moderated
    Hi Gary,

    OK - I'm not 100% happy with it yet, but this is what I have done:

    In my app (which is based on Theme 18), I have created a new report template based on a copy of the "Standard" template (I think any could be used, but this is the one I picked). On this new template, I have updated 2 settings:

    Before Rows - OLD version:
    <table cellpadding="0" border="0" cellspacing="0" summary="">#TOP_PAGINATION#
    <tr><td><table cellpadding="0" border="0" cellspacing="0" summary="" class="t18Standard" id="#REGION_STATIC_ID#">
    Before Rows - NEW version:
    <style type="text/css">
    #table1 th {white-space: nowrap}
    #table1 td {white-space: nowrap}
    #table2 th {white-space: nowrap}
    #table2 td {white-space: nowrap}
    </style>
    <table cellpadding="0" cellspacing="0" summary="" style="padding:0px; border-collapse:collapse;">#TOP_PAGINATION#
    <tr><td>
      <tr>
        <td style="vertical-align:top; background-color:#EFEFEF; padding:0px; border:1px solid darkgray;">
          <div id="d1" style="background-color:white; margin:0px; border:0px; padding:0px;">
          </div>
        </td>
        <td style="vertical-align:top; padding:0px; border:1px solid darkgray;">
          <div id="d2" style="overflow-X:scroll; margin:0px; border:0px; padding:0px; border-right:1px solid darkgray;">
    <table cellpadding="0" border="0" cellspacing="0" summary="" class="t18Standard" id="table2">
    After Rows - OLD version:
    </table><div class="t18CVS">#EXTERNAL_LINK##CSV_LINK#</div></td></tr>#PAGINATION#</table>
    After Rows - NEW version:
          </div>
        </td>
      </tr>
    </table><div class="t18CVS">#EXTERNAL_LINK##CSV_LINK#</div></td></tr>#PAGINATION#</table>
    <script type="text/javascript">
    var d1 = document.getElementById("d1");
    var t2 = document.getElementById("table2");
    var t1 = t2.cloneNode(false);
    t1.style.width = "100%";
    t1.id = "table1";
    d1.appendChild(t1);
    var t2Rows = t2.rows;
    var k;
    var r;
    var c;
    for (k = 0; k < t2Rows.length; k++)
    {
     r = document.createElement("TR");
     t1.appendChild(r);
     c = t2Rows[k].cells[0].cloneNode(true);
     r.appendChild(c);
     t2Rows[k].deleteCell(0);
    }
    d1.innerHTML += "";
    </script>
    And, finally, on the report's region, I have added the following into the Region Header:
    <style type="text/css">
    #d1 {width:75px;}
    #d2 {width:600px;}
    </style>
    The principle is: Create a 2 column table with the left and right cells containing a DIV. Into the div on the right, I output the report using standard Apex functionality. Then, the script below the report (which will run as soon as the page is loaded) will create a new table, based on a clone of the report table (to pick up styles etc), and put this into the left DIV. Then it loops through every row in the right table and copies a clone of the first cell into the left table, then deletes it from the right table. When this is done, the table is split into two. The right table is scrollable, the left is not due to the overflow styles.

    Note that I have had to add a style to ensure that cell data does not wrap in either table - this is to ensure that the rows line up.

    I have tested this in IE6, IE7 and FF3.0.5 and it seems ok. It will also work with pagination and sorting PROVIDED partial page refresh is disabled.

    I have applied the same changes to a local app, which is v1.6 and it worked first time, so, hopefully, it should work in any version and any browser (but I only have IE and FF, so can't say for certain!).

    I have used the same template on [http://htmldb.oracle.com/pls/otn/f?p=267:47] but have changed the Region Header styles to:
    <style type="text/css">
    #d1 {width:175px;}
    #d2 {width:400px;}
    </style>
    Andy
  • 25. Re: Horizontal scrolling report
    greich Newbie
    Currently Being Moderated

    Andy, I am so close I can feel it.

    I have been able to merge some of the vertical scrolling elements with the horizontal elements. I have my frozen headers split into 2 as well as the columns.


    {color:#ff0000}*How does one make two reports scroll using the same scroll bar?*{color}


    {color:#ff0000} *{color:#000000}As a note, I have stopped setting the height until after I get my horizontal working.
    {color}*{color}


    Below is my code from template. Anything not included is blank in my template.



    {color:#ff0000}Before Rows:{color}



    <table border="0" cellpadding="0" cellspacing="0" summary="" class="t20Report" #REPORT_ATTRIBUTES# id="report_#REGION_STATIC_ID#">#TOP_PAGINATION#
    <width=2750>
    <tr><td>

    <style type="text/css">
    #tableHead td {padding:0px;}
    </style>

    <table id="tableHead" class="tableHead" "border:1px solid silver; padding:0px; margin:0px; " cellspacing=0 cellpadding=0>
    <tr>
    <td style="vertical-align:top;">
    <div id="h1" "border:1px solid silver; padding:0px; margin:0px;width:150;">
    </div>
    </td>
    <td style="vertical-align:top;">
    <div id=reporthead" style="overflow-y:scroll;overflow-x:scroll;border:1px solid silver; padding:0px; margin:0px; background-color:#EFEFEF;width:500px;">
    <table id="reportheadings" class="t20Standard" style="width:2750px;">




    {color:#ff0000}Column Heading Template:
    {color}


    <th class="t20ReportHeader"#ALIGNMENT# id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>


    {color:#ff0000}After Column Heading:
    {color}


    </td></tr></Table></tr></table></div>

    <style type="text/css">
    #tableMain td {padding:0px;}
    </style>

    <table id="tableMain" class="tableMain" "border:1px solid silver; padding:0px; margin:0px; " cellspacing=0 cellpadding=0>
    <tr>
    <td style="vertical-align:top;">
    <div id="d1" "border:1px solid silver; padding:0px; margin:0px;width:150;">
    </div>
    </td>
    <td style="vertical-align:top;">
    <div id="reportdiv" style="overflow-y:scroll;overflow-x:scroll; border:1px solid silver; padding:0px; margin:0px; width:500px;">
    <table id="reportbody" class="t20StandardAlternatingRowColors t20Report" style="width:2750px;" >




    {color:#ff0000}Before Each Row:
    {color}


    <tr #HIGHLIGHT_ROW#>


    {color:#ff0000}Column Template 1:
    {color}


    <td headers="#COLUMN_HEADER_NAME#" #ALIGNMENT# class="t20data">#COLUMN_VALUE#</td>


    {color:#ff0000}Column Template 1 condition:{color} Use for Odd Numbered Rows


    {color:#ff0000}Column Template 2:
    {color}


    <td headers="#COLUMN_HEADER_NAME#" #ALIGNMENT# class="t20dataalt">#COLUMN_VALUE#</td>


    {color:#ff0000}Column Template 2 Condition: {color}Use Based on Pl/SQL Expression

    {color:#ff0000}After Each Row:{color}

    </tr>
    {color:#ff0000}After Rows:{color}

    </td></tr></table></table>
    </div>
    <div class="t20CVS">#EXTERNAL_LINK##CSV_LINK#</div></td></tr></table>
    <script type="text/javascript">
    function setwidths(w)
    {
    var head2 = document.getElementById("reportheadings");
    var table2 = document.getElementById("reportbody");
    var d1 = document.getElementById("d1");
    var h1 = document.getElementById("h1");

    var t2Clone = table2.cloneNode(true);
    d1.appendChild(t2Clone);

    var table1 = d1.getElementsByTagName("TABLE")[0];
    table1.id = 'FrozenColumn';

    table1.style.width = 150;

    var h2Clone = head2.cloneNode(true);
    h1.appendChild(h2Clone);

    var head1 = h1.getElementsByTagName("TABLE")[0];
    head1.id = 'FrozenColumnHead';

    head1.style.width = 150;

    var head1rows = head1.rows;
    var head2rows = head2.rows;
    var table1rows = table1.rows;
    var table2rows = table2.rows;

    var head1cells;
    var head2cells;
    var table1cells;
    var table2cells;

    var colNum;
    var rowNum;

    for (rowNum = 0; rowNum < head2rows.length; rowNum++)
    {
    head2cells = head2rows[rowNum].cells;
    head1cells = head1rows[rowNum].cells;
    head2rows(rowNum).style.height = 75;
    head1rows(rowNum).style.height = 75;
    head2cells[0].style.display = 'none';
    head1cells[0].style.width = w[0];
    for (colNum = 1; colNum < head2cells.length; colNum++)
    {
    head1cells[colNum].style.display = 'none';
    if (w[colNum] == 0)
    {
    head2cells[colNum].style.display = 'none';
    }
    else
    {
    head2cells[colNum].style.width = w[colNum];
    }
    }
    }

    for (rowNum = 0; rowNum < table2rows.length; rowNum++)
    {
    table2cells = table2rows[rowNum].cells;
    table1cells = table1rows[rowNum].cells;
    table2rows(rowNum).style.height = 25;
    table1rows(rowNum).style.height = 25;
    table2cells[0].style.display = 'none';
    table1cells[0].style.width = w[0];
    for (colNum = 1; colNum < table2cells.length; colNum++)
    {
    table1cells[colNum].style.display = 'none';
    if (w[colNum] == 0)
    {
    table2cells[colNum].style.display = 'none';
    }
    else
    {
    table2cells[colNum].style.width = w[colNum];
    }
    }
    }

    }

    function setdivheight(h)
    {
    var d = document.getElementById("reportdiv");
    d.style.height = h;
    var e = document.getElementById("d1");
    e.style.height = h;
    }

    </script>
    </td></tr><tr><td>#PAGINATION#</td></tr></table>

    {color:#ff0000}background color for checked row:{color} #E56717{color:#ff0000}background color for current row:{color} #FDD017
    {color:#ff0000}Pagination Subtemplate stuff hasn't changed from the standard report defaults.

    Comments:{color}
    The below needs to be added to the footer section of the report using this template. Each element of the array represent column width, where a width of 0 will hide the column.

    <script>
    setwidths(new Array(0,150,35,100,50,50,75,75,75,75,75,75,75,75,75,75,75,75,75,75,75,75,75,75,75,75,75,0,0,0));
    setdivheight(290);
    </script>


















  • 26. Re: Horizontal scrolling report
    ATD Guru
    Currently Being Moderated
    Hi Gary,

    I've just emailed you my latest efforts on "Double scrolling". (note that the email system adds "defanghtml_" in style and script tags, so remove theses)

    Ignoring the bits that actually split the data out from the single table...

    You need to have 4 DIVs - top-left ("TL", containing heading for BL column(s)), top-right ("TR", headers), bottom-left ("BL", fixed column(s)) and bottom-right ("BR", the main data table). TR should be as wide as BR - 20 pixels (scrollbar width) and BL should be as high as BR - 20.

    The BR div is the one that has the scrollbars in both directions. The TR and BL divs are set to have overflow:hidden - ie, they don't have scrollbars.

    The BR div should have an onscroll event handler:
    onscroll="javascript:doscroll();"
    which should run:
    function doscroll()
    {
     var BR = document.getElementById("DIV_BR");
     var TR = document.getElementById("DIV_TR");
     var BL = document.getElementById("DIV_BL");
     TR.scrollLeft = BR.scrollLeft;
     BL.scrollTop = BR.scrollTop;
    }
    onscroll, scrollLeft and scrollTop work ok in IE6, IE7 and FF3.0.5, so we can use these to slide the TR and BL div contents by the same scroll amount as for the BR scrollbars.

    So, if I read your code correctly (it didn't come out too well in the post - you should surround your code with {code} tags), you're on the right track (or, at least, thinking in the same way as me!). ie, take the standard Apex generated report, split of the first row into the TL/TR div and split off the first column(s) into the BL div

    Andy
  • 27. Re: Horizontal scrolling report
    greich Newbie
    Currently Being Moderated
    Andy,

    Thanks for the final piece of the puzzle. You are the "man". I have been able to implement the the scrolling script and it works great. After a little bit of clean up (I still have to make sure the tabular form MRU still works), I will post my report template for everyone.

    Three cheers for Andy. :)


    Thanks again,

    Gary
  • 28. Re: Horizontal scrolling report
    ATD Guru
    Currently Being Moderated
    You're welcome, Gary

    I look forward to seeing the template - it'll save me having to do it (I'm so snowed under with work right now, I haven't had a chance to update it since that first mockup!) :D

    Andy
  • 29. Re: Horizontal scrolling report
    greich Newbie
    Currently Being Moderated
    Here is the template for a horizontal/scrolling report.

    A couple of notes about the template:

    1. If the template is going to be used as is for a tabular form, be aware that the number rows is doubled (Most of the first set is hidden). Also, the second set of rows is the one that will contain any screen edits.






    To compensate for this, instead using a loop from 1 to apex_application.g_f01.COUNT in validations and home grown MRU, loop from (apex_application.g_f01.COUNT / 2) + 1 to apex_application.g_f01.COUNT to ensure you looking at the right data.






    2. This version of the template below freezes the first two columns of the report, not just one due to the requirements of the page I built. The code is easy enough to modify to freeze just one column or as many as you need.






    3. Height, Width's and number of columns(see note 4) will need to be adjusted for your needs.






    4. The below needs to be added to the footer section of the report using this template. There is an element in the array for each column of the report and the value in the element represent that column's width. A width of 0 will hide the column. All columns should be set to show in the apex GUI. Please also note that columns that are frozen in this template (see note 2) are the first two visible columns.

    <script>
    setdivheight(290);
    setwidths(new Array(0,150,35,100,50,50,75,75,75,75,75,75,75,75,75,75,75,75,75,75,75,75,75,75,75,75,75,0,0,0));
    </script>



    5. Assume anything not specifically mentioned below is blank.



    {color:#ff0000}Template Name:{color}

    Scrolling Report: Horizontal and Vertical 2900

    {color:#ff0000}Template Class:{color}

    Standard, Alternating Row Colors



    {color:#ff0000}Before Rows:{color}

    <table border="0" cellpadding="0" cellspacing="0" summary="" class="t20Report" #REPORT_ATTRIBUTES# id="report_#REGION_STATIC_ID#">#TOP_PAGINATION#
    <width=2750>
    <tr><td>

    <style type="text/css">
    #tableHead td {padding:0px;}
    </style>

    <table id="tableHead" class="tableHead" "border:1px solid silver; padding:0px; margin:0px; " cellspacing=0 cellpadding=0>
    <tr>
    <td style="vertical-align:top;">
    <div id="h1" style="overflow:hidden;border:1px solid silver; padding:0px; margin:0px;width:200">
    </div>
    </td>
    <td style="vertical-align:top;">
    <div id="reporthead" style="overflow:hidden;border:1px solid silver; padding:0px; margin:0px; background-color:#EFEFEF;width:865px;">
    <table id="reportheadings" class="t20Standard" style="width:2700px;">






    {color:#ff0000}Column Header Template:{color}

    <th class="t20ReportHeader"#ALIGNMENT# id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>
    {color:#ff0000}After Column Heading:{color}

    </td></tr></Table></tr></table></div>

    <style type="text/css">
    #tableMain td {padding:0px;}
    </style>

    <table id="tableMain" class="tableMain" "border:1px solid silver; padding:0px; margin:0px; " cellspacing=0 cellpadding=0>
    <tr>
    <td style="vertical-align:top;">
    <div id="d1" style="overflow:hidden;border:1px solid silver; padding:0px; margin:0px;width:200;">
    </div>
    </td>
    <td style="vertical-align:top;">
    <div id="reportdiv"
    onscroll="javascript:doscroll();" style="overflow-y:scroll;overflow-x:scroll; border:1px solid silver; padding:0px; margin:0px; width:880px;">
    <table id="reportbody" class="t20StandardAlternatingRowColors t20Report" style="width:2700px;" >

    {color:#ff0000}Before Each Row:{color}

    <tr #HIGHLIGHT_ROW#>
    {color:#ff0000}Column Template 1:{color} (Condition: Use for Odd Numbered Rows)

    <td headers="#COLUMN_HEADER_NAME#" #ALIGNMENT# class="t20data">#COLUMN_VALUE#</td>
    {color:#ff0000}Column Template 2:{color} (Condition: Use Based on PL/SQL Expression)

    <td headers="#COLUMN_HEADER_NAME#" #ALIGNMENT# class="t20dataalt">#COLUMN_VALUE#</td>
    {color:#ff0000}After Each Row:{color}

    </tr>
    {color:#ff0000}After Rows:{color} (The Important Stuff)



    </td></tr></table></table>
    </div>
    <div class="t20CVS">#EXTERNAL_LINK##CSV_LINK#</div></td></tr></table>
    <script type="text/javascript">
    function setdivheight(h)
    {
    var d = document.getElementById("reportdiv");
    d.style.height = h + 15;
    var e = document.getElementById("d1");
    e.style.height = h;
    }

    function doscroll()
    {
    var BR = document.getElementById("reportdiv");
    var TR = document.getElementById("reporthead");
    var BL = document.getElementById("d1");
    TR.scrollLeft = BR.scrollLeft;
    BL.scrollTop = BR.scrollTop;
    }

    function setwidths(w)
    {
    var head2 = document.getElementById("reportheadings");
    var table2 = document.getElementById("reportbody");
    var d1 = document.getElementById("d1");
    var h1 = document.getElementById("h1");

    var t2Clone = table2.cloneNode(true);
    d1.appendChild(t2Clone);

    var table1 = d1.getElementsByTagName("TABLE")[0];
    table1.id = 'FrozenColumn';

    table1.style.width = 200;

    var h2Clone = head2.cloneNode(true);
    h1.appendChild(h2Clone);

    var head1 = h1.getElementsByTagName("TABLE")[0];
    head1.id = 'FrozenColumnHead';

    head1.style.width = 200;

    var head1rows = head1.rows;
    var head2rows = head2.rows;
    var table1rows = table1.rows;
    var table2rows = table2.rows;

    var head1cells;
    var head2cells;
    var table1cells;
    var table2cells;

    var colNum;
    var rowNum;

    var x;
    var r;
    var c;

    for (rowNum = 0; rowNum < head2rows.length; rowNum++)
    {
    head2cells = head2rows[rowNum].cells;
    head1cells = head1rows[rowNum].cells;
    head2rows(rowNum).style.height = 100;
    head1rows(rowNum).style.height = 100;
    head2cells[0].style.display = 'none';
    head1cells[0].style.width = w[0];
    head2cells[1].style.display = 'none';
    head1cells[1].style.width = w[1];
    for (colNum = 2; colNum < head2cells.length; colNum++)
    {
    head1cells[colNum].style.display = 'none';
    if (w[colNum] == 0)
    {
    head2cells[colNum].style.display = 'none';
    }
    else
    {
    head2cells[colNum].style.width = w[colNum];
    }
    }
    }

    for (rowNum = 0; rowNum < table2rows.length; rowNum++)
    {
    table2cells = table2rows[rowNum].cells;
    table1cells = table1rows[rowNum].cells;
    table2rows(rowNum).style.height = 40;
    table1rows(rowNum).style.height = 40;
    table2cells[0].style.display = 'none';
    table1cells[0].style.width = w[0];
    table2cells[1].style.display = 'none';
    table1cells[1].style.width = w[1];
    for (colNum = 2; colNum < table2cells.length; colNum++)
    {
    table1cells[colNum].style.display = 'none';
    if (w[colNum] == 0)
    {
    table2cells[colNum].style.display = 'none';
    }
    else
    {
    table2cells[colNum].style.width = w[colNum];
    }
    }
    }

    for (rowNum = 0; rowNum < table1rows.length; rowNum++)
    {
    r = table1rows[rowNum];
    c = r.cells;
    for (x = c.length - 1; x > 1; x--)
    {
    r.deleteCell(x);
    }
    }
    }
    </script>
    </td></tr><tr><td>#PAGINATION#</td></tr></table>



    {color:#ff0000}Pagination Subtemplates:{color} Same as standard report.

    Enjoy!!!!

Legend

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