This discussion is archived
1 2 3 Previous Next 40 Replies Latest reply: Nov 3, 2011 9:40 PM by Tony F. Go to original post RSS
  • 15. Re: Freeze Pane in Oracle Apex3.2
    835027 Newbie
    Currently Being Moderated
    Hi Andy,

    Its working Gr8!!!!!!!!!

    I have corrected the tables td heights on both tables.

    Thanks a lot again,
    Dhanalakshmi.
  • 16. Re: Freeze Pane in Oracle Apex3.2
    ATD Guru
    Currently Being Moderated
    Yeah!

    You're welcome, Dhanalakshmi

    Andy
  • 17. Re: Freeze Pane in Oracle Apex3.2
    835027 Newbie
    Currently Being Moderated
    I have one more doubt in this..what is the procedure to include veritical scroll bar in the same report.

    Thanks,
    Dhanalakshmi.
  • 18. Re: Freeze Pane in Oracle Apex3.2
    ATD Guru
    Currently Being Moderated
    Look at the posts on and after 11 Jan in this thread: horizontal bar Scroolling.

    My post at "11-Jan-2011 15:41" (GMT/UTC) details how to do that - it will require a new report template

    Andy
  • 19. Re: Freeze Pane in Oracle Apex3.2
    835027 Newbie
    Currently Being Moderated
    Hi can you please show me the exact report template ..
    I have tried with soem of the code changes that you used in report tempalte.But the report is not clear..cant able to read also.

    Thanks,
    dhana
  • 20. Re: Freeze Pane in Oracle Apex3.2
    ATD Guru
    Currently Being Moderated
    At the moment, I don't have access to my OTN workspace to get an example as the site seems to be down :(
  • 21. Re: Freeze Pane in Oracle Apex3.2
    835027 Newbie
    Currently Being Moderated
    Hi,

    can you please get me when you can...

    Thanks,
  • 22. Re: Freeze Pane in Oracle Apex3.2
    ATD Guru
    Currently Being Moderated
    OK - I don't know when that will be as Oracle look like they are having problems with their servers :(
  • 23. Re: Freeze Pane in Oracle Apex3.2
    ATD Guru
    Currently Being Moderated
    OK - here you go

    These are the settings on a custom Report tempate:

    Before Rows:
    <style type="text/css">
    #tableBR {margin:0px; border:0px; padding:0px; table-layout:fixed; white-space:nowrap; width:100%}
    #tableTR {margin:0px; border:0px; padding:0px; table-layout:fixed; white-space:nowrap; width:100%}
    #tableBL {margin:0px; border:0px; padding:0px; table-layout:fixed;}
    #tableTL {margin:0px; border:0px; padding:0px; table-layout:fixed;}
    #tableBR div {margin:0px; border:0px; padding:0px;}
    #tableTR th {white-space:nowrap; text-align:left;}
    #tableTL th {white-space:nowrap; text-align:left;}
    #tableBR td {white-space:nowrap;}
    #tableBL td {white-space:nowrap;}
    #BR {overflow-x:scroll; overflow-y:scroll; padding:0px;}
    #TR {overflow-x:hidden; overflow-y:hidden; padding:0px;}
    #BL {overflow-y:hidden; padding:0px;}
    #TL {overflow-x:hidden; padding:0px;}
    </style>
    <table cellpadding="0" border="0" cellspacing="0" summary="">#TOP_PAGINATION#
    <tr><td>
    <table cellpadding="0" border="0" cellspacing="0" style="border:1px solid #D4D8D9; background-color:#EEEEEE">
      <tr>
        <td style="vertical-align:top"><div id="TL"></div></td>
        <td style="vertical-align:top"><div id="TR"></div></td>
      </tr>
      <tr>
        <td style="vertical-align:top"><div id="BL"></div></td>
        <td style="vertical-align:top"><div id="BR" onscroll="javascript:scrollOthers();">
          <table cellpadding="0" cellspacing="0" class="t18Standard" id="tableBR">
          <style type="text/css">
          #tableBR {margin:0px; border:0px; padding:0px; table-layout:fixed; white-space:nowrap; width:100%}
          #tableTR {margin:0px; border:0px; padding:0px; table-layout:fixed; white-space:nowrap; width:100%}
          #tableBL {margin:0px; border:0px; padding:0px; table-layout:fixed;}
          #tableTL {margin:0px; border:0px; padding:0px; table-layout:fixed;}
          #tableBR div {margin:0px; border:0px; padding:0px;}
          #tableTR th {white-space:nowrap; text-align:left;}
          #tableTL th {white-space:nowrap; text-align:left;}
          #tableBR td {white-space:nowrap;}
          #tableBL td {white-space:nowrap;}
          #BR {overflow-x:scroll; overflow-y:scroll; padding:0px;}
          #TR {overflow-x:hidden; overflow-y:hidden; padding:0px;}
          #BL {overflow-y:hidden; padding:0px;}
          #TL {overflow-x:hidden; padding:0px;}
          </style>
          <table cellpadding="0" border="0" cellspacing="0" summary="">#TOP_PAGINATION#
          <tr><td>
          <table cellpadding="0" border="0" cellspacing="0" style="border:1px solid #D4D8D9; background-color:#EEEEEE">
            <tr>
              <td style="vertical-align:top"><div id="TL"></div></td>
              <td style="vertical-align:top"><div id="TR"></div></td>
            </tr>
            <tr>
              <td style="vertical-align:top"><div id="BL"></div></td>
              <td style="vertical-align:top"><div id="BR" onscroll="javascript:scrollOthers();">
          <table cellpadding="0" cellspacing="0" class="t18Standard" id="tableBR">
    Column Heading Template:
    <th class="t18ReportHeader"#ALIGNMENT# id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>
    Before Each Row:
    <tr #HIGHLIGHT_ROW#>
    Column Template 1:
    <td #ALIGNMENT# headers="#COLUMN_HEADER#" class="t18data">#COLUMN_VALUE#</td>
    After Each Row:
    </tr>
    After Rows:
          </table>
        </div></td>
      </tr>
    </table><div class="t18CVS">#EXTERNAL_LINK##CSV_LINK#</div></td></tr>#PAGINATION#</table>
    <script type="text/javascript">
    var tl = document.getElementById("TL");
    var tr = document.getElementById("TR");
    var bl = document.getElementById("BL");
    var br = document.getElementById("BR");
    var rh = 25;
    function setRowHeight(h)
    {
      rh = h;
    }
    function setWidths()
    {
      var tBR = br.getElementsByTagName("TABLE")[0];
      var tot = 0;
      var brRows = tBR.rows;
      var c;
      var r;
      for (r = 0; r < brRows.length; r++)
      {
        brRows[r].style.height = rh;
        for (c = 0; c < brRows[r].cells.length; c++)
        {
          if (w[c] == 0)
          {
            brRows[r].cells[c].style.display = "none";
          }
          else
          {
            brRows[r].cells[c].style.width = w[c];
          }
        }
      }
    }
    function splitTable(fixedColumns)
    {
      var tBR = br.getElementsByTagName("TABLE")[0];
      var tBRRow1 = tBR.rows[0];
      var tBRRow1Clone = tBR.rows[0].cloneNode(true);
      var tTR = tBR.cloneNode(false);
      tTR.id = "tableTR";
      tr.appendChild(tTR);
      tTR.appendChild(tBRRow1Clone);
      tr.innerHTML += "";
      var tBRBody = tBR.tBodies[0];
      tBRBody.removeChild(tBRRow1);
      br.innerHTML += "";
      tTR = document.getElementById("tableTR");
      var tTL = tTR.cloneNode(false);
      tl.appendChild(tTL);
      tTL.id = "tableTL";
      var tTRRow1 = tTR.rows[0];
      var tTRRow1Clone = tTRRow1.cloneNode(false);
      tTL.appendChild(tTRRow1Clone);
      
      var fCol;
      var tTRRow1Cell1;
      var tTRRow1Cell1Clone;
      for (fCol = 0; fCol < fixedColumns; fCol++)
      {
        tTRRow1Cell1 = tTRRow1.cells[0];
        tTRRow1Cell1Clone = tTRRow1Cell1.cloneNode(true);
        tTRRow1Clone.appendChild(tTRRow1Cell1Clone);
        tTR.rows[0].deleteCell(0);
      }
       
      tTL = document.getElementById("tableTL");
      tl.innerHTML += "";
      tr.innerHTML += "";
    
      var tBLClone = tBR.cloneNode(false);
      bl.appendChild(tBLClone);
      tBLClone.id = "tableBL";
      tBL = document.getElementById("tableBL");
      tBR = document.getElementById("tableBR");
      var rows = tBR.rows;
      var r;
      var cClone;
      var rClone;
      var tBLRow;
      for (r = 0; r < rows.length; r++)
      {
        rClone = tBR.rows[r].cloneNode(false);
        rBLRow = tBL.appendChild(rClone);
        for (fCol = 0; fCol < fixedColumns; fCol++)
        {
          cClone = tBR.rows[r].cells[0].cloneNode(true);
          rBLRow.appendChild(cClone);
          tBR.rows[r].deleteCell(0);
        }
      }
      br.innerHTML += "";
      bl.innerHTML += "";
      var tlWidth = 0;
      for (fCol = 0; fCol < fixedColumns; fCol++)
      {
        tlWidth = tlWidth + w[fCol];
      }
    
      document.getElementById("tableTL").style.width = tlWidth + "px";
      document.getElementById("tableBL").style.width = tlWidth + "px";
    }
    function scrollOthers()
    {
      tr.scrollLeft = br.scrollLeft;
      bl.scrollTop = br.scrollTop;
    }
    function setDivHeight(h)
    {
      br.style.height = h;
      bl.style.height = h - 18;
    }
    function setDivWidth(w)
    {
      br.style.width = w;
      tr.style.width = w - 18;
    }
    </script>
    Next Page Template:
    <a href="#LINK#" class="t18pagination">#PAGINATION_NEXT# ></a>
    Previous Page Template:
    <a href="#LINK#" class="t18pagination"><#PAGINATION_PREVIOUS#</a>
    Next Set Template:
    <a href="#LINK#" class="t18pagination">#PAGINATION_NEXT_SET#>></a>
    Previous Set Template
    <a href="#LINK#" class="t18pagination"><<#PAGINATION_PREVIOUS_SET#</a>
    On the Report's region, add the following into the Region Header:
    <script type="text/javascript">
    var w = new Array(150,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100);
    </script>
    That sets up an array of the column widths. Make sure that each column's width is wide enough for the widest content within that column

    On the report's region, add the following into the Region Footer:
    <script type="text/javascript">
    setDivHeight(300);
    setDivWidth(600);
    setRowHeight(25);
    setWidths();
    splitTable(3);
    </script>
    setDivHeight is the height of the vertical scroll
    setDivWidth is the width of the horizontal scroll
    setRowHeight is the height for ALL rows in all tables
    setWidths() sets the widths of all columns using the array
    splitTable sets the number of columns to "freeze" on the left


    Andy
  • 24. Re: Freeze Pane in Oracle Apex3.2
    835027 Newbie
    Currently Being Moderated
    Hi Andy,

    Horizantal Scrollbar is disabled.I think this is beacuse of setWidths() function is not working properly.
    and if i include splittable(1) throwing an Java script exception.


    Thanks,
    Dhanalakshmi.
  • 25. Re: Freeze Pane in Oracle Apex3.2
    ATD Guru
    Currently Being Moderated
    Hi,

    I've just updated my test page to freeze one column only: http://apex.oracle.com/pls/apex/f?p=267:90

    That works ok as far as I can see - I get no javascript errors

    The scrollbar may be disabled if the report DIV is wide enough to show all of the columns.

    setWidths works properly in my version - why do you think it is not working for you? What errors do you get?
  • 26. Re: Freeze Pane in Oracle Apex3.2
    835027 Newbie
    Currently Being Moderated
    Hi,

    I dont thing the setWidths function working for me.Because even if i remove the function also, iam getting the report with the column values cut by edges. only half of the values are showing in the report region.And

    while including splittable(1) function, getting an error "rows.0 is not null or not an obejct".

    Thanks,
    Dhana
  • 27. Re: Freeze Pane in Oracle Apex3.2
    ATD Guru
    Currently Being Moderated
    rows.0 is not part of the javascript. Did you copy and paste the code or type it manually into the settings?
  • 28. Re: Freeze Pane in Oracle Apex3.2
    835027 Newbie
    Currently Being Moderated
    FYI,

    I just made a copy and paste...

    Thanks,
    Dhana
  • 29. Re: Freeze Pane in Oracle Apex3.2
    ATD Guru
    Currently Being Moderated
    OK - what do you have for these bits:
    >
    On the Report's region, add the following into the Region Header:
    <script type="text/javascript">
    var w = new Array(150,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100);
    </script>

    That sets up an array of the column widths. Make sure that each column's width is wide enough for the widest content within that column

    On the report's region, add the following into the Region Footer:
    <script type="text/javascript">
    setDivHeight(300);
    setDivWidth(600);
    setRowHeight(25);
    setWidths();
    splitTable(3);
    </script>
    >

    Also, how many columns do you have on your report. The array that I have above is for 17 columns, you should only include column widths for the number of columns you have on your report.

Legend

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