Next / React MultiRow Grid validation issues

Next / React MultiRow Grid validation issues

Posted by: matthew.peters on 6 July 2024, 12:08 am EST

• 

  matthew.peters

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 6 July 2024, 12:08 am EST

  I have a NextJS app that uses the MultiRow Grid. We have the following requirements:

  1. Some CELLS in the grid should be Read Only based on logic.
  2. The server can send back a message with the data. Display this message immediately below the row of data.
  3. While editing a cell of data, if the data entered fails validation, display a validation message immediately below the row of data. Keep the cell in edit mode until the user has corrected the error. When the error has been corrected, remove the message.

  We have been able to do 1 and 2 but 3 is causing issues. Please refer to the following code for a demonstration of the issues. All of the issues are in the cellEditEnding event. I have put the keyword “QUESTION” in the code to more easily find the issues.

  https://stackblitz.com/edit/stackblitz-starters-stgmmf?file=app%2Fpage.tsx

  These are the issues we are facing:

  Our grid is mostly made up of InputDate controls inside MultiRowCellTemplate CellEdit nodes.

  • After the cell has been edited, we are unable to retrieve the value of the date the user entered.
  • For some entered dates we need to modify the date entered. How do we change the value of the cell to something different than what the user entered?
  • Trying to display a validation message in the grid when the user fails input validation is not working at all. There is a method “showHideSampleError” to demonstrate the technique we are trying to use. When we use it inside the cellEditEnding method it causes an infinite loop.
• 

  matthew.peters

  • Post Options:
  • Link
    Copy

  Posted 7 July 2024, 11:45 am EST - Updated 7 July 2024, 1:25 pm EST

  If we cannot get the validation message inside the grid, can we get it to show in a popup that is displayed right below the cell that is being validated? The popup would show below the cell being validated when it is in error and would hide when it is not. The message would obviously need to be dynamic. The goal is to have the validation message display near the cell in error and for as long as it is in error.

  I like the error messages that show for CollectionView-based Validation. These are great because they highlight the cell in error and show the validation error message right next to the cell on hover. There are 2 issues with this:
  
  1 - The error message is ONLY shown when hovering over the corner. We want the message to always be displayed while the cell is in error.
  
  2 - The getError method does not allow for changing the source data. Per our requirements we want to be able to modify what the user entered.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 9 July 2024, 3:20 am EST

  Hi Matthew,

  1. The updated value of useState variables is not accessible inside the event handler function in Wijmo controls, and this behavior is by design, to stop any unnecessary rendering of the components in some cases. To get the updated value, please wrap the event handler functions inside React’s ‘useEvent’ hook. Please refer to the updated sample link below for the same.

  2. It seems you are using a custom InputDate editor inside the grid cell by inserting InputDate through cell templates, and trying to get the updated value through ‘grid.activeEditor’ property. Please note that you can assign custom editors to the ‘editor’ property of the column, using this way you’ll get the correct active editor and value, through ‘grid.activeEditor’ property.
     
     Please refer to the below sample for the same.

  3. You can display an error message on cells by setting a getError method in collectionView, and if you want the error message always visible, you’ll have to implement the complete error validation manually, and can show the error message in a Popup above the cell. Please refer to the below sample for the same. In the sample, we have implemented validation logic, such that, the date set in the ‘POD’ column should always be greater than or equal to the ‘Shop Proceeding’ date. Please note that this is just a custom implementation, we tried to cover all possible scenarios, however, it might be possible all scenarios may not be handled to show error. So, we would still recommend using the default getError method to implement validation in the grid, default validation will keep the grid in edit mode until the error is resolved(make sure to set grid’s validateEdits property to true) and the error message will only appear on hovering over the cell, however, the cell will be highlighted as error cell all the time.

  4. To modify the date entered by the user, you can handle the ‘cellEditEnding’ event, check the value entered by the user, and then directly modify the value in row’s dataItem. Please refer to the below sample for the same, we have added code to automatically set the date in ‘POD’ column to next Friday as per your requirements.

  Please refer to the following updated sample for the same - https://stackblitz.com/edit/stackblitz-starters-wyfp4u?file=app%2Fpage.tsx

  Regards

• 

  matthew.peters

  • Post Options:
  • Link
    Copy

  Posted 10 July 2024, 9:12 pm EST

  These are great suggestions. Thank you. One other thing to ask. We had implemented a custom Editor Cell using a Cell Template as detailed here ( FlexGridCellTemplate cellType=“CellEdit” ):

  https://developer.mescius.com/wijmo/demos/Grid/CustomCells/CellTemplates/Overview/react
  
  https://developer.mescius.com/wijmo/demos/Grid/CustomCells/CellTemplates/CommonTasks/react

  If we are using a Custom Cell template, how do we retrieve the value that the user entered inside the CellEditEnding event? Or is it just not possible and we have to use a custom editor as detailed here:

  https://developer.mescius.com/wijmo/demos/Grid/Editing/CustomEditors/react

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 12 July 2024, 2:49 am EST

  Hi Matthew,

  You can get the edited value when using a customer editor inserted through cell templates also, you’ll need to modify the ‘valueChanged’ event handler of the InputDate to update the current selected value in the row’s dataItem. Then you can access the newly selected date inside the ‘cellEditEnding’ event, by either the eventArgs.data property or getting it from row’s dataItem directly.
  
  Please refer to the following code snippet -

  <MultiRowCell
              binding="PROJECTED_OUT_DATE"
              isRequired={false}
              header="POD"
              cellType="Cell"
            > 
            <MultiRowCellTemplate cellType="CellEdit" template=
              {(context: any) => (
                  <InputDate value={context.value}
                      valueChanged={(inputDate: any) => {
                        context.item[context.col.binding] = inputDate.value;
                        context.value = inputDate.value;
                      }} />
              )} />   
            </MultiRowCell>

  Please refer to the following updated sample for the same - https://stackblitz.com/edit/stackblitz-starters-98anzg?file=app%2Fpage.tsx

  Regards