We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

EditForm Save and Next buttons

Hi,

EditForm Save and Next buttons have to validate model and check if EditContext has been modified.

In an EditForm, in addition to a "Save" button (with type="submit"), there's a second button "Next". This "Next" button should do the following:

  1. check if model has been modified (using editContext.IsModified() maybe?)
    1. if yes, display SfDialog with "save" and "cancel" buttons.
      1. upon clicking "Save", validate model (maybe using editContext.Validate() ?)
        1. if validated then call SaveForm() method
        2. else just show form with validation message in model annotations
      2. "cancel" button should just close the SfDialog to show the form 
    2. if no, redirect to another razor component.

Could you please propose an elegant solution for these form actions?


1 Reply

YA YuvanShankar Arunagiri Syncfusion Team February 23, 2023 08:47 AM UTC

Hi Soundarya,


We have checked your requirement and prepared the sample. Kindly refer to the below code snippet and attachment(sample code with video demonstration).


<EditForm Model="@editorModel">

        ……………………

        <SfButton>Submit</SfButton>

        <SfButton OnClick="OnClickNext">Next</SfButton>

    </EditForm>

 

     <SfDialog @ref="dialogObj" Height="50%" Width="435px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility" IsModal="true">

            <DialogTemplates>

               <Content>

                    <EditForm Model="@editorModel">

                        ……………

                    </EditForm>

            </Content>

        </DialogTemplates>

    </SfDialog>

…………

private void OnClickNext()

    {

        if (editorModel.Name != null) {

            dialogObj.ShowAsync();

        } else {

            // you can handle else condition

        }

    }


If we are misunderstanding your requirement, please share the video demonstration or screenshot of your requirement. Based on that we will check and provide you a better solution quickly.


Regards,

YuvanShankar A


Attachment: Index_aee2b399.zip

Loader.
Live Chat Icon For mobile
Up arrow icon