Using onSelectionChanging event in FlexGrid

Using onSelectionChanging event in FlexGrid

Posted by: joe on 30 August 2018, 5:09 pm EST

• 

  joe

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 August 2018, 5:09 pm EST

  Hi, again!

  I have a page with a grid on the left and a bunch of check boxes on the right. The check box states change when the user selects an item from the grid on the left. If, however, the user changed the state of a checkbox before saving and they select an item from the grid, i want to prompt the user with a dialog that they will lose unsaved data if they contintue. The dialog is a wijmo-pop-up. I want to intercept the onSelectionChanged event on the grid so that if the user says ‘No’ in the dialog the selection doesn’t change and the check box states remain the same. But, if the user selects ‘Yes’ on the dialog, I want the selection on the grid to happen and the check box states to be refreshed.

  I have everything working except the case where the user says ‘Yes.’ When the user clicks ‘Yes’ I return ‘true’ (not a string) to the onSelectionChanging eventhandler but the selection does not actually happen. It seems to behave as though I returned ‘false.’

  Here’s the code:

  
  ...
          locGridForSelectedUser = new wijmo.grid.FlexGrid('#permissionsLocationsGrid', {
              itemsSource: $scope.selectedUserLocations,
              autoGenerateColumns: true,
              columns: [
                  { binding: 'name', header: config.app.LOCALE.TEXT_NAME, width: '*', align: 'left' }
              ],
              isReadOnly: true,
              showAlternatingRows: true,
              stickyHeaders: true,
              selectionMode: 3,
              autoSizeMode: 0,
              allowDelete: true,
              onSelectionChanging: function (e) { return checkDirty(e); },
              onSelectionChanged: function () { locationGridForSelectedUserItemChanged() }
          });
  ...
  
      var checkDirty = function (cd) {
          console.log('checkDirty()');
  
          if (pageIsDirty == true) {
              yesNoDlg.show(true, function (e) {
                  if (e.dialogResult == 'wj-hide-ok') {
                      console.log('return true');
                      return true;
                  } else {
                      console.log('return false');
                      return false;
                  }
              });
          }else{
              console.log('return true');
              return true;
          }
      }
  
  
  
  

  I would expect that returning ‘true’ would allow the event chain to continue. Changing selections on the grid works fine if the page isn’t dirty. But when the dialog comes into play the behavior changes.

  Thanks for your help!

  Joe

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 31 August 2018, 4:07 am EST

  Hi,

  Thanks for the code snippet.
  
  The issue is arising because you are expecting a synchronous method to wait for an asynchronous action(user confirmation).
  
  So what is happening inside dirty function is that when ‘pageIsDirty’ evaluates to false, it returns true however when ‘pageIsDirty’ evaluates to true then it displays the yesNoDlg and continues with its rest of the execution(without waiting for the result of yesNoDlg) and returns nothing.

  In this case what you need to do is cancel the selection change before displaying the dialog and then if the user clicks ‘yes’ in the dialog then change the selection programmatically.
  
  Please refer to the following sample which implements the same:-
  
  https://stackblitz.com/edit/js-r9uzyh?file=index.js

  Also please use selectionChanging/selectionChanged events instead of onSelectionChanging/onSelectionChanged. onSelectionChanging/onSelectionChanged are event raisers methods, so overriding their values will stop grid from firing those events.

  ~Sharad

• 

  joe

  • Post Options:
  • Link
    Copy

  Posted 1 September 2018, 9:43 am EST

  Excellent! Thanks, Sharad!

  Joe