How to close the Grid EditMode dialog on Save

[David Adler]

I am using SyncFusion.Blazor v 18.10.046

I have a grid where I am using the  Mode="EditMode.Dialog" setting of the GridEditSettings component. By devault, then I click on the Save button in the Edit dialog, the dialog stays open until I click on the Close button. 

How to I change it so that when I click on the Save button, the record saves and the EditDialog closes?

[Renjith Singh Rajendran]

Hi David, 

Thanks for contacting Syncfusion support. 

By default, when click on the Save button in the edit dialog, the changes made are updated in the row of Grid and the EditDialog closes. Please refer our online demo and documentation for more details on this topic. 

Online demo : https://blazor.syncfusion.com/demos/datagrid/dialog-editing?theme=bootstrap4 

Documentation : https://blazor.syncfusion.com/documentation/datagrid/editing/?no-cache=1#dialog 

We suspect that there may be some problem with your code for Dialog editing which is preventing the closing of Dialog when click on Save button. So we suggest you to ensure your codes with the codes from our above shared documentations.  

And also, if you are still facing difficulties, then we need more details to further proceed on this and provide you a solution as early as possible. Kindly get back to us with the following details for better assistance. 

1. Share the sample which you have tried from your side. So that we could validate the problem based on your scenario.
2. Share the details on script error if any occurred in the browser console.
3. Share the complete Grid rendering codes and model code.
4. Share a video demo showing the problem you are facing.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 

Renjith Singh Rajendran 

[David Adler]

I followed the documentation, however, the example uses the default EditMode.Dialog. In my implementation, I am customizing my edit dialog to only show the fields I want to edit and to change the header. Here is my grid .razor code.

    <SfGrid @ref="@Grid" DataSource="@OrderLineItemData" Height="100%" Width="100%">

        <GridEvents OnActionBegin="ActionBeginHandler" TValue="OrderLineItem"></GridEvents>

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

            <Template>

                @{

                    var lineItem = (context as OrderLineItem);

                    <div width="400px">

                        <div class="row">

                            <div class="col-12">

                                <div class="form-group">

                                    <label>Product</label>

                                    <SfTextBox ID="Product" Value="@(lineItem.ProductName)" Enabled="false"></SfTextBox>

                                </div>

                            </div>

                        </div>

                        <div class="row">

                            <div class="col-12">

                                <div class="form-group">

                                    <label>Qty</label>

                                    <SfNumericTextBox ID="Quantity" Value="@(lineItem.Quantity)" Enabled="true" ShowSpinButton=false Format="n0"></SfNumericTextBox>

                                </div>

                            </div>

                        </div>

                    </div>

                }

            </Template>

        </GridEditSettings>

        <GridColumns>

            <GridColumn HeaderText="" Width="150" AllowEditing="false">

                <Template>

                    @{

                        var lineItem = (context as OrderLineItem);

                    }

                    <button class="btn btn-outline-primary btn-sm" type="button" title="Increase qty by 1"

                            @onclick="@(_ => { if (context != null) HandleQtyIncrease(lineItem);})">

                        <span class="fas fa-plus"></span>

                    </button>

                    <button class="btn btn-outline-primary btn-sm" type="button" title="Decrease qty by 1"

                            @onclick="@(_ => { if (context != null) HandleQtyDecrease(lineItem);})">

                        <span class="fas fa-minus"></span>

                    </button>

                    @if (lineItem.Quantity > 0)

                    {

                        <button class="btn btn-outline-danger btn-sm" type="button" title="Reset qty to 0"

                                @onclick="@(_ => { if (context != null) HandleQtyClear(lineItem);})">

                            <span class="fas fa-times"></span>

                        </button>

                    }

                </Template>

            </GridColumn>

            <GridColumn Field=@nameof(OrderLineItem.Quantity) HeaderText="Qty" Width="75px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center">     </GridColumn>

            <GridColumn Field=@nameof(OrderLineItem.ProductName) HeaderText="Product" AllowEditing="false"></GridColumn>

            <GridColumn Field=@nameof(OrderLineItem.UnitPrice) HeaderText="Each" Format="C2" Width="100px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" AllowEditing="false"></GridColumn>

            <GridColumn Field=@nameof(OrderLineItem.Discount) HeaderText="Discount" Format="C2" Width="100px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" AllowEditing="false"></GridColumn>

            <GridColumn Field=@nameof(OrderLineItem.Total) HeaderText="Extended" Format="C2" Width="100px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" AllowEditing="false"></GridColumn>

        </GridColumns>

    </SfGrid>

And here is my DialogParams property from the .razor.cs file;

        protected object DialogParams { get; set; } = new

        {

            @params = new DialogModel

            {

                Header = "Edit Product Quantity",

                Width = "400px",

            },

        };

I have attached a set of screenshots, as follows;

EditMode.Dialog_Screenshot1_05082020_1024a.png - This shows the Edit Dialog popup when I double-click on the first row of the grid. Note the customized header text and the fact that I am only showing the ProductName and Quantity fields with the ProductName as readonly.

EditMode.Dialog_Screenshot2_05082020_1025a.png - This shows me typing in a quantity value in thee Qty field.

EditMode.Dialog_Screenshot3_05082020_1026a.png - This shows what happens after I click the Save button. Note that the first row has been updated, behind the Edit Dialog and that the Qty field in the edit dialog box is empty, but the  dialog itself did not close. I have to then click on the Cancel button to close the dialog. 

I thought that, perhaps, the problem was caused by the template so I commented out the the <GridEditSettings> --> <Template> section and removed the Dialog="DialogParams" property so that the default Edit dialog would appear but I still have the same problem. 

I also tried commenting out the <GridEvents> component, since your example doesn't have one. However, when I do that, the row doesn't update at all and the Edit dialog still does not close when I click on Save.

I am not seeing where the problem can be coming from. 

 

Attachment: SyncFusion_Screenshots_446ef3aa.zip

[Renjith Singh Rajendran]

Hi David, 

Thanks for your update. 

We could see that you have not enabled "IsPrimaryKey" to any of the columns in Grids. To perform CRUD operation in Grid, it is a must to set "IsPrimaryKey" for an unique value column in Grid. Based on the primary key column value only we will perform CRUD in Grid. So, we suggest you to ensure to set the "IsPrimaryKey" for a unique value column in Grid. 

Documentation : https://blazor.syncfusion.com/documentation/datagrid/editing/ 

Please refer the code below, 

 

<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ...Width="140"></GridColumn> 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[David Adler]

I am not actually using the CRUD capability of the grid, per se. On the Grid, I am using the OnActionBegin event to perform updates on the object model that the grid is displaying, I am not relying on the built in CRUD capabilities of the grid. 

However, just to be sure, I added the Id column to the grid, set its IsPrimaryKey value to true and it made no difference. The popup dialog still doesn't close when I click on Save.

Is there a way to manually close the Edit dialog from within the method that is called by the OnActionBegin event when reacting to the args.RequestType == Syncfusion.Blazor.Grids.Action.Save?

 

[Renjith Singh Rajendran]

Hi David, 

Thanks for your update. 

Based on your requirement, we suggest you to call the CloseEdit() method of Grid to close the Grid’s edit Dialog programmatically. 

Documentation : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CloseEdit 

In the OnActionBegin handler, cancel the default Grid’s editing action by setting “args.Cancel” as true. And then in the args.Data you can get the edited data from the edit form. And then call the CloseEdit() method to close the edit form programmatically. Please refer the codes below, 

 

public void ActionBeginHandler(ActionEventArgs<OrderLineItem> args) 

{ 

    if(args.RequestType.ToString() == "Save") 

    { 

        args.Cancel = true;     //Cancel the default editing action in Grid 

 

        //Here in args.Data you can get the edited data from edit form and use it for your custom editing 

 

        Grid.CloseEdit();       //Close the edit Dialog programatically 

    } 

} 

And also we suggest you to ensure to set the ID property for the components inside Dialog Template to be same as that of the Field property value of GridColumn to get proper edited values in args.Data. Please refer the codes below,  

 

         <div class="form-group"> 

           <label>Product</label> 

           <SfTextBox ID="ProductName" Value="@(lineItem.ProductName)" Enabled="false"></SfTextBox> 

         </div> 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[David Adler]

Renjith,

Grid.CloseEdit fixed the problem. Thanks.

[Renjith Singh Rajendran]

Hi David, 

Thanks for your update. 

We are glad to hear that our suggestion helped you in achieving your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Kevin Cabral]

This has been a standard reply for all problems with the grid that has gotten annoying.  These problems have very little to do with CRUD operations in the traditional sense, but their constant nit picking of the missing attribute when the problem is much different than that.

[Naveen Palanivel]

Hi Kevin,

From you update, we couldn't able to understand your exact requirement. Before proceeding your query, please share the below requested details. These specific will enable us to offer a precise solution.

1. kindly share what type issue you have faced from the previously updated sample
2. Share us the entire Grid code snippet along with model class.
3. Share us the video demonstration of the issue with replication procedure.
4. If possible kindly share us the issue reproduceable sample.

Regards,

Naveen Palanivel