PureJS - flexgrid.cellEditEnding.addHandler with a custom editor

PureJS - flexgrid.cellEditEnding.addHandler with a custom editor

Posted by: daryn.holmes on 9 October 2017, 3:22 am EST

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 October 2017, 3:22 am EST

  Hi,

  I would like some advice on using flexgrid.cellEditEnding.addHandler in combination with a custom editor.

  I have written a custom editor by following this example: https://www.grapecity.com/en/blogs/custom-editors-in-flexgrid/

  I have also added a cellEditEnding handler:

            
         flexgrid.cellEditEnding.addHandler (function (s, e) {
              var flex = s,
              oldVal = flex.getCellData(e.row, e.col),
              newVal = flex.activeEditor.value;
              console.log("cellEditEnding row: " + e.row + " col: " + e.col)
              console.log("old: ", oldVal, " new: ", newVal)
         })
  
  

  This may conflict with the custom editor pattern (referenced above) as it also registers a cellEditEnding handler:

  
  var editEndingEH = function (s, args) {
      grid.cellEditEnding.removeHandler(editEndingEH);
      if (!args.cancel) {
         args.cancel = true;
         grid.setCellData(e.row, e.col, input.value);
        }
      };
  
       // subscribe the handler to the cellEditEnding event
       grid.cellEditEnding.addHandler(editEndingEH);
  });
  

  This ends up showing the same value for old and new. Am I doing something wrong?

  How can I use a custom editor and show the old value, new value when cellEditEnding is done.

  Thanks, Daryn

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 9 October 2017, 5:42 pm EST

  Hello Daryn,
  
  The activeEditor is referred to the default editor. Hence, when the new value is trying to retrieve using s.activeEditor, it returns old value since we have placed custom editor in the cell by hiding default editor.

  The point should be remembered that grid’s cellEditEnding event gets triggered before custom editor handled cellEditEnding event.

  Hence, the question raises how we can get the old and new value for the current edit cell?

  …

  Wait… We do not need to worry…

  The value can be retrieved using the placed custom editor. For this, we need to assign an"ID" for the added editor. Using this ID, we can get control and retrieve editor value in cellEditEnding value.

  Please refer to the updated fiddle (http://jsfiddle.net/mkgupta911/qwctfo4y/43/) for the same.

  ~Manish Kr Gupta

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy

  Posted 9 October 2017, 8:54 pm EST

  Thanks this well written answer was very helpful.

  I ended up tweaking it slightly, instead of using wijmo.Control.getControl(‘#wjEditor’) I ended up using jquery to find the element I was interested in.

  I think I needed to do this because of my particular custom editor.

  Thanks again!