9 Replies Latest reply on Sep 1, 2011 6:58 PM by leinadjan

    Alternating Row Colors - Interactive Report

    705459
      Hello All,

      I'm hoping someone out there can help me out w/this. :)

      I'm a newbie working w/an Interactive Report and want to have alternating row colors as a default w/out losing the IR advantages.

      I've tried javascript, but, whenever filters are applied the class gets stripped off.

      Has anyone had any luck w/this?

      Thanks In Advance
        • 1. Re: Alternating Row Colors - Interactive Report
          Roel Hartman
          Hello anonymous user,

          See [this blog post|http://roelhartman.blogspot.com/2009/06/altenating-row-colors-in-interactive.html] on how to create Alternating Row Colors in an IR.

          Greetings,
          Roel
          http://roelhartman.blogspot.com/
          You can reward this reply by marking it as either Helpful or Correct ;-)
          1 person found this helpful
          • 2. Re: Alternating Row Colors - Interactive Report
            705459
            Roel,

            I got it working... Adding the onload to the image is pretty awesome, I had to chuckle cause I would've never thought of that.

            It wasn't working for me earlier, but, i realized after it was a silly syntax error. :P

            Anywho - Check the link below.
            http://apex.oracle.com/pls/otn/f?p=17445:7::::::


            I had used a different striping script which was written by a buddy of mine Keith Daulton (Had to throw him props for a hawt script. Works in ie6/7, FF, Chrome & Safari).

            I'm 100% sure I'm not the only one who's wanted this done and struggled to get it. So below I'm providing it for those who run into this thread.

            <script type="text/javascript">

            // THIS DOES THE STRIPING
            function decorateDataGrids (strClass) {
                 var tables = document.getElementsByTagName("table");
                 for (var i=tables.length; i--;) {
                      if (tables.className == strClass) {
                           var gridRows = tables[i].getElementsByTagName("tr");
                           for (var j=gridRows.length; j--;) { if (j%2) { gridRows[j].className = "even"; } }
                      }
                 }
            }
            window.onload = function () {
                 decorateDataGrids("apexir_WORKSHEET_DATA"); // THIS DOES THE STRIPING
            }
            </script>

            <style>
            /* THIS OVERRIDES APEX'S DEFAULT STYLES */
            table.apexir_WORKSHEET_DATA tr.even td {
                 background-color:#F1F5FA !important;
            }

            table.apexir_WORKSHEET_DATA td {
                 background-color:#FFFFFF !important;
                 border:1px solid #B3B3A7 !important;
                 padding:4px 8px !important;
            }
            </style>

            onload event strapped to the img -- Thanks!!!
            <img src="#IMAGE_PREFIX#edit.gif" alt="" onload="decorateDataGrids('apexir_WORKSHEET_DATA');">

            Edited by: user11086646 on Jun 9, 2009 7:04 PM
            • 3. Re: Alternating Row Colors - Interactive Report
              654114
              I'm glad it worked for you.

              I must be doing something wrong. All the rows in my IR remain the standard gray color. I know the function is getting called because I put alert messages in it. I also know that the lines are alternating, because of alert statements. But the background color isn't changing. Which makes me think that the

              +$(pThis).parent().parent().parent().addClass(lastColor);+


              statement isn't working for some reason.

              Any Ideas?

              Thanks,

              Martin
              • 4. Re: Alternating Row Colors - Interactive Report
                705459
                I used the script I posted above because It's a class driven javascript function. This is what you want to do.

                STEP 1: I'm not sure your js proficiency. I'd suggest making a .js file for the script and a css file for the styles, however apex is really flexible as to how you want to implement it. In the example case, simply paste the following into your "header and footer" section (i've attached a link to the SS so you can see how it looks.) The js controls the functionality the style controls the color of the rows:

                (screen shot) http://img199.imageshack.us/img199/1539/step1nct.jpg


                <script type="text/javascript">

                // THIS DOES THE STRIPING
                function decorateDataGrids (strClass) {
                var tables = document.getElementsByTagName("table");
                for (var i=tables.length; i--;) {
                if (tables.className == strClass) {
                var gridRows = tables.getElementsByTagName("tr");
                for (var j=gridRows.length; j--;) { if (j%2) { gridRows[j].className = "even"; } }
                }
                }
                }
                window.onload = function () {
                decorateDataGrids("apexir_WORKSHEET_DATA"); // THIS DOES THE STRIPING
                }
                </script>
                <style>
                /* THIS OVERRIDES APEX'S DEFAULT STYLES */
                table.apexir_WORKSHEET_DATA tr.even td {
                background-color:#F1F5FA !important;
                }

                table.apexir_WORKSHEET_DATA td {
                background-color:#FFFFFF !important;
                border:1px solid #B3B3A7 !important;
                padding:4px 8px !important;
                }
                </style>


                STEP 2: Paste the following into your image link:

                (screen shot) http://img205.imageshack.us/img205/1521/step2.jpg


                <img src="#IMAGE_PREFIX#edit.gif" alt="" onload="decorateDataGrids('apexir_WORKSHEET_DATA');">

                That's pretty much it :) Good luck and enjoy!

                Edited by: hugo_c on Jun 11, 2009 6:48 PM
                • 5. Re: Alternating Row Colors - Interactive Report
                  654114
                  Thanks Hugo. I just tried your method. I'm not getting past

                  +if (tables.className == strClass) {+

                  because tables.className is always undefined.
                  • 6. Re: Alternating Row Colors - Interactive Report
                    654114
                    OK here is why the code doesn't work. When you use getElementsByTagName, you're getting a collection, not a single item. Therefore when you do the comparison to see if the table's class is an ApEx IR type, you need to reference the current table, not the entire collection. Like so...

                    +if (tables.className == strClass)+

                    Another thing to note, is that the function gets called for every row in the interactive report, currently on the screen. So there's no need to do the

                    +window.onload = function () {+
                    decorateDataGrids("apexir_WORKSHEET_DATA"); // THIS DOES THE STRIPING
                    +}+

                    I wish there were a way to only call the function one time. All the formatting is done on the very first row. Every row after that is just wasted processing. But if you only were to call the function on load, then the formatting wouldn't be reprocessed if you were to filter the Interactive Report.

                    Thanks For The Help,

                    Martin
                    • 7. Re: Alternating Row Colors - Interactive Report
                      705459
                      The script was designed as a generic script for striping tables w/a class name implementation to call the specific table you wanted to stripe, hence the window.onload function. I left the onload for two reasons.

                      1. I have it in a .js and will use it on a table that isn't going to be an apex report.
                      2. Attaching an onload event to an image really isn't practicle.

                      What I was hoping for and it's still under works is for "a listener" so when any of the items (functions, pagination, filters, etc.) within the IR are called, it'll trigger the decorateDataGrids(); to stripe again.

                      Because and I totally agree calling the onload on every image is a waste.
                      • 8. Re: Alternating Row Colors - Interactive Report
                        654114
                        It sounds like ApEx 4.0 will be able handle this type of thing.
                        • 9. Re: Alternating Row Colors - Interactive Report
                          leinadjan
                          Oh, this is working really great, thank you.