FlexSheet - Cancel cellEditEnding event and retain current cell value

FlexSheet - Cancel cellEditEnding event and retain current cell value

Posted by: holly.anderson on 4 January 2018, 4:28 am EST

• 

  holly.anderson

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 4 January 2018, 4:28 am EST

  Hello,

  I have a FlexSheet that allows users to add new rows via the template row. The height of the FlexSheet is dynamic and is adjusted accordingly after a new row has been added. In order for everything to be displayed properly, the FlexSheet needs to be refreshed after adding a new row and adjusting the height.

  My problem is that refreshing the FlexSheet causes the cell that is currently being edited to exit edit mode. I want the cell to remain in edit mode to cover the case where the user added a new row by entering data in quick-edit mode via a cell in the template row. I tried to handle the cellEditEnding event by using various combinations of e.cancel = true and e.stayInEditMode = true. Unfortunately, I haven’t been able to get it to work so that the cell remains in edit mode and retains its current value.

  I’m looking for any suggestions on how to either (1) refresh the spreadsheet without forcing the cell to leave edit mode or (2) handle the cellEditEnding event so that the cell remains in edit mode and retains its value.

  Thanks,
  
  Holly

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 January 2018, 4:36 pm EST

  HI Holly,
  
  If you are not using autoSizeRows method, you may use collectionChanged/cellEditEnded event.

  If you are using autoSizeRows method, you may use cellEditEnded event to resize FlexSheet.

  Please refer to the attached sample for the same.

  ~Manish

  FlexSheet_AutoSizeHeight_withAutoRowSizeCall.zip

  FlexSheet_AutoSizeHeight.zip

• 

  holly.anderson

  • Post Options:
  • Link
    Copy

  Posted 7 January 2018, 6:02 am EST

  Hi Manish,

  Thanks for the information. I’m not using autoSIzeRows, so I went with the option of resizing the FlexSheet from the collectionChanged event. I modified your sample to calculate the height based on the number of rows that are currently visible, so that it will work when filters are applied.

  That change seemed to work fine, but I started running into a problem when I modified the sample further to use Knockout, As far as I can tell, when the FlexSheet is bound using Knockout, the newly added row is not available in the FlexSheet’s row collection when the collectionChanged event fires. As a result, the height calculation is off. I’m not sure if this is intentional or a bug, but I’m wondering if you have any suggestions on how to account for this discrepancy? I’d rather not simply add 1 to the row count to account for this, because that seems a bit unreliable.

  Thanks,
  
  Holly

  FlexSheetDemo_AutoSizeHeight_Knockout.zip

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 7 January 2018, 3:48 pm EST

  HI Holly,
  
  Since, you are hiding row on updatingView, you need to call method for resizing rows within updatingView event also need not to check if dataItem is null or not.

  Please refer to the attached sample for the same.

  ~Manish

  FlexSheetDemo_AutoSizeHeight_Knockout_updated.zip

• 

  holly.anderson

  • Post Options:
  • Link
    Copy

  Posted 8 January 2018, 12:41 am EST

  Hi Manish,

  Resizing the spreadsheet from the updatingView event does seem to be working, but I don’t think it has anything to do with the fact that I’m hiding the first row. I took out the code for hiding the first row, and I still needed to resize from updatingView instead of collectionChanged, As I stated earlier, I think this discrepancy may have something to do with the Knockout binding.

  Unfortunately, updatingView is called quite frequently, such as when a new cell is selected, and I don’t want to resize the spreadsheet every time that happens because it would be a lot of unnecessary work. Do you have any other suggestions?

  Thanks,
  
  Holly

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 8 January 2018, 4:54 pm EST

  Hi Holly,
  
  You may call resizeSpreadSheet method when a row is added to the FlexSheet by condition check.
  
  Please refer to the updated code snippet:

   var rowCount=0;
              sheet.updatingView.addHandler(function () {
                  if(sheet.rows[0].dataItem==undefined){
                      sheet.rows[0].visible=false;
                  }
                  if(rowCount !== sheet.rows.length){
                      rowCount=sheet.rows.length;
                      resizeSpreadsheet();
                  }
              });
  

  ~Manish

• 

  holly.anderson

  • Post Options:
  • Link
    Copy

  Posted 8 January 2018, 11:40 pm EST

  Hi Manish,

  Thanks for the snippet. That seems to be working. Out of curiosity, do you know if it’s by design that the new row doesn’t exist in the row collection when the collectionChanged event is executed on a FlexSheet that is bound with Knockout?

  Holly

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 9 January 2018, 9:03 pm EST

  HI Holly,
  
  The row gets added in RowCollection on collectionChanged but not clear why it takes a second with Knockout.

  Hence, we have queried from the development team with internal tracking id 304715.
  
  We will let you know as we get any update on this.

  ~Manish

• 

  holly.anderson

  • Post Options:
  • Link
    Copy

  Posted 25 January 2018, 11:28 pm EST

  Is there any update on this?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 29 January 2018, 6:01 pm EST

  HI Holly,
  
  We are sorry for the late reply.
  
  This issue is still with the team.

  ~Manish

• 

  holly.anderson

  • Post Options:
  • Link
    Copy

  Posted 7 March 2018, 11:39 pm EST

  Here is the solution, as reported at https://www.grapecity.com/en/forums/wijmo/accessing-flexsheet-filter#regarding--304715in-your-s.

  ---

  "In your sample the collectionView.collectionChanged.addHandler was invoked before the flexSheet add bound sheet.

  This caused the collectionChanged handler to be triggered before the FlexSheet add new row.

  CollectionView.collectionChanged.addHandler should be invoked after the FlexSheet add bound sheet."