Interactive Grid – Change cell background color (APEX 5.1)

There is very nice blog of Moritz Klein about how to control cell background in an interactive reports, but that does not work with interactive grid. This because items in interactive grid does not have HTML Expression as attribute.

There are some fundamental differences between interactive grid and interactive

Check the blog of.. Moritz Klein here

Create an interactive grid based on HR schema table employees.

Interactive Report Query:

SELECT empno,
       CASE WHEN sal <= 1500 THEN 'data-style="background-color:green"' 
            WHEN sal > 1500 AND sal <= 3000 THEN 'data-style="background-color:orange"'
            WHEN sal > 3000 THEN 'data-style="background-color:red"'
            ELSE NULL
       END css_style
  FROM emp
  • Change the type of Sell attribute to HTML Expression and add the below code as source

<span &CSS_STYLE.>&SAL.</span>

Note: because you are now adding HTML code, you need to use the attribute value as HTML parameter by using &ITEM.

You can add the below code (For the rest you just add exactly the same as Moritz suggests) or to a dynamic action or to Page Load Javascript execution.

apex.jQuery(this). parent().attr( ‘style’, apex.jQuery(this).attr(‘data-style’) );

this code checks the SPAN tag en adds the same style to its parents.

In case of any question, drop me or Moritz Klein a message.


21 thoughts on “Interactive Grid – Change cell background color (APEX 5.1)”

  • Hi
    I have form that user can change background color but background color does not refresh by this code when form closed.
    can you help me?

  • Hi,

    Where do you add the javascript code to add the style to the parents? On Page Load and After refresh does not work.

    BR Daniel

  • Hi Mazin,

    Thank you for your reply but it does not work. Seems like data is not loaded when page load is fireing.

    BR Danel

    • It works when Lacy load is set to No on the IG but the it does not set the color on the rows that are not loaded before I scroll down. I need to show all the available rows when the page is loaded so I need to set LAcy Load to YES.

  • setTimeout(function(){


    apex.jQuery(this). parent().attr( ‘style’, apex.jQuery(this).attr(‘data-style’) );

    }, 200);

    on grid selection change
    after this sorting and other things start to work correct

  • Hola,
    Estoy realizando mi primera consulta en APEX, trabajamos con APEX 5.1 y esto realizando una en consulta como interactive grid, esooy siguiendo los pasos que explican en este blog, pero no me funciona.
    En mi query tengo el siguiente CASE:

    ,case XXMU_DATOS_PREBILL_PK.DATOS_variacion(oh.header_id,wnd.delivery_id,’5′,hca.account_number,:P20_uni_alterna)
    when ‘SI’ then ‘data-style=”background-color:red”‘
    ELSE ‘data-style=”background-color:blue”‘
    end CSS_STYLE

    Y la columna que deseo colocarle color Esta definida asi:
    TYPE: HTML Expresión

    en HTML Expresión coloque:

    y en el evento PAGE LOAD
    coloque en:
    type: Java Scrip Expression

    Y en lea caja JavaScrip Expresión:
    apex.jQuery(this).parent().attr(‘style’, apex.jQuery(this).attr(‘data-style’) );

    Pero no me cambia de color.
    Por su ayuda muchas Gracias

    Define la columna CSS_STYLE como HIDDEN

  • no luck with getting this to work on an interactive grid. Apex 18.3

    I must be missing something here. I can get this to work interactive Reports but not on Interactive Grids. Which is what i have tring to do.

Leave a Reply

Your email address will not be published. Required fields are marked *