13 Replies Latest reply: Mar 20, 2013 4:20 PM by Sc0tt RSS

    How to freeze Headers of tabuar report and Forms in APEX 4.1

    906150
      Hi All,

      I have created tabular form with vertical scroll bar using tag.

      <div style="overflow: auto; height: 450px;">....</div>

      My Problem is that when I scroll down the tabular form header goes up and I am unable to match right column with header. Is there any
      way to fix the header and scroll should work only for rows?

      Thanks In advance.

      -Shail
        • 1. Re: How to freeze Headers of tabuar report and Forms in APEX 4.1
          swesley_perth
          Hi,

          This isn't quite solving your problem, but it's a step in the right direction. You may be able to fiddle with the report template instead of the page template like I have to fix the scrolling.

          http://apex.oracle.com/pls/otn/f?p=60132:FS

          Check out the second tab to view the hacks I made in the page template.

          Scott
          • 2. Re: How to freeze Headers of tabuar report and Forms in APEX 4.1
            Kiran Pawar
            Hello Shail,

            Following is my approach based on the [url http://dbswh.webhop.net/dbswh/f?p=BLOG:READ:0::::ARTICLE:2074100346256893]blog post by @Jari Laine:
            <ul>
            <li>
            Create new template as a copy standard report template and give a new name to it.
            Edit new template and make following changes:
            <ul>
            <li>
            Before Rows:
            <table cellpadding="0" border="0" cellspacing="0" summary="" #REPORT_ATTRIBUTES# id="report_#REGION_STATIC_ID#">#TOP_PAGINATION#
            <tr><td><div id="#REGION_STATIC_ID#_top">
            <table cellpadding="0" border="0" cellspacing="0" summary="" class="report-standard"></table>
            </div></td></tr>
            <tr><td><div id="#REGION_STATIC_ID#_bottom">
            <table cellpadding="0" border="0" cellspacing="0" summary="" class="report-standard">
            </li>
            <li>
            After Rows:
            </table></div><div class="CVS">#EXTERNAL_LINK##CSV_LINK#</div></td></tr>
            #PAGINATION#
            </table>
            </li>
            </ul>
            </li>
            <li>
            Edit Report attributes and change Report Template to your new template and Pagination Scheme to No Pagination Selected and Number of Rows to say 100.
            </li>
            <li>
            Add to your tabular form page attributes:
            <ul>
            <li>
            JavaScript Function and Global Variable Declaration:
            function setVscroll(pReqId,pHeight){
             var t=$("#"+pReqId+"_top");
             var b=$("#"+pReqId+"_bottom");
             b.find("table tr:first").children("th").each(function(i){
              var w=$(this).width();
              $(this).width(w);
              b.find("table tr:eq(1)").children("td").eq(i).width(w);
             });
             t.find("table").append(b.find("table tr:first")).find("tr").append(
              $("<th/>",{"class":"header","css":{"padding":0,"width":"16px","border-left":"1px solid #CCC"}})
             );
             t.find("table").css({"width":"100%"});
             b.find("table").css({"width":"100%"});
             b.css({"overflow-y":"scroll","height":pHeight,"border-bottom":"1px solid #CCC","overflow-x":"hidden"});
            
             /* scroll */
             b.scroll(function(){
               b.scrollTop(this.scrollTop);
              });
            }
            </li>
            <li>
            Execute when Page Loads:
            execVScroll();
            </li>
            </ul>
            </li>
            <li>
            Add the following to your Region Footer section of your tabular form region :
            <script type="text/javascript">
            function execVScroll() {
            var pregID = '#REGION_ID#';
            setVscroll(pregID,200);
            }
            </script>
            </li>
            </ul>

            Here is the example:

            http://apex.oracle.com/pls/apex/f?p=61797:2

            I have done very less modification in the javascript code given by Jari who is top contributor in this forum.
            Here is one of his blog posts that might interest you:

            http://dbswh.webhop.net/dbswh/f?p=BLOG:READ:0::::ARTICLE:303800346302715

            Download the sample application or you can see the working example.

            Hope it helps,
            Regards,
            Kiran
            • 3. Re: How to freeze Headers of tabuar report and Forms in APEX 4.1
              JPL_12
              I used the setup as described by Kiran, and it works nice.. most of the time.

              Only one issue: initially I set the 'Number of Rows' in the Report Region to 200.
              For some datasets this was not enough, so I increased it to 600.
              But strangely this didn't have any effect.

              I had to to a reset of Internet explorer, then it was fixed.

              All other changes I make to Apex pages are effective immediately, but this one seems to 'hang' in a cache.

              Anyone else had this behaviour?
              • 4. Re: How to freeze Headers of tabuar report and Forms in APEX 4.1
                721928
                Kiran,

                Thank you very much for this step by step example. This works pretty well in my tabular form, but I do have a question and was wondering if you (and other forum users) can shed some light.

                I have a tabular form with some display only fields and some editable fields. For example, columns A - G are display only fields (Display as Text - escape special characters, does not save state) and other fields that come after are editable. When there is data in the display only filed, every thing looks fine - column headers are aligned with the tabular form column data. But when there is no data in, one or more of, these display only fields, the tabular form columns/data shift to the left and now the column header does not align with the column data.

                How do I set the column widths so the column header aligns with the column data?

                Thanks,
                DP
                • 5. Re: How to freeze Headers of tabuar report and Forms in APEX 4.1
                  721928
                  Does anyone have an answer for aligning the column headers with the tabular form data question above?

                  Thanks,
                  DP
                  • 6. Re: How to freeze Headers of tabuar report and Forms in APEX 4.1
                    603257
                    I raised this as a request on the 4.2 wish list! :)
                    • 7. Re: How to freeze Headers of tabuar report and Forms in APEX 4.1
                      Kiran Pawar
                      Hi DP,

                      >
                      Thank you very much for this step by step example. This works pretty well in my tabular form, but I do have a question and was wondering if you (and other forum users) can shed some light.
                      >

                      I am glad that this example was helpful.

                      >
                      I have a tabular form with some display only fields and some editable fields. For example, columns A - G are display only fields (Display as Text - escape special characters, does not save state) and other fields that come after are editable. When there is data in the display only filed, every thing looks fine - column headers are aligned with the tabular form column data. But when there is no data in, one or more of, these display only fields, the tabular form columns/data shift to the left and now the column header does not align with the column data.

                      How do I set the column widths so the column header aligns with the column data?
                      >

                      Why don't you post a new question thread for this?

                      As @Paul J MacMillan has said:

                      Posting follow-ups to ancient threads/departed users is NOT an effective way of getting help:
                      <ul>
                      <li>Other users may ignore the thread if it is closed</li>
                      <li>Your assumption that the questions are related may be incorrect, leading to confusion about the nature of the problem and potential solutions</li>
                      <li>Watches on the thread may have expired, so the original participants may be unaware of the new post, or they may no longer be active on the forum</li>
                      <li>You have no ability to mark posts as helpful or correct</li>
                      </ul>

                      Post your question as a new thread, including at least the following information:
                      <ul>
                      <li>Full APEX version</li>
                      <li>Full DB/version/edition/host OS</li>
                      <li>Web server architecture (EPG, OHS or APEX listener/host OS)</li>
                      <li>Browser(s) and version(s) used</li>
                      <li>Theme</li>
                      <li>Template(s)</li>
                      <li>Region/item type(s)</li>
                      <li>Links to related posts and threads (using the methods in the FAQ)</li>
                      </ul>

                      If you are using APEX 4.2 version then the best is you can create an example on [url http://apex.oracle.com/i/index.html]Online APEX and share the credentials.

                      Hope it helps,
                      Regards,
                      Kiran
                      • 8. Re: How to freeze Headers of tabuar report and Forms in APEX 4.1
                        721928
                        Thanks Kiran - I was too excited to have found a solution that worked, that I completed ignored the fact that the thread was closed. Posting a new question now - and will reference this solution.
                        • 10. Re: How to freeze Headers of tabuar report and Forms in APEX 4.1
                          GLowy999
                          Thank you for this post - but I was unable to make this work for Interactive Reports in 4.0.2.

                          Where can I change the templates for the interactive reports?
                          • 11. Re: How to freeze Headers of tabuar report and Forms in APEX 4.1
                            Kiran Pawar
                            Hello user6553221,

                            Please read the above post regarding Posting follow-ups to ancient threads :

                            {message:id=10742379}

                            >
                            Thank you for this post - but I was unable to make this work for Interactive Reports in 4.0.2.
                            >

                            For Interactive Reports @Matt Nolan has already developed a plug-in for the same purpose:

                            http://www.theapexfreelancer.com/apex/f?p=APEXFREELANCER:IR_PLUGIN_PACKAGE:0

                            http://apex-plugin.com/oracle-apex-plugins/dynamic-action-plugin/ir-plugin-package_108.html

                            Please read the [url https://wikis.oracle.com/display/Forums/Forums+FAQ]FAQ and [url https://forums.oracle.com/forums/ann.jspa?annID=1324]forum instructions for more information on using OTN forums effectively.

                            Please perform a [url https://forums.oracle.com/forums/search!default.jspa]forum search before posting a question as this will help reduce duplicate threads.

                            Please update your forum profile with a real handle instead of user6553221.

                            Hope it helps!
                            Regards,
                            Kiran
                            • 12. Re: How to freeze Headers of tabuar report and Forms in APEX 4.1
                              968084
                              Please let me know what all I need to change in javascript side

                              Thanks,
                              Rithu
                              • 13. Re: How to freeze Headers of tabuar report and Forms in APEX 4.1
                                Sc0tt
                                Sam22 wrote:
                                Please let me know what all I need to change in javascript side

                                Thanks,
                                Rithu
                                1) Figure it out yourself - don't be a leech.
                                2) Can you not read the other 3 comments telling you not to keep opening old threads?
                                3) Read #2