How can I cancel the Grid Dialog submission?

[Laurin S]

Hi, I'm using the Grid component and created my own Dialog Edit template. Now I wanted to ask, how can I catch the submit-event, since I want to validate the form fields in a certain way, and if everything is okay, the submission can be done, otherwise I want to cancel the submission.

<Grid

  editSettings={{

      allowEditing: true,

      allowAdding: true,

      allowDeleting: true,

      mode: "Dialog",

      template: (record: object) => {

        const onSubmit = () => { // Where/how can I bind this event?

          //validation == true

          //  submit

          //else

          //  cancel

        }

        return(

          <div className="ms-Grid" dir="ltr">

            <div className="ms-Grid-row">

              <div className="ms-Grid-col ms-sm6">

                <input type="text" value={record["description"]} />

              </div>

              <div className="ms-Grid-col ms-sm6">

                <input type="text" value={record["email"]} />

              </div>

            </div>

          </div>

        );

      }

  }}

  [...]

/>

I want to use the buttons of the "default" footer of the Dialog. I also have two tabs inside the Dialog. Therefore, having the submit-buttons in the footer is necessary. Where/How can I bind this onSubmit event to the Submit-Button?

[Sujith Kumar Rajkumar]

Hi Laurin, 

 

Greetings from Syncfusion support. 

 

Based on the query we could understand that your requirement is to perform your own validation on save and cancel the action if the validation fails. This can be achieved by using the Grid’s actionBegin event(triggers before saving a record) where you can perform your required validation and cancel the ‘save’ action if it fails by setting ‘false’ value to the event arguments ‘cancel’ property. This is demonstrated in the below code snippet, 

 

// Grid’s actionBegin event handler 

onActionBegin(args) { 

    // The save action is cancelled if ‘Freight’  field value is less that ‘10’ 

    if (args.requestType === 'save' && args.data['Freight'] < 10) { 

        args.cancel = true; 

    } 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/react-lixaja?file=index.js 

 

API links: https://ej2.syncfusion.com/react/documentation/api/grid/#actionbegin  

                  https://ej2.syncfusion.com/react/documentation/api/grid/saveEventArgs/#cancel  

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R