Forum Stats

  • 3,851,423 Users
  • 2,263,974 Discussions
  • 7,904,701 Comments

Discussions

After Refresh trigger not firing for Interactive Grid (Apex 19.2)

Hello

I would like to set the cell background color of a column within an Interactive Grid depending on what the cell is displaying:

Text "Complete" green in status column set background-color = green


Based on several outdated examples (older Apex versions) I came closest with this solution:

Create an event "After Refresh" on the region where the Interactive Grid is stored:

  • Event: After Refresh
  • Selection Type: Region
  • Region: <Region in which the Interactive Grid is located>

Add a Javascript Procedure

$('tbody td').each(function() {

if ( $(this).text() == 'Complete' ) {

  $(this).css('background-color', 'green');

}

});

Attributes:

  • Action: Execute Javascript code (code above)
  • Affected Elements: <Region in which the Interactive Gris is located>
  • Fire on Initialization: True

Weird effect #1: The event does not fire on opening the page

What's wrong here?

Tagged:

Best Answer

  • Hamza Al-abbasi
    Hamza Al-abbasi Member Posts: 620 Gold Trophy
    edited Feb 21, 2022 4:07PM Answer ✓

    Hello John,

    After Refresh DA is not supported for IG, you can use Page Change [Interactive Grid] instead (if IG pagination is Page).

    For changing column cell background, you can use cellCssClassesColumn column option attribute as following :

    For example your IG SQL Query like :

    SELECT COLUMN1,
           COLUMN2,
            WHEN COLUMN1 = 'Y' THEN 'u-color-5-bg'
            ELSE 'u-color-7-bg'
           END AS COLUMN_CSS_CLASSES
    FROM TABLE
    

    Add this JS code in JavaScript Initialization Code attribute for the column you want to apply the classes :

    function(config) {
      config.defaultGridColumnOptions = { 
        cellCssClassesColumn: 'COLUMN_CSS_CLASSES' // Your column name that contained the classes in your IG SQL query
      };   
       
      return config;
    }
    


    John like many others

Answers

  • Hamza Al-abbasi
    Hamza Al-abbasi Member Posts: 620 Gold Trophy
    edited Feb 21, 2022 4:07PM Answer ✓

    Hello John,

    After Refresh DA is not supported for IG, you can use Page Change [Interactive Grid] instead (if IG pagination is Page).

    For changing column cell background, you can use cellCssClassesColumn column option attribute as following :

    For example your IG SQL Query like :

    SELECT COLUMN1,
           COLUMN2,
            WHEN COLUMN1 = 'Y' THEN 'u-color-5-bg'
            ELSE 'u-color-7-bg'
           END AS COLUMN_CSS_CLASSES
    FROM TABLE
    

    Add this JS code in JavaScript Initialization Code attribute for the column you want to apply the classes :

    function(config) {
      config.defaultGridColumnOptions = { 
        cellCssClassesColumn: 'COLUMN_CSS_CLASSES' // Your column name that contained the classes in your IG SQL query
      };   
       
      return config;
    }
    


    John like many others
  • John like many others
    John like many others Member Posts: 116 Blue Ribbon
    edited Feb 21, 2022 4:51PM

    Thanks a lot for your support!

    Would be nice Apex would document not supported/working stuff. That could save me (and others) hours.

    In between I also tried the event "Row Initialization [Interactive Grid]" and this one doesn't fire neither, tried also "Page Change" as you proposed and also doesn't fire.

    I have no pagination on the Interactive Grid as I would like to show them all at once.

    The only way I can make the event firing is to switch to JQuery Selector:

    • Selection Type: jQuery Selector
    • jQuery Selector: Definied ID in Advanced area of region

    This makes the column green but only till column 40 (see attachment). Furthermore on refreshing (button triggering the refresh) the Interactive Grid the even Row Initialization is not firing anymore, so all columns with value "Complete" stay white. This is all bit shaky.

    As it's already late here I have to stop. I will try your provided solution tomorrow and let you know if that works.

  • Hamza Al-abbasi
    Hamza Al-abbasi Member Posts: 620 Gold Trophy
    edited Feb 21, 2022 5:07PM

    In between I also tried the event "Row Initialization [Interactive Grid]" and this one doesn't fire neither, tried also "Page Change" as you proposed and also doesn't fire.

    This works if your IG is editable.

    The only way I can make the event firing is to switch to JQuery Selector

    cellCssClassesColumn it's less code and works without any native jQuery code.

    This makes the column green but only till column 40 (see attachment). Furthermore on refreshing (button triggering the refresh) the Interactive Grid the even Row Initialization is not firing anymore, so all columns with value "Complete" stay white. This is all bit shaky.

    The IG renders 40 row when scrolling and your jQuery code will color the rendered rows only.

  • John like many others
    John like many others Member Posts: 116 Blue Ribbon

    Wow, just implemented your solution and it works out of the box even though my Interactive Grid is read only! Refreshing that way works too!

    Thanks a ton for your support, very appreciated, you made my day! I created some inline CSS styles which were accepted as well for coloring the status field (in the end it's the representation of a log table showing the load state of jobs: waiting, running, complete, error).

    I'm glad you tested my trials and experienced the same behavior, but sad it doesn't work. That tells me I didn't make anything wrong.

    Have a nice day and thanks again!