How to inform User, that a modified form is changed without save is menu navigation is made

[Peter]

I have this structure:

+ Menu - Navigation Page Load to div "Desktop"
   + div desktop
      + Toolbar
      + Splitter Vertical
           +Splitterpane
                 -Overview Grid
           +Splitterpane
                 - Detail
                       +TelerikEditForm
                            -lot of stuff-

         

Problem: How to get an infromation if the EditForm IsModified() and someone uses the navigation to fire an other page.

User request: Please show a dialog to ask user for abort  or save.

So I was looking for an OnBlur() Event. But there is no such an event I can Intercept the Action.

I've no idea how I can solve this request. Ok, no simple way... :-) 

This is such a typical situation that I can't imagine it can't be solved with Blazor's built-in tools. But I currently have tomatoes on my eyes. Probably, I can't see the forest for the trees right now.

Any hint would be gratefully received. :-)

[Dimo]

Hello Peter,

Here are a few pointers:

• To detect and possibly prevent navigation, use the LocationChanging event of the NavigationManager. It was added in .NET 7, so I hope you are on it.
• To detect form changes, use the API of the EditContext, which our Form exposes through its instance (in case you are not defining the EditContext yourself).

Regards,
Dimo
Progress Telerik

[Sua]

Hi Dimo, 

do you have any Repl for this example? The popup is not an option for me.

 

Thanks

[Dimo]

@Sua

The linked blog post about LocationChanging Event contains a complete example and below is another one. It's not required to use a popup, but you still need some kind of conditional logic to determine whether to prevent the navigation. Using a predefined Dialog is a feasible approach, because it can stop the event handler execution util the user confirms their desire to navigate or not. No other component of ours can do that.

@implements IDisposable
@inject NavigationManager NavigationManager

<TelerikForm @ref="@FormRef"
             Model="@Employee"
             Width="300px">
    <FormItems>
        <FormItem Field="@nameof(Person.Id)" Enabled="false"></FormItem>
        <FormAutoGeneratedItems />
    </FormItems>
</TelerikForm>

<NavLink href="counter">Go To Counter</NavLink>

@code {
    private Person Employee = new Person();

    private TelerikForm? FormRef { get; set; }

    private IDisposable? NavEventRegistration;

    private ValueTask LocationChangingHandler(LocationChangingContext args)
    {
        if (FormRef?.EditContext.IsModified() ?? false)
        {
            args.PreventNavigation();
        }

        return ValueTask.CompletedTask;
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            NavEventRegistration = NavigationManager.RegisterLocationChangingHandler(LocationChangingHandler);
        }
    }

    protected override void OnInitialized()
    {
        Employee = new Person()
        {
            Id = 1,
            FirstName = "John",
            LastName = "Doe",
            BirthDate = DateTime.Today.AddYears(-30)
        };

        base.OnInitialized();
    }

    public void Dispose()
    {
        NavEventRegistration?.Dispose();
    }

    public class Person
    {
        public int Id { get; set; }

        public string FirstName { get; set; } = string.Empty;

        public string LastName { get; set; } = string.Empty;

        public DateTime BirthDate { get; set; } = DateTime.Today;
    }
}

 

[Sua]

Thank you for your response and the example provided. When I mentioned using a pop-up, I meant to suggest that the issue of forms not saving changes could be avoided if the edit form were implemented as a pop-up. Since that option isn't available to me, I was exploring alternative solutions, like the one you've mentioned. However, even after upgrading to .NET 7, I've encountered a problem: the RegisterLocationChangingHandler method doesn't seem to exist in the standard Blazor framework. Am I missing something here?

[Dimo]

I don't believe you need anything special to use RegisterLocationChangingHandler. I created the above example in a test .NET 6 app of mine, after I switched to <TargetFramework>net7.0</TargetFramework> in the .csproj file. Everything worked there was no need to change anything else.

Try the usual stuff - restart Visual Studio and delete the bin and obj folders in your app.

[Peter]

Hi Dimo,

thanks for the answer. I know EditContext and the navigation event. But there are more pieces in that puzzle there the user can click onto.

After a diskussion with the customer we changed the design to a much simpler solution, which has some advantages for us to ease the handling.

We introduced a "Edit" Button, and then wie open a modal window, only with the EditForm and voilá, all problems solved. So no click can be done elsewhere, and everbody ist happy.

Before using a modular window, I made different solution, I elvated the form to a high z-index and shift a div (attached to the MainDiv) with a lower z-index over the whole viewport. Added a clickhandle and get so a sort of "lost focus" event. Worked, but the we came up with the design change and that's much simpler to handle.

So this post can be closed.