Devextreme-reactive: Inline editing row validation?

[dmtrKovalenko]

• [x] I have searched out and not found any solution.

You are providing really awesome api for inline editing, but as I realized, there is no chance to validate user input for adding/editing rows. Maybe you will help me, is there any hook that will not submit user editing, if I`ll validate input from the backend side, or smth else?

[SergeyAlexeev]

Hi,
 
You can validate a user's input using the onCommitChanges property of the EditingState plugin.
 

<EditingState
  onCommitChanges={({ added, changed, deleted }) => {
    // check updated/added rows here
  }}
/>

 
This demo shows how to implement it.

[dmtrKovalenko]

Yep, but I have no chance to really prevent adding new row / update existed one if they are not valid. I propose to add new hook, that would fires before onCommit, that would allow dispatching onCommit or no.

validateChanges = ({ added, changed, deleted }) => {
   // check
   return true
}

[SergeyAlexeev]

To prevent editing existing rows, do not call the setState function within the onCommitChanges function.

[dmtrKovalenko]

I have found the solution, but looks really not good, i think would be more polite if something like that would be implemented from the grid side.

  onCommitChanges = (changeSet) => {
    const { editingRows, changedRows, addedRows } = this.state
    // should be a promise to validate changes.
    this.props.commitChanges(changeSet, this.props.rows)
      .then(() =>
        this.setState({ editingRows: undefined, addedRows: undefined, changedRows: undefined })
      )
      .catch(() =>
        this.setState({ editingRows, changedRows, addedRows })
      )
  }

[susuwatari2]

Do you have any sample on how this works?

[cevr]

@susuwatari2 I managed to use the example given to make a validator that disables the save button if there is an error.

demo

[cavr]

@cevr Thank you so much. It works.
Now the problem is how to mark for example in red the field with the error. (To Tell the user which errors are in the edition)

[cevr]

@cavr The only way I managed to solve this was to use the DataTypeProvider they offered. Specifically, I would mark an error on the input by doing a similar validation but in the component level.

function StringEditor({ value, onValueChange, column: { value: defaultValue, mandatory } }) {
    return (
        <TextField
            error={mandatory && (!defaultValue && !value)}
            defaultValue={value || defaultValue}
            onChange={e => onValueChange(e.target.value)}
            required={mandatory}
        />
    );
}

function StringTypeProvider({ displayTypes }) {
    return <DataTypeProvider editorComponent={StringEditor} for={displayTypes.string} />;
};

Here is a little example of a DataTypeProvider for strings I made. it would check if the column had a mandatory flag, and then do a simple validation. The validation would be up to developer to decide at that point.

[cavr]

@cevr
I have already done something similar, but in
<TableEditRow cellComponent={EditCell} /> it seems to be cleaner your solution I will try.

Thanks

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.