1 2 Previous Next 26 Replies Latest reply on Nov 19, 2009 6:34 AM by ATD

    split pane in table report

    MarkPP
      Hello,
      I have read on the forum of ways to freeze the header row of a table report in APEX, so that the header row freezes and the data will scroll. Is it possible to freeze the header and first two data rows of the table report, similar to a split pane in Excel, but using APEX?

      Thank you for any help you can provide.

      Mark
        • 1. Re: split pane in table report
          ATD
          Hi Mark,

          In this thread Freeze the header and scroll only the data rows like in excel. there is a SplitTable function. This is hardcoded to just move the first row into the header table (var tBRRow1 = tBR.rows[0];). Whilst I have not tried it, it should be possible to put everything other than the first line of this function into a loop (note that the code should always refer to row 0 as once a row has been moved it is deleted, so the next row becomes row 0) so that you could move as many rows as you wanted.

          Andy

          Edited by: ATD on 11-Nov-2009 16:54
          • 2. Re: split pane in table report
            MarkPP
            Andy,

            Is this the portion of code you are speaking about that calls splitTable() ?

            Thank you,
            Mark


            The NEW After Rows is:

            </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");
            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++)
            {
            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()
            {
            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 tTRRow1Cell1 = tTRRow1.cells[0];
            var tTRRow1Clone = tTRRow1.cloneNode(false);
            var tTRRow1Cell1Clone = tTRRow1Cell1.cloneNode(true);
            tTL.appendChild(tTRRow1Clone);
            tTRRow1Clone.appendChild(tTRRow1Cell1Clone);
            tTL = document.getElementById("tableTL");
            tTR.rows[0].deleteCell(0);
            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);
            cClone = tBR.rows[r].cells[0].cloneNode(true);
            rBLRow = tBL.appendChild(rClone);
            rBLRow.appendChild(cClone);
            tBR.rows[r].deleteCell(0);
            }
            br.innerHTML += "";
            bl.innerHTML += "";
            }
            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;
            }
            setWidths();
            splitTable();
            </script>
            • 3. Re: split pane in table report
              ATD
              Hi,

              That code is for when you want to freeze the first column as well. I was refering to:
              function splitTable()
              {
                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");
                tr.innerHTML += "";
              }
              which moves the first row (which would be the headers) into a separate table above the report. So, to move more than one row, we add in a loop:
              function splitTable()
              {
                var tBR = br.getElementsByTagName("TABLE")[0];
                for (var xx = 0; xx < 3; xx++)
                {
                  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");
                  tr.innerHTML += "";
                }
              }
              which should move the headers plus two data rows

              Andy
              1 person found this helpful
              • 4. Re: split pane in table report
                MarkPP
                 
                • 5. Re: split pane in table report
                  MarkPP
                   
                  • 6. Re: split pane in table report
                    Gussay
                    I can't see your posting here either.

                    posting to forum
                    Do you have some markup in there?

                    encase code with
                    Put your code here.[/code] (use [ square brackets ] on both tags).
                    
                    
                    Gus..
                    
                    Edited by: Gussay on Nov 14, 2009 8:04 PM                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                    1 person found this helpful
                    • 7. Re: split pane in table report
                      MarkPP
                       
                      • 8. Re: split pane in table report
                        MarkPP
                        I have something in the code I am Trying to post and encasing code in tags as gussay suggests.

                        Here is part of what I am trying to post. I am trying to implement the suggestion that Andy had given. But am doing something wrong in my report template. Here is what I have

                        Thank you,
                        Mark



                        Template theme => 18

                        Template class => standard

                        before rows
                        <table cellpadding="0" border="0" cellspacing="0" summary=""  class="t18Standard">
                        <tr><td>
                        <div style="border:1px solid silver; padding:0px; margin:0px; background-color:#EFEFEF;">
                        <table id="reportheadings" class="t18Standard">
                        column heading template
                        <th class="t18ReportHeader" #ALIGNMENT# id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>
                        After column heading
                        </tr></table></div>
                        <div id="reportdiv" style="overflow-y:scroll; border:1px solid silver; padding:0px; margin:0px;">
                        <table id="reportbody" class="t18Standard">
                        Before each Row
                        <tr #HIGHLIGHT_ROW#>
                        column template 1
                        <td #ALIGNMENT# headers="#COLUMN_HEADER#" class="t18data">#COLUMN_VALUE#</td>
                        • 9. Re: split pane in table report
                          MarkPP
                           
                          • 10. Re: split pane in table report
                            MarkPP
                             
                            • 11. Re: split pane in table report
                              MarkPP
                              I don;t understand why I cannot post what I am trying to show for report template After Rows. All I want to do is freeze the header and first two data rows of my table report and scroll through the rest of the data rows.

                              I am encapsulating with
                               
                              
                              function setWidths()
                              ......
                              function splitTable()
                              ......
                              function scrollOthers()
                              .....
                              but it still will not post.
                              • 12. Re: split pane in table report
                                ATD
                                Hi,

                                It will be the &lt; and &gt; characters that are treating your code as actual HTML tags. Copy your code into a text editor and replace &lt; with &amp;lt; and &gt; with &amp;gt; and then it should display correctly.

                                Andy
                                1 person found this helpful
                                • 13. Re: split pane in table report
                                  MarkPP
                                  Andy,
                                  Here is what I have for After Rows of my report template and added the splitTable with loop . I am having troubles as I only have the header row freezing and can scroll vertically through all the data rows.


                                  &lt;/table&gt;
                                  &lt;/div&gt;
                                  &lt;div class="t18CVS"&gt;#EXTERNAL_LINK##CSV_LINK#&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;#PAGINATION#&lt;/table&gt;
                                  &lt;script type="text/javascript"&gt;

                                  function setwidths(w)
                                  {
                                  var t1 = document.getElementById("reportheadings").rows[0].cells;
                                  var t2 = document.getElementById("reportbody").rows[0].cells;
                                  var k;
                                  for (k = 0; k &lt; t2.length; k++)
                                  {
                                  t1[k].style.width = w[k];
                                  t2[k].style.width = w[k];
                                  }
                                  }

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

                                  function splitTable()
                                  {
                                  var tBR = br.getElementsByTagName("TABLE")[0];
                                  for (var xx = 0; xx &lt; 3; xx++)
                                  {
                                  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");
                                  tr.innerHTML += "";
                                  }
                                  }

                                  &lt;/script&gt;



                                  -----

                                  This is what I have for Region footer
                                  <script type="text/javascript">
                                  setwidths(new Array(200,200,200,200,200));
                                  setdivheight(300);
                                  </script>


                                  I am not clear on where to call splitTable() from, as everywhere I have tried, only freezes just the header.

                                  Thank you for some guidance.

                                  Mark
                                  • 14. Re: split pane in table report
                                    ATD
                                    Hi Mark,

                                    I think we've got two types of scrolling reports mixed up somehow - there is one that sets the header as part of the report template itself and the other does the splitTable() (it's actually a horizontal and vertical scrolling report).

                                    It may be easiest if I just create a new version just for this requirement. What theme are you using and what is the normal report template you would base this on?

                                    Andy
                                    1 2 Previous Next