Custom Dialog to Insert/update OnClose leaves Grid in Inline editing mode

[Paolo]

Hi Syncfusion team,

I manage insert/edit form a SfGrid (using normal toolbar Add Edit funcionalities) to open a SfDialog that include a custom Blazor Component to manage a complex (master/detail) insert and update actions.

After Insert a new record it works very well, but after editing (both selecting a record and press Edit, as well as through a double-click on the row), the Grid remains in a "inline editing" mode.

How can I fix this behaviour?

Here some code:

This is how I manage the insert/update through a custom component (named PhaseInsertion ): 

<SfDialog Width="950px" @bind-Visible="@IsVisible" ShowCloseIcon="true" IsModal="true" Target="#OfferPhasesGrid">

    <DialogTemplates>

        <Header>@dialogTitle</Header>

        <Content>

            <PhaseInsertion Phase="@SelectedRecord" CloseDialog="OnClosed"></PhaseInsertion>

        </Content>

    </DialogTemplates>

    <DialogPositionData X="@Xvalue" Y="@Yvalue"></DialogPositionData>

    <DialogEvents Closed="@DialogPhaseClose"></DialogEvents>

</SfDialog>

Here is the  DialogPhaseClose event:

    private async void DialogPhaseClose(Object args)

    {

        StateHasChanged();

        await OfferPhasesGrid.Refresh();

    }

Here how I activate the Dialog:

    public void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        if (args.Item.Text == "Add")

        {

            SelectedRecord = new OffersPhasesModel();

            SelectedRecord.IdOffersPhase = MyTools.TempIdGenerator.NextId();

            SelectedRecord.IdOffer = offerta.OffersHeader.IdOffer;

            SelectedRecord.IsNew = true;

            dialogTitle = "Insert Phase";

        }

        if (args.Item.Text == "Edit")

        {

            SelectedRecord.IsNew = false;

            dialogTitle = "Edit Phase " + SelectedRecord.PhaseName;

        }

        StateHasChanged();

        IsVisible = true;

    }

and finally here the Grid definition:

<SfGrid @ref="OfferPhasesGrid" DataSource="@offerta.Phases"

        Toolbar="@ToolbarItems"

        AllowPaging="true"

        AllowSorting="true"

        AllowFiltering="true"

        AllowExcelExport="true"

        EnableStickyHeader="true"

        AllowResizing="true"

        ContextMenuItems="@MenuItems">

    <GridPageSettings PageSize="50"></GridPageSettings>

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

    <GridEditSettings AllowEditing="true" AllowAdding="true"

                      AllowEditOnDblClick="@canEdit" AllowDeleting="true"

                      ShowDeleteConfirmDialog="true"></GridEditSettings>

    <GridEvents RowSelected="@RowSelectedHandler" OnRecordDoubleClick="@RecordDoubleClickHandler"

                OnActionBegin="ActionBeginHandler" OnActionComplete="ActionCompleteHandler"

                OnToolbarClick="@ToolbarClickHandler" TValue="OffersPhasesModel"></GridEvents>

I have seen that after an insertion the Grid makes a sort of refresh: in a first moment appears as an inline mode, immediately after this disappears. Not after an edit: it remains in an inline editing mode. I tried to add Mode="EditMode.Dialog"; in this case I have to close first the embedded Dialog, use my custom Dialog, and then also after editing it works. But this is not a practical way to solve this problem.

[Sanjay Kumar Suresh]

Hi Paolo,

While checking your query, we understand that you are using a custom dialog to handle the edit operations of the DataGrid on your side. It appears that you are facing an issue after performing the edit operation in your scenario. We have created a simple sample to customize the editing and ensured from our end, we have attached the concern sample from our end.

Sample: https://blazorplayground.syncfusion.com/embed/VDBoiVDMyKdMhywc?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Before proceeding with the reported requirement, we require some additional clarification from your end. Please share the below details to proceed further at our end.

1. If we are using a custom dialog to handle the CRUD operations, why inline editing mode is used after editing.
2. Please provide your requirement more elaborately, and the issues faced while implementing.
3. Please provide a simple issue replicating sample from your end or try to modify the above-attached sample.
4. Share us the video demonstration of the reported issue.

The above requested detail will be very helpful for us to validate the reported issue at our end.

Regards,

Sanjay Kumar Suresh

Attachment: CustomEdit_2876aa15.zip

[Paolo]

Hi Sanjay,

thank you for your answer. Well my scenario is a little bit more complicated that your sample shared with me.

Firstly, I tried to anser to some of your questions:

1. If we are using a custom dialog to handle the CRUD operations, why inline editing mode is used after editing. This is the point: I don't want to get inline editing! But it activated without my wishes.
2. Please provide your requirement more elaborately, and the issues faced while implementing. I use a SfStepper. In the second step I insert a Grid. Using Toolbar button, I open a custom Dialog to insert/update the record. In this Dialog I embed a Blazor component of mine, that manage CRUD operation in a master detail scenario. On insert completion, the original Grid works perfectly. On update completion, the Grid remains in "inline" mode.
3. Please provide a simple issue replicating sample from your end or try to modify the above-attached sample. Your example works fine, but it is a simple scenario w.r.t. mine.
4. Share us the video demonstration of the reported issue. Video here: https://www.pausamedia.eu/video.mp4

I hope this clarifies better my issue.

Best regards

Paolo 

[Guhanathan Ramanathan]

Hi Paolo,

We are analyzing the attached video and found that records remains in the edit state even after saving the changes using custom dialog. We suspect that you have displayed custom dialog when clicking the Edit toolbar button. But haven’t [revented the default edit action triggered when clicked the Edit toolbar button. To resolve this, we have provided solution using RowEditing event to cancel the editing in the previous response. Refer to the below code example sample provided in previous update for your reference.

<SfGrid @ref="Grid" DataSource="@OrderData" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" Height="315">

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.Blazor.Grids.EditMode.Normal"></GridEditSettings>

    <GridEvents OnToolbarClick="ToolbarClickHandler" RowEditing="RowEditingHandler" RowSelected="RowSelectedHandler" TValue="OrderDetails"></GridEvents>

. . . . . . . .

</SfGrid>

@code

{    . . .

    public void RowEditingHandler(RowEditingEventArgs<OrderDetails> args)

    {

        // You can cancel the inbuilt edit operation here.

        args.Cancel = true;

    }

 

If you are still facing the issue, please get back to us with a sample.

Regards,
Guhanathan R

[Paolo]

Hi  Guhanatha,

your suggested solution works really fine!

Thank you

Paolo