1 2 3 Previous Next 40 Replies Latest reply: Nov 3, 2011 11:40 PM by Tony F. Go to original post RSS
      • 15. Re: Freeze Pane in Oracle Apex3.2
        835027
        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
          Yeah!

          You're welcome, Dhanalakshmi

          Andy
          • 17. Re: Freeze Pane in Oracle Apex3.2
            835027
            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
              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
                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
                  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
                    Hi,

                    can you please get me when you can...

                    Thanks,
                    • 22. Re: Freeze Pane in Oracle Apex3.2
                      ATD
                      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
                        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
                          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
                            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
                              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
                                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
                                  FYI,

                                  I just made a copy and paste...

                                  Thanks,
                                  Dhana
                                  • 29. Re: Freeze Pane in Oracle Apex3.2
                                    ATD
                                    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.