7 Replies Latest reply: May 7, 2013 2:29 PM by jariola RSS

    Freeze Column

    787331
      I was able to implement the functionality in a report using template but I am unable to figure out a way by which I can implement this in IR report as in IR we can not choose a template. I believe that this problem has been asked many times in this forum. I went through some of the link but it did not help much.

      Can anyone help me out on this?

      Not sure if there is any limitation / problem with implementing Freeze Column functionality in IR in Oracle apex 4.0

      Regards
      Ved
        • 1. Re: Freeze Column
          TexasApexDeveloper
          Hmm, maybe you could look at this thread from earlier this year: IR Report Freeze Column Header Row

          A blonde goes to the doctor and as she touches each part of her body with her finger she says: Doc it hurts everywhere. My leg hurts, my arm hurts, my neck hurts, and even my head hurts! Doc what's wrong? The doctor answers: Your finger is broken!

          Thank you,

          Tony Miller
          Webster, TX
          • 2. Re: Freeze Column
            787331
            Thanks for the reply.

            I can see the scrollbar but I am not seeing the column being freezed (locked) when I used below
            LOCKED_COLUMNS=2
            Regards
            Ved

            Edited by: ItsmeVed on Jan 11, 2011 1:24 AM
            • 3. Re: Freeze Column
              787331
              Hi All,

              I was able to find out an alternative way to freeze column( for IE 7 or ABOVE) as the above approach did not work for me.
              I am posting the solution here thinking that it might be helpful for others.

              Here is the demo application I have created:

              http://apex.oracle.com/pls/apex/f?p=freeze_col:2
              User: demo 
              password:demo
              Method:

              Add the below code in the HTML Header section of the page:

              7584710611712346648 is the table id you can get it using firebug.
              <SCRIPT type=text/javascript>
              function lockCol() { // Modified by Ved on 12.01.2011 for  IR report in Apex
                   var table = document.getElementById('7584710611712346648'); // table id
                   var button = document.getElementById('toggle');
                   var cTR = table.getElementsByTagName('tr');  //collection of rows
              
                   if (table.rows[0].cells[0].className == '') {
                        for (i = 0; i < cTR.length; i++)
                             {
                             var tr = cTR.item(i);
                             tr.cells[0].className = 'locked'
                                      //tr.cells[1].className = 'locked'
                             }
                        button.innerText = "Unlock First Column";
                        }
                        else {
                        for (i = 0; i < cTR.length; i++)
                             {
                             var tr = cTR.item(i);
                             tr.cells[0].className = ''
                             }
                        button.innerText = "Lock First Column";
                        }
              }
              </SCRIPT>
              
              
              <!--[if IE]>
              <style id="Lock_CSS">
              DIV#apexir_DATA_PANEL {
                   overflow: auto; overflow-y: hidden; WIDTH: 318px; scrollbar-face-color:#CC9966;
              scrollbar-arrow-color:#CC9966;
              scrollbar-track-color:#CC9966;
              scrollbar-shadow-color:#000000;
              scrollbar-highlight-color:#000000;
              scrollbar-3dlight-color:#CC9966;
              scrollbar-darkshadow-color:#CC9966;
              
              }
              DIV#apexir_DATA_PANEL TABLE TH {
                   WIDTH: 100px
              }
              
              TD.locked {
                   BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; Z-INDEX: 7; ; LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); POSITION: relative; BACKGROUND-COLOR: #FF3333}
              TH.locked {
                   BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; Z-INDEX: 7; ; LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); POSITION: relative; BACKGROUND-COLOR: #FF3333}
              </style>
              
              <![endif]-->
              Add the below code in footer section of the page:
              <BUTTON id=toggle onclick="lockCol('7584710611712346648')";>Lock First 
              Column</BUTTON>
              The below is the link from where I have taken help from:

              http://home.roadrunner.com/~bmerkey/examples/locked-column-csv.html

              Hope it would be helpful.

              Here is the modified version of the code to work it for multiple columns.
              <SCRIPT type=text/javascript>
              function lockCol() { // Modified by Ved on 12.01.2011 for  IR report in Apex
                      var FREEZE_COL=3; // Edit this value to set columns to be locked or modify this function to accept input value for columns to be freeze
                   var table = document.getElementById('7584710611712346648'); // table id which we can get it using firebug
                   var button = document.getElementById('toggle');
                   var cTR = table.getElementsByTagName('tr');  //collection of rows
              
                   if (table.rows[0].cells[0].className == '') {
                        for (i = 0; i < cTR.length; i++)
                             {
                             var tr = cTR.item(i);
                                     // Added below loop to support multi columns
                                      for (j = 0; j < FREEZE_COL; j++){ 
                             tr.cells[j].className = 'locked';
                                      }
                                      //tr.cells[1].className = 'locked'
                             }
                        button.innerText = "Unlock Column";
                        }
                        else {
                        for (i = 0; i < cTR.length; i++)
                             {
                             var tr = cTR.item(i);
                                       // Added below loop to support multi columns
                                      for (j = 0; j < FREEZE_COL; j++){ 
                             tr.cells[j].className = ''
                                      }  
                                      //tr.cells[1].className = ''
                             }
                        button.innerText = "Lock Column";
                        }
              }
              </SCRIPT>
              The problem I am having now is that this functionality is not working in FF (Tested in IE & FF only). And also, if we sort the column the lock column becomes unlocked and the display text in button remains Unlock Column. It is not changing to 'Lock Column'.

              Any suggestion would be highly appreciated. Thank you!

              Regards
              Ved

              Edited by: ItsmeVed on Jan 12, 2011 7:23 AM

              Edited by: ItsmeVed on Jan 12, 2011 7:46 AM

              Edited by: ItsmeVed on Jan 12, 2011 10:14 AM

              Edited by: ItsmeVed on Jan 12, 2011 11:52 AM

              Edited by: ItsmeVed on Jan 12, 2011 12:52 PM
              • 4. Re: Freeze Column
                787331
                I was able to freeze column in IR

                Here is the demo:
                http://apex.oracle.com/pls/apex/f?p=freeze_col:6

                The only limitation is that it works in IE (not FF)

                In the above updated vrsion, the following drawbacks were removed:

                1. when column header was sorted, the freeze functionality was not working.
                2. After pagination the locked columns were unlocked.

                It would of great help if anyone provide any suggestion to make it work in FF.


                Regards
                Ved
                • 5. Re: Freeze Column
                  jariola
                  Hi,


                  In styles those CSS expression() work only IE.
                  You need change approach to get it supported other browsers


                  Regards,
                  Jari
                  • 6. Re: Freeze Column
                    Gaurav Nagpal
                    Hello ,

                    Could you elaborate the approach to us in achieving desired result (Hint ->firefox)


                    Thanks,
                    Gaurav Nagpal
                    • 7. Re: Freeze Column
                      jariola
                      Hi,

                      I hope this helps
                      http://dbswh.webhop.net/htmldb/f?p=BLOG:READ:0::::ARTICLE:303800346302715

                      Regards,
                      Jari
                      -----
                      My Blog: http://dbswh.webhop.net/htmldb/f?p=BLOG:HOME:0
                      Twitter: http://www.twitter.com/jariolai