Javascript Help for Disabling Row Selector on Interactive Grid

Joe R

Version: Application Express 19.2.0.00.18

Hello,

A co-worker just asked me for help with disabling the Row Selector on an Interactive Grid based on a condition.

He currently has a function in the "Function and Global Variable Declaration" section to disable the Row Selector when the report loads, scrolls, or changes to another saved report.

The problem is when sorting one of the columns. The function doesn't seem to be executed.

Here's the Function:

function disableRowSelector() {    var records = $(".a-GV").first().find( ".a-GV-w-scroll .a-GV-row" );    var eclipseUser = $("#P21_ECLIPSE_ID")[0].value;    var userSSO = $("#P21_SSO_ID")[0].value;        for(var i = 0; i < records.length; i++){        var compareText = records.eq(i)[0].cells[4].innerText;        var compareID = records.eq(i)[0].cells[5].innerText;               //console.log("compareText: " + compareText);        if (compareText === 'HOUSE' && compareID !== eclipseUser && compareID !== '-'){            var dataId = records.eq(i).attr("data-id");                        // Remove Checkbox from that row            $(".a-GV").first().find( ".a-GV-w-frozen .a-GV-row[data-id='" + dataId + "'] .u-selector").removeClass();        }        else if((eclipseUser === compareText || compareText === 'HOUSE' || compareText === '-') && compareText){             var dataId2 = records.eq(i).attr("data-id");           // $(".a-GV").first().find( ".a-GV-w-scroll .a-GV-row[data-id='" + dataId2 + "']").css("background-color", "#00FF00");        }         else{                        // Get data-id of row where Eclipse User does not match Inside Sales Person             var dataId = records.eq(i).attr("data-id");                        // Remove Checkbox from that row            $(".a-GV").first().find( ".a-GV-w-frozen .a-GV-row[data-id='" + dataId + "'] .u-selector").removeClass();        }    }}

Line 27 is where he's disabling the Row Selector.

So again the issue is that this function doesn't seem to run when column sorting is applied on the report.

Can someone help with this?

Thanks,

Joe

Keyser

i've realised there is another one that does look more appropriate

$( "#my_emp_ig" ).on( "gridsortchange", function( event, data ) { console.log(16, event, data); } );

but the gridsortchange event fires as soon as you click the sort, then the other events fire and it redraws the grid view so you lose the change(s) you made so you can't use this event for what you are trying to achieve

Joe R

Hello,

I think he's looking for how to reference the Sort event on a column in the Interactive Grid or how to find what it is?

Thanks,

Joe

Keyser

these 3 fire when column sort order is changed

gridselectionchange

gridpagechange

interactivegridselectionchange

I've tested a cut down version of disableRowSelector() fired on the interactivegridselectionchange event and it removes the class to hide the checkbox on the row that i wanted after the sort has happened

$( "#my_emp_ig" ).on( "interactivegridselectionchange", function( event, data ) { disableRowSelector();} );

Keyser

interactivegridselectionchange might not be the best event to use if you are messing with the row selection check box

so i've tried it with gridpagechange instead and that works as well

Joe R

Keyser,

Thank you for that information!

How/where did you find these events? I've had no luck tracking down anything about the sort.

Thanks,

Joe

Keyser

I put these in the page level "Function and Global Variable Declaration"...

$( "#my_emp_ig" ).on( "interactivegridmodechange", function( event, data ) { console.log(1, event, data); } );$( "#my_emp_ig" ).on( "interactivegridreportchange", function( event, data ) { console.log(2, event, data); } );$( "#my_emp_ig" ).on( "interactivegridreportchange", function( event, data ) { console.log(3, event, data); } );$( "#my_emp_ig" ).on( "interactivegridsave", function( event, data ) { console.log(4, event, data); } );$( "#my_emp_ig" ).on( "interactivegridselectionchange", function( event, data ) { console.log(5, event, data); } );$( "#my_emp_ig" ).on( "interactivegridviewchange", function( event, data ) { console.log(6, event, data); } );$( "#my_emp_ig" ).on( "interactivegridviewmodelcreate", function( event, data ) { console.log(7, event, data); } );$( "#my_emp_ig" ).on( "gridmodechange", function( event, data ) { console.log(8, event, data); } );$( "#my_emp_ig" ).on( "gridreportchange", function( event, data ) { console.log(9, event, data); } );$( "#my_emp_ig" ).on( "gridsave", function( event, data ) { console.log(10, event, data); } );$( "#my_emp_ig" ).on( "gridselectionchange", function( event, data ) { console.log(11, event, data); } );$( "#my_emp_ig" ).on( "gridviewchange", function( event, data ) { console.log(12, event, data); } );$( "#my_emp_ig" ).on( "gridviewmodelcreate", function( event, data ) { console.log(13, event, data); } );$( "#my_emp_ig" ).on( "gridpagechange", function( event, data ) { console.log(14, event, data);  } );

then run your page, invoke chrome dev tools, clear the console, click sort on a column and see which events fire

(there may be easier ways to do this that i'm not aware of)

Keyser

i've realised there is another one that does look more appropriate

$( "#my_emp_ig" ).on( "gridsortchange", function( event, data ) { console.log(16, event, data); } );

but the gridsortchange event fires as soon as you click the sort, then the other events fire and it redraws the grid view so you lose the change(s) you made so you can't use this event for what you are trying to achieve

Joe R

Keyser,

I was more asking about finding the actual events than how to run them.  Where did you find the events that you have listed?

Thanks,

Joe

Keyser

https://docs.oracle.com/en/database/oracle/application-express/20.1/aexjs/grid.html

https://docs.oracle.com/en/database/oracle/application-express/20.1/aexjs/interactiveGrid.html

Joe R

Keyser,

Thank very much for your help!

Your solution worked perfectly!

Thanks,

Joe