3 Replies Latest reply: Jul 19, 2013 4:19 AM by GatewayCSIT RSS

    alternating row colors

    Emu
      I'm using theme "6 centered blue" and can not get the rows in my interactive report to have an alternating background color. Strangely there seems to be a template for this theme "Standard, Alternating Row Colors" which I cannot choose or copy into another name so I can use with my report.

      Does this make sense to anyone? Is there any simple way I can alter the theme/template?
        • 1. Re: alternating row colors
          jariola
          Hi,

          Interactive report do not use templates. Only way is modify or override APEX internal or theme CSS styles .


          Regards,
          Jari

          http://dbswh.webhop.net/dbswh/f?p=BLOG:HOME:0
          • 2. Re: alternating row colors
            Joe Upshaw
            Well, the alternating colors template isn't available for IRR. I have no idea why this would be.

            My initial guess was that it couldn't be included in the template because if the rows are sorted/filtered etc. without a page submit, i.e. via client side jQuery/JavaScript, then the classes can't be set, e.g. odd vs. even, when the page is loaded. In other words, what used to be an odd row might become an even row after a filter is applied. However, looking in the generated code, I can see that the IRR does set a classname of even or odd and, moreover, it resets this following all client side operations on the IRR. So, all that would have been required was the css to set the background of these classes appropriately. Seems like a silly, pointless omission to me.

            All of this said, I do have a quick and dirty solution.

            Create a Dynamic Event named setEvenOddBackground.

            Event     After Refresh
            Selection Type     Region
            Region     (Select the name of your IRR Region from the DropDown)
            Condition     No Condition
            Event Scope live

            For the action select Execute JavaScript Code.

            Here is the JavaScript (jQuery actually) to put:
            var rows = $('table.apexir_WORKSHEET_DATA tbody tr:gt(0)');
            
            rows.each(function(index) 
            {
                evenOdd = index % 2;
            
                if( evenOdd == 1) 
                {       
                    $(this).children("td").css("background-color","#FFFAFA");
                }            
                       
            });
            Be sure to check "Fire on Page Load"

            -Joe
            • 3. Re: alternating row colors
              GatewayCSIT

              Excellent solution, thank you.