Posted on by mabdulah

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

First option

Check the blog of.. Moritz Klein here

Create an interactive grid based on HR schema table employees.

Interactive Report Query:

SELECT empno,
       ename,
       job,
       mgr,
       hiredate,
       sal,
       comm,
       deptno,
       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(“span[data-style]”).each(
function()
{
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.

Second Option (19.1 interactive Grid)

Add inlines style to the page like

.rood {
background-color:red;
}
.groen {
background-color:green;
}
.oranje {
background-color:orange;
}

and add the below code to the SAL column

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

29 Replies to “Interactive Grid – Change cell background color (APEX 5.1)”

  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?
    thanks

    Reply

    1. You need to save the value somewhere, I have added the query that Moritz Klein is using in his blog.
      If you add your page to apex.oracle.com, I will check it for you.

      Reply

      1. I have table that has backgroundcolor and fontcolor field so they save in db
        now I add link in my grid that open form so user can change font color and back ground color
        I have dynamic action(event:after refresh/selection type :jquery selector/jquery selector:#mystatic id) and use your js code in dynamic action(Fire on Initialization:yes)
        when I change color in form, grid lose all of back ground color and font color cell
        smple page:https://apex.oracle.com/pls/apex/f?p=51552:2:6437886883901::NO:::
        username:farnazmohammadi41@gmail.com
        pass : ms22359698
        Thanks

        Reply

  3. 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

    Reply

  4. 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

    Reply

    1. 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.

      Reply

  6. setTimeout(function(){

    apex.jQuery(“span[data-style]”).each(
    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

    Reply

  8. 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:
    COLUMN-NAME = CARGAR_AVISO_RECIBO
    TYPE: HTML Expresión

    en HTML Expresión coloque:
    &CARGAR_AVISO_RECIBO.

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

    Y en lea caja JavaScrip Expresión:
    apex.jQuery(“span[data-style]”).each(
    function()
    {
    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

    Reply

  10. 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.

    Reply

    2. Hello Barry,

      in APEX 18.3 change the CASE Statement (without “) :
      CASE WHEN sal 1500 AND sal 3000 THEN ‘data-style=background-color:red’
      ELSE NULL
      END css_style

      Reply

  11. Hi,
    it doesn’t work on apex.oracle.com (apex 19.1).
    Could you have a look at it? How to communicate the credentials?
    Thank you!!

    Reply

        1. Hi Thilo, I have created a new application in your schema, it works fine on 19.1.
          Good luck. please check and let me know if you have any question.
          regards,
          Mazin

          Reply

          1. Oh, thanks a lot.
            It works fine, and I will find out the difference and post it here.
            But first: Thanks for very quick support.
            Sincerely yours
            Thilo

          2. Hi Mazin,
            your website has got the title “Interactive Grid …”.
            The new application in my schema is an interactive report.
            But I’m talking about Interactive Grid.
            Any idea?
            Thanks Thilo

          3. Hi Thilo,

            I have a created another page for you a Grid one. please check it . I have changed the tag to

            and added class styles to it instead of inline style. it works fine. I will update this post as well with the new code for 19.1.

            regards,
            Mazin

          4. Hi Mazin,
            I tried it, and it works fine. Thanks a lot!
            Please note, that the dynamic action is not necessary. It works without!

            Did your old description ever work in interactive grid? I tried it in apex 5.1 (local) and 19.1 (apex.oracle.com), but it did not work.

            Thanks a lot for quick help!!

            Sincerely
            Thilo

Leave a Reply

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