Retain added row in Flex grid

Retain added row in Flex grid

Posted by: chandrika.kerur on 1 August 2023, 4:43 pm EST

• 

  chandrika.kerur

  • Post Options:
  • Link
    Copy

  Posted 1 August 2023, 4:43 pm EST

  Scenario :
  
  when user adds a new row and completes editing it, there are validations checks done and in case of an validation error the added row vanishes.

  requirement :
  
  we want the row to be retained so that user can be given a chance to edit and correct the data entered.

  How can we achieve this?

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 2 August 2023, 11:00 pm EST

  Hi,

  Sorry for the delayed response. I am not able to replicate the issue on my end. Could you please specify how you have implemented validations in the FlexGrid. It would be really helpful if you could provide a minimum working sample replicating your issue. Also, please let us know the version of Wijmo which you are using. You can also modify the below shared sample to replicate the issue.

  Please refer to this sample for reference: https://stackblitz.com/edit/js-bvpfzi

  Regards

• 

  chandrika.kerur

  • Post Options:
  • Link
    Copy

  Posted 3 August 2023, 4:53 pm EST

  Hi,

  I have updated the sample to replicate the issue. : *https://stackblitz.com/edit/js-mf8wst
  
  Just for reference in the sample, when i add a row with country as “dummy” - case where validation fails.

  • user should be given a chance to correct that value and not appending the row to last of the grid.

  I am aware of property “stayInEditMode” offered with “cellEditEnding” - but this is not useful in our case as :

  • some validations are to be done when entire row edit completes.
  • some validations are done from backend on a post call( entire row data to be sent as payload ), and in their error scenario i want to continue with “editMode”.

  Kindly provide a solution

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 6 August 2023, 5:01 pm EST

  Hi,

  To achieve the required functionality you can call the cancelNew() method of the CollectionView associated with the FlexGrid to prevent the addition of a new row when the data in the new row is not valid. Also, to start editing the invalid cell, we may use the startEditing() method of the FlexGrid class.

  Please refer to this sample for reference: https://stackblitz.com/edit/js-mgsdrx

• 

  chandrika.kerur

  • Post Options:
  • Link
    Copy

  Posted 9 August 2023, 10:07 pm EST

  Hello,

  For new addition to the grid the solution proposed handles it .
  
  Now i want the behaviour to be uniform when user edits an existing row also .

  scenario

  • user edits existing row, validation check for cell throws an error - at this point i want to make all cells of the grid to be read only and the only row that user is editing to remain as it is.

  current behaviour:

  • when validation error is thrown for a cell(1), if user tries to copy value from another cell say cell[3] he clicks on cell[3] and copies the value goes back to cell[1] to paste it.
  • now as soon as user clicks on cell[1], cellEditEnded method is triggered for cell[3]

  this is a problem as user’s intention was to edit cell[1] and not cell[3]

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 10 August 2023, 6:12 pm EST

  Hi,

  I have modified the previous sample to meet the updated requirement. In the updated sample I have used the rowEditEnding event to apply validation to the row. Also, to make only the current row editable I have set the isReadOnly property of other rows to true and when the validation passes then I have reset the isReadOnly property of all the rows to false.

  Please refer to this sample for reference: https://stackblitz.com/edit/js-ycetns

  Still, in case, if you face any issues then please share a working sample replicating the issue. You can also modify the shared sample such that it replicates your issue. Also, please share detailed steps to replicate the issue as well as a video or GIF showing the steps which replicate the issue.

  Regards
  
  Anirudh