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

2 Answers 34 Views
Form General Discussions Menu Splitter
Peter
Top achievements
Rank 1
Iron
Iron
Peter asked on 05 Nov 2023, 02:13 PM
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. :-)

2 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 08 Nov 2023, 09:43 AM

Hello Peter,

Here are a few pointers:

Regards,
Dimo
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Sua
Top achievements
Rank 1
commented on 19 Feb 2024, 06:40 PM

Hi Dimo, 

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

 

Thanks

Dimo
Telerik team
commented on 20 Feb 2024, 07:10 AM

@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
Top achievements
Rank 1
commented on 20 Feb 2024, 01:53 PM

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
Telerik team
commented on 20 Feb 2024, 02:06 PM

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.

0
Peter
Top achievements
Rank 1
Iron
Iron
answered on 09 Nov 2023, 03:01 PM

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.

Tags
Form General Discussions Menu Splitter
Asked by
Peter
Top achievements
Rank 1
Iron
Iron
Answers by
Dimo
Telerik team
Peter
Top achievements
Rank 1
Iron
Iron
Share this question
or