Problems updating ObservableArray within cellEditEnded or cellEditEnding

Problems updating ObservableArray within cellEditEnded or cellEditEnding

Posted by: john-munsch on 14 September 2017, 12:01 pm EST

• 

  john-munsch

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 12:01 pm EST

  We’ve got a FlexGrid (using the AngularJS version with AngularJS 1.5.9) where we want to update multiple cells in response to a user editing a single cell’s value. For example, if you were to edit the first numeric value in a row to be less than the succeeding values, those values would be reduced to match the first value across the row until it hit one which was already less.

  I’ve got a very simplified example in this Plunker here where I attempt to use setAt() on our ObservableArray of values in response to a button click, the “deleteRow” handler, and the “cellEditEnding” handler: http://plnkr.co/edit/YMqSSj7NKVK1Hv5zBcjc?p=preview

  Look at the code at the bottom of script.js and you’ll see that all three of those things call exactly the same code to set the prices across a single row in response to an event.

  1: Click the button at the top of the page, you’ll notice the first row will change all its numbers to 12, 11, 10… If you arrow around within the grid, everything is good.

  2: Reload the page and click at the start of the second or third row to select it. Then hit the delete key. That will invoke the “deleteRow” handler, and again the first row will change (not the row you clicked on, but this is just an example) and you can cursor around without any problems.

  3: Pick a numeric cell somewhere other than the first row and change it. After you accept the change the first row WILL NOT update and even worse the cursor in the grid no longer works correctly. You cannot be on the second row and arrow onto the first row, your cursor will disappear! You can be on the first row and cursor onto the second but not go back onto the first row!

  In all three cases we called the same function, in two out of the three (one of them an event handler) it worked just fine.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:01 pm EST

  Hello John,
  
  We are looking into this issue and update you by tomorrow.

  Thanks,
  
  Manish Kumar Gupta

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:01 pm EST

  Hello John,
  
  In the cellEditEnding event, value gets updated in data source but does not reflect in FlexGrid. Since it takes time to refresh complete FlexGrid on canceling cellEditEnding event due to large data source. Please use the setTimeout() method for calling function for changing price.

  For your reference, please see the attached sample that implements the same.

  If issue persists, please modify the attached sample depicting your issue so that we can assist you accordingly.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/05/FlexGrid_observableArray.zip

• 

  john-munsch

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:01 pm EST

  There’s no need to modify your example because it shows the problem perfectly. I run a server with the file you provided, I go down to the second row to modify a value (for example, changing 0.04944 to 15) and then exit the cell. The entire first line in the FlexGrid should change. It does not. I should be able to arrow up from the second line to the first line, I cannot. Instead the cursor will disappear from the grid.

  The setTimeout() did not change anything with regard to this problem!

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:01 pm EST

  Hello John,
  
  We are sorry, we are unable to replicate issue at our end with the sample provided to you.
  
  However, if you are facing issue, please set 100ms in setTimeout method.

  Please refer to the attached video that shows that sample works fine at our end.

  *Please use IE for watching video.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/05/FlexGrid_observable.zip

• 

  john-munsch

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:01 pm EST

  I think I’ve found the difference between what works and what does not. However, that doesn’t help me understand what to do about it. After replacing the value in the second line with a new value, you can hit several different keys to terminate the editing. If you hit ENTER, then I get the same results you do. The first line is updated and I can move the cursor around freely.

  But! If I use either TAB or RIGHT ARROW to move to the next cell and do not use ENTER at all, then the update does not occur and the cursor problem I mentioned shows up. Note: I know it still goes through cellEditEnding though because the console logging still happens.

  Sorry my reproduction sequence wasn’t specific enough, I didn’t realize that I was doing something different than you.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:01 pm EST

  Hello,
  
  Please ignore the setTimeout() solution provided earlier
  
  Observable array changes do not get displayed in FlexGrid until all changes are not committed to collectionView.
  
  So please call collectionView.commitEdit() method before changing data in ObservableArray.

  We also submitted a query to the concerned team for further investigation with tracking id 257894. We will let you know as soon as we get any update on this.

  Thanks,
  
  Manish Kuamr GUpta

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 27 February 2018, 5:17 am EST

  Hi,
  
  The performance has been improved a little. But the root issue is that changing the data while the user is editing is not a good idea.
  
  Imagine for example you are editing row 0, and when you are finishing, you cancel the edits by setting e.cancel to true, then change the data. The grid will try to undo the changes and will overwrite the changed data.

  A better solution in this case would be to use the code that is commented out in the sample:

  $scope.cellEditEnding =
  
  function (s, e) {
    e.cancel = true;
    $scope.data.cancelEdit();
    $scope.changes();
    console.log(...}
  

  ~Manish