Save confirmation dialog in EditMode.Dialog and disable Enter key

Hi,

based on your documentation on DataGrid you implemented  DeleteConfirmation and BatchConfirmation dialogs to prevent accidental deletions or updates.
I was wondering why there is no SaveConfirmation dialog or maybe I'm missing something

My scenario.

The user clicks on the row, in the case of EditMode.Dialog new Dialog appears with the selected record, he edits the record and when he presses the save button
the new modal dialog appears with the option to save or cancel.

I put SfDialog on the page, and I hoped that if I show modal dialog inside OnActionBegin  it will stop code execution and wait for user input, but code continues forward and only after OnActionComplete is done, the dialog appears.

 public async void OnActionBegin(ActionEventArgs<WeatherForecast> Args)
    {

        .....
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save)
        {
            if (Args.Action == "Add")
            {
                //some code....
            }
            else
            {

                this.ConfirmDlgVisible = true;

                // here I would like to show confirmation dialog with options Save or Cancel and continue or stop with
                // save

                //some code....

            }
        }

So, in general, I have a few questions:
1. How to achieve this inside OnActionBegin, in general how to stop code execution
    I know you can call another method with  <DialogButton Content="No" OnClick="@HideDialog" />  and use some bool value to handle the result
3. Can we disable the Enter key to close the Edit dialog?

I included my test project, this is on DataGrid page.

Attachment: SyncfusionTests_8f2e2faf.7z

3 Replies 1 reply marked as answer

RS Renjith Singh Rajendran Syncfusion Team July 14, 2020 12:02 PM UTC

Hi df, 

Greetings from Syncfusion support. 

Query 1 : 1. How to achieve this inside OnActionBegin, in general how to stop code execution 
Based on your requirement, we have modified the sample. Please download the sample form the link below, 
 
In the above sample, we have cancelled the save action by using the Args.Cancel in OnActionBegin handler. And to update the values to Grid, when clicking the Yes button in save confirmation dialog, we have use the EndEdit() method of Grid. Please refer the code below, 

 
<SfDialog @bind-Visible="@ConfirmDlgVisible" IsModal="true" Width="400px" Target="#mygrid" ShowCloseIcon="true" ZIndex="1002">  @*set z-index more than edit dialog*@    ...    <DialogButtons>        <DialogButton Content="Yes" IsPrimary="true" OnClick="@SaveHideDialog" />        <DialogButton Content="No" OnClick="@HideDialog" />    </DialogButtons></SfDialog>
 
@code { 
    ... 
    public void HideDialog(Object e) 
    { 
        ... 
    } 
    public void SaveHideDialog(Object e) 
    { 
        this.ConfirmDlgVisible = false; 
        this.flag = true; 
        Grid.EndEdit();        //Save the changes to Grid programatically. 
    } 
    public async void OnActionBegin(ActionEventArgs<WeatherForecast> Args) 
    { 
        ... 
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save) 
        { 
            if (Args.Action == "Add") 
            { 
                //some code.... 
            } 
            else if(!flag) 
            { 
                this.ConfirmDlgVisible = true; 
                Args.Cancel = true;            //cancel the save action
                ... 
            } 
        } 
        ... 
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit && flag) 
        { 
            flag = false; 
        } 
    } 
   ...  
} 


  
We have validated your reported query. We have a similar option in SfDialog, which returns the action of the SfDialog Closed. Can detect the SfDialog close action in the OnClose eventArgs, using the ClosedBy argument which returns ("Escape"|| "Close Icon" || “User Action“) based on the SfDialog closed.  
  
Escape: When the dialog is closed using the Esc key.  
Close Icon:  When the dialog is closed using the Close Icon.  
User Action: When the dialog is closed using the Buttons.  
  

Please check the above solution and let us know if it meets your requirements. 

Query 3 : 3. Can we disable the Enter key to close the Edit dialog? 
We are not clear about your scenario regarding this query. As based on the Query 1 , the edit dialog will remain open, even after pressing Enter key. So if you need assistance regarding this query, then kindly get back to us with a detailed description regarding this requirement and scenario. And also, we suggest you to use the @onkeypress event for the Grid component. This will be triggered when pressing key, so based on your scenario you can customize the codes in this handler. 
 
<SfGrid ID="mygrid" @ref="Grid" DataSource="@forecasts" @onkeypress="onkeypress" ...>
 
public void onkeypress(KeyboardEventArgs args){ }
 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Marked as answer

DF df July 14, 2020 01:04 PM UTC

Hi Renjith Singh,

thank you for the reply.

Query1.
Yes, that is what I wanted to achieve, thank you.
Query2.
I will take a look.
Query3.
Yes, if we use that flag then also Enter key is "disabled", I mean dialog box appears with the question.
When I tried to intercept the Enter key

    public void onkeypress(KeyboardEventArgs args)
    {

        var p = args.Code;

    }

and put the breakpoint on the var, it is triggered when I press enter key inside the grid, let's say search on the top of the column,
but if you press it inside edit dialog, it opens the second confirmation dialog w/o triggering onkeypress and then if I press Enter key again to confirm default YES button,
onkeypress is triggered. If you click with mouse that YES button, keypress is never triggered.

But in any case thx again, the main problem was to stop the save if user don't press the YES button






RS Renjith Singh Rajendran Syncfusion Team July 15, 2020 02:45 PM UTC

Hi Dubravko, 

Thanks for your update, we are glad to hear that the provided solution helped you in achieving your requirement. 

Query3. 
We could face the same behavior, when using the @onkeypressed event. From your update we could see that your requirement has achieved with the solution from our previous update. So if you still need assistance regarding this Query3 then kindly get back to us with the complete requirement details regarding why and in which cases you need to prevent the Enter key press. This would be helpful for us to proceed further regarding the enter key press requirement.  

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Loader.
Up arrow icon