Datagrid dialog edit close button control

Hello

I use dialog and template edit mode to add and update a new record.

I am using the web api service on the remote server for CRUD operations. I trigger the service by using the OnActionBegin event in adding, updating and deleting new records. I am sharing the my code block below.


GridEdit options:

<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams">


OnActionBegin handler:

 public async void ActionBeginHandler(ActionEventArgs<Firm> args)

        {

            try

            {

                string rType = args.RequestType.ToString();

                switch (rType)

                {

                    case "Save":


                        if (args.Action == "Edit")

                        {

                            httpResponseMessage = await FirmService.Update(args.Data);

                            if (httpResponseMessage.StatusCode == System.Net.HttpStatusCode.OK)

                            {

                                ShowToastMessage(ToastType.Success, Resx.Keys["UpdateRecordSuccessfully"]);

                            }


An ok or error message may be returned from the service. If there is an error, I want to give an error message to the user as a toast message and keep the dialog screen open.

However, when I press the save button, the dialog screen closes. Error message comes after dialog screen closes


In the above example, if there is an error from httpResponseMessage, I want the dialog screen to remain open.


I also tried adding a Custom Save button, but in this case, I couldn't find a way to read the current values ​​like "ActionEventArgs<Firm> args)".


                    @*<FooterTemplate>

                        <SfButton CssClass="btn btn-primary" OnClick="Save" IsPrimary="true">Save</SfButton>

                        <SfButton OnClick="Cancel">Cancel</SfButton>

                    </FooterTemplate>*@



      protected async Task Save()

        {

            try

            {

                httpResponseMessage = await FirmService.Update(myFirm);

                if (httpResponseMessage.StatusCode == System.Net.HttpStatusCode.OK)

                {

                    ShowToastMessage(ToastType.Success, Resx.Keys["UpdateRecordSuccessfully"]);

                }

                await DefaultGrid.CloseEdit();

                DefaultGrid.Refresh();

            }

            catch (Exception ex)

            {

                ShowToastMessage(ToastType.Error, ex.Message);

            }

        }


What is the best way to use it this way?


Thanks a lot.


1 Reply

RN Rahul Narayanasamy Syncfusion Team January 4, 2022 12:56 PM UTC

Hi Seckin, 

Greetings from Syncfusion. 

Query: In the above example, if there is an error from httpResponseMessage, I want the dialog screen to remain open. 

You can achieve your requirement by setting args.Cancel as true while getting error in OnActionBegin event of the Grid. While setting args.Cancel as true, the default save operation is prevented and the dialog remains visible without closing. Find the below code snippets sample for your reference. 

 
<SfGrid DataSource="@GridData" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })"> 
    <GridEvents OnActionBegin="ActionBeginHandler" TValue="OrdersDetails"></GridEvents> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog"> 
        <Template> 
            . . . 
        </Template> 
    </GridEditSettings> 
    <GridColumns> 
        . ..  
    </GridColumns> 
</SfGrid> 
 
@code{ 
    . . . 
    bool IsError { get; set; } = true; 
    public void ActionBeginHandler(ActionEventArgs<OrdersDetails> args) 
    { 
        if(args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save) && args.Action == "Edit") 
        { 
            if (IsError)   //consider getting error 
            { 
                args.Cancel = true;     //cancel the default save operation 
                //show error message here... 
            } 
        } 
    } 
 
} 


Reference: 

Please let us know if you have any concerns. 

Regards, 
Rahul 


Loader.
Up arrow icon