Forum Stats

  • 3,735,217 Users
  • 2,247,146 Discussions
  • 7,857,785 Comments

Discussions

Javascript Help for Disabling Row Selector on Interactive Grid

Joe R
Joe R Member Posts: 845 Bronze Badge
edited Jul 30, 2020 5:43PM in APEX Discussions

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

Best Answer

  • Keyser
    Keyser Member Posts: 829 Bronze Trophy
    edited Jul 30, 2020 4:27PM Accepted Answer

    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

Answers

  • Joe R
    Joe R Member Posts: 845 Bronze Badge
    edited Jul 30, 2020 2:36PM

    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
    Keyser Member Posts: 829 Bronze Trophy
    edited Jul 30, 2020 3:32PM

    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
    Keyser Member Posts: 829 Bronze Trophy
    edited Jul 30, 2020 3:47PM

    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
    Joe R Member Posts: 845 Bronze Badge
    edited Jul 30, 2020 3:55PM

    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
    Keyser Member Posts: 829 Bronze Trophy
    edited Jul 30, 2020 4:22PM

    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
    Keyser Member Posts: 829 Bronze Trophy
    edited Jul 30, 2020 4:27PM Accepted Answer

    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
    Joe R Member Posts: 845 Bronze Badge
    edited Jul 30, 2020 5:20PM

    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

  • Joe R
    Joe R Member Posts: 845 Bronze Badge
    edited Jul 30, 2020 5:43PM

    Keyser,

    Thank very much for your help!

    Your solution worked perfectly!

    Thanks,

    Joe

    Keyser
Sign In or Register to comment.