1 Reply Latest reply on Feb 11, 2019 4:15 PM by Rick-Pick

    Interactive Grid (APEX 18.2), select row when link column clicked

    Rick-Pick

      I have an interactive grid with about 18 visible fields and about half of these are editable. To make for a better user experience, some additional fields and a map are included on a modal popup page which is called using a column link in the IG. When the modal page is closed (not cancelled), any values selected by the user and a map reference are returned to fields in the IG in fields which are mostly not visible to the user.

       

      This is all working very well, except that it relies on the record which is clicked on being selected (highlighted or checked). This is fine most of the time, because often the user will have edited some of the IG fields before clicking the popup link. But not always. If the grid is not in edit mode, clicking the link to the popup page doesn't select the record - and then things go haywire. (Clicking any other column in the record does cause the record to be selected in either edit mode or select mode.)

       

      To put it another way, if the user clicks the link column in any record straight off while the grid is not in edit mode, the record is not highlighted and the process doesn't work properly. In edit mode it works and in select mode it also works provided the record is highlighted.

       

      I think it should be easy to fix this by putting some code into a DA on the link column which ensures that the clicked record is selected before the popup window is opened. Another possible solution, although not perfect, might be to put the IG into edit mode by default.

       

      Could anyone help me to do either of those things?

       

      Thanks.

        • 1. Re: Interactive Grid (APEX 18.2), select row when link column clicked
          Rick-Pick

          I eventually "solved" this issue in a way which works for the particular application. The correct record, the one that was clicked on to go to the modal popup, is always updated correctly. My solution is to select the record to be updated after returning from the modal window, as follows.

           

          When the modal popup window is closed I pass back the values which the user might change along with the PK of the table (actually a view) on which both the IG and the modal window are based. (This is done using the Close Dialog DA action, in which you list the fields to return.)

           

          On the Dialog Closed event DA in the parent page I have a "Set Value" action for each of the returned values, and these populate hidden page items. These are followed by an "Execute Javascript Code" action which sets a var to the value of the returned PK, then executes a "gotoCell()" instruction, passing in the PK value. This selects the record which needs to be updated and deselects any other records the user selected before going to the popup window. After that the script just updates the selected row with the other returned values. Code below. I have found the "for" loop to be necessary for reasons which aren't clear to me. This works whether the IG is in Edit mode or Selection mode and if the user has manually selected any records first. The only case I found where it doesn't work gracefully is if the user pre-selected all the records using the "select all" checkbox. In this case the "gotoCell()" actually deselects the clicked record and leaves the others selected, but the clicked IG record is still updated correctly.

           

          var pb_id = $v("P1_PK_PAGE_ITEM");

          var g = apex.region("editJobs").widget().interactiveGrid("getViews","grid");

          g.gotoCell(pb_id); // Selects the record whose id was returned

          var r = g.getSelectedRecords();    // all selected records, for the array length, which should be 1 at this point

          for ( var i=0; i<r.length; i++ ) {

              if ( r[i][0] === pb_id ) {

                  var s = r[i];

                  console.log('Required record id is ' + s[0] );

                  // Set returned values into the selected grid record

                  g.model.setValue(s, 'IG_GRID_COL1', $v("P1_RET_VALUE_1") ); // as many of these statements as you need

              }

          }