Submitting a form (in a dialog)

[John Phillips]

Hi there,

I am looking for some guidance when using Syncfusion controls. I have a form in a Dialog which renders okay, and I am using DialogTemplates. My question concerns the varying behaviors for the form, how to setup the buttons, etc.

For example, when using DialogTemplates Syncfusion makes the Enter key the default for form submissions. Accordingly, if the form is valid the Blazor OnValidSubmit event is triggered. However, it is unclear how to setup the "Submit" *button* for consistent behavior because that takes an OnClick event, which I suppose I can wire up to the same method that OnValidSubmit calls. I need consistent form validation and for the EnterKey and Submit button to work consistently.

What is the difference or pros/cons of using DialogButton by itself, vs. using DialogButton with an DialogButtonModel.

For example:

<DialogButton Content="Submit" IsPrimary="true" OnClick="@OnClickSubmit" />

vs.

 <DialogButton OnClick="@DlgConfirm" Type="Submit">

   <DialogButtonModel Content="Confirm" IsPrimary="true" Disabled="true"></DialogButtonModel>

</DialogButton>

Then, in the source for your Blazor Demos (Dialog Template) you are using a regular HTML submit button...

Can you provide some clarity on these questions and the best practice here?

Thank you in advance!

-Jp

[Vinitha Jeyakumar]

Hi John, 

 

 

Currently, we are validating your reported query. We will update you the further details in two business days on 14^th September. 

 

Regards, 

Vinitha. 

[Vinitha Jeyakumar]

Hi John, 

 

 

Good day to you 

 

 

We have further validated your queries. 

 

Query 1. “I need consistent form validation and for the EnterKey and Submit button to work consistently” 

 

We want to let you know one thing about the DialogButton behavior, when the DialogButton type is in submit both the OnValidSubmit and OnClick events will be triggered while pressing the Enter key and when clicking the button, OnClick event only will get triggered. 

 

While using an HTML Submit button, the OnValidSubmit event will trigger when pressing the Enter key and onClick event will get trigger when clicking the button. 

 

So, can you please share us with some more information regarding your requirement with the DialogButons. It will be helpful for us to provide you the prompt solution. 

 

Query 2. “What is the difference or pros/cons of using DialogButton by itself, vs. using DialogButton with an DialogButtonModel” 

 

We have deprecated the DialogButtonModel since our Volume 2 2021 release. So, in our latest versions, you can use DialogButton itself which has all the properties similar to DialogButtonModel. 

 

Regards, 

Vinitha. 

 

[Ntumba Alain]

Hi Vinitha 

I want to submit a validated form with the DialogButton but it keeps failing. 

I have an EditForm populated in a SfDialog tag and I have buttons in the DialogButtons tags. When I click the submit button, it calls the bind method and submits the form without validating it. How do I trigger a form's OnValidSubmit method from the DialogButton

[Vinothkumar Yuvaraj]

Hi John,

To resolve your issue, you can add an ID to the EditForm and assign it to the form attribute on the submit button. I've attached a sample and the following code for your reference.

<SfDialog >

    <DialogTemplates>

            <Content>

            <EditForm id="@MyID" OnValidSubmit="@SaveAuthor1"></EditForm>

            </Content>

        </DialogTemplates>

    <DialogButtons>

            <DialogButton form="@MyID" Type=ButtonType.Submit IsPrimary="true" Content="Save" OnClick="@OnBtnClick1" />

    </DialogButtons>

</SfDialog>

@code{

   private string MyID = "myid";

}

Please let us know if you have any other concerns.

Attachment: BlazorApp1_59850114_d1e982b.zip