How to Warn user before leaving web page with unsaved changes

[Aleqsandre]

hello

I have SfGrid with Syncfusion.Blazor.Grids.EditMode.Batch and How to Warn user before leaving web page with unsaved changes in it?

and if record is selected in that grid and user presses delete key on keyboard how to popup dialog?

thank you

[Renjith Singh Rajendran]

Hi Aleqsandre, 

Greetings from Syncfusion support. 

Query 1 : How to Warn user before leaving web page with unsaved changes in it? 

You can fetch the edited batch changes in Gris using GetBatchChanges method. Based on the fetched value you can warn before leaving the page. Please refer the codes below, 

 

public async Task OnClick() 

{ 

    var BatchChanges = await Grid.GetBatchChanges(); 

    if(BatchChanges.AddedRecords.Count !=0 && BatchChanges.DeletedRecords.Count !=0 && BatchChanges.ChangedRecords.Count !=0 ) 

    { 

        //You can check for any modified record in Grid  

    } 

} 

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

 

Query 2 : user presses delete key on keyboard how to popup dialog? 

We suggest you to enable the ShowDeleteConfirmDialog property to achieve this requirement. 

<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch" ShowDeleteConfirmDialog="true"></GridEditSettings>

Reference : https://blazor.syncfusion.com/documentation/datagrid/editing/#delete-confirmation 

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[Gerald Peng]

Hi Syncfusion,

Where is the OnClick event in your suggestion subscribed from?

G

[Sarveswaran Palani]

Hi Gerald,

Thanks for contacting Syncfusion support again.

We have analyzed your query and would like to inform you that Onclick event is trigged on external button from SfButton component.

Please get back to us if you have any further queries.

Regards,

Sarveswaran PK

[Gerald Peng]

Hi  Sarveswaran

Thanks for your reply. Instead of a button click event, what if we need to warn the user when they leave the page and have pending changes that should be saved? How do we accomplish that?

Gerald.

[Sarveswaran Palani]

Hi Aleqsandre,

Greetings from syncfusion support.

We have analyzed your query and suggest you to use Dialog component of Syncfusion to warn the users when they leave the unsaved edited pages. Kindly refer the attached link and samples for more understanding.

Reference: https://blazor.syncfusion.com/documentation/datagrid/how-to/custom-delete-confirmation-dialog

Kindly get back to us if you have any further queries.

Regards,

Sarveswaran PK

Attachment: SfGridSfTab_20993454.zip

[Gerald Peng]

Hi  Sarveswaran,

I loaded this solution, added records to the html tab grid (without saving), and then clicked on the page counter link. There was no warning of my unsaved records, or prevention of navigating to the page counter. My added records were lost during this navigation. How do I prevent the loss of data that would occur if the user navigates away from the grid's page?

G

[Sarveswaran Palani]

Hi Aleqsandre,

Sorry for the Inconvenience.

We are currently Validating the reported query with high priority at our end, and we will update the further details within two business days. Until then we appreciate your patience.

Regards,

Sarveswaran PK

[Gerald Peng]

Thank you.

[Sarveswaran Palani]

Hi Aleqsandre, 

  

We have analyzed your query and we understand that you want to alert the user while leaving the Page with Grid’s unsaved changes. We have achieved your requirement by overriding the NavLink component in the SideBar, so that its click event can be modified as per our requirement. 

  

On Clicking the sidebar link, we have performed some calculation to check whether the Grid has unsaved changed. If there is any unsaved changes in Grid, warning popup will be shown and it will prevent us from navigating. If there is no unsaved changes, then Navigation will be carried out. We have used Blazor’s JSInterop,  NavigationManager and Grid’s CloseEdit() method to achieve your requirement. 

  

Please find the below code snippet and the sample for your reference. 

  

Index.razor

  

@inject IJSRuntime Runtime 

@using Syncfusion.Blazor.Grids 

  

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

    <GridEvents OnCellSave="CellEdit" TValue="Order"></GridEvents> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 

    <GridColumns> 

   </GridColumns> 

</SfGrid> 

  

@code{ 

    SfGrid<Order> Grid { get; set; } 

    public List<Order> Orders { get; set; } 

  

    [JSInvokable("Check")] 

    public async Task Check() 

    { 

        var changes = await Grid.GetBatchChanges(); // check for unsaved changes 

       if (changes.AddedRecords.Count > 0 || changes.ChangedRecords.Count > 0 || changes.DeletedRecords.Count > 0) 

        { 

            await Runtime.InvokeVoidAsync("Navigate", false); // prevent further action navigating 

            await Grid.CloseEdit(); 

        } 

        else 

        { 

            await Runtime.InvokeVoidAsync("Navigate", true); // continue to navigate to require page 

        } 

    } 

    public async Task CellEdit(CellSaveArgs<Order> Args) 

    { 

        await Task.Delay(1000); 

        var dotNetReference = DotNetObjectReference.Create(this); 

        await Runtime.InvokeVoidAsync("setInstance", Grid.ID, dotNetReference); 

    }} 

  

NavLinkPrevent.razor

  

@inherits NavLink 

@inject IJSRuntime Runtime 

@inject NavigationManager Navigate 

  

<a @attributes="@AdditionalAttributes" rel='nofollow' href="@rel='nofollow' href" class="@CssClass" @onclick="Clicked" @onclick:preventDefault> 

    @ChildContent 

</a> 

  

@code{ 

    [Parameter] 

    public string rel='nofollow' href { get; set; } 

    public async Task Clicked() 

    { 

        var dotNetReference = DotNetObjectReference.Create(this); 

        await Runtime.InvokeVoidAsync("CheckforSave", dotNetReference); 

    } 

    [JSInvokable("Navi")] 

    public async Task Navi() 

    { 

        Navigate.NavigateTo(rel='nofollow' href); 

    } 

} 

  

NavMenu.razor

.. 

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu"> 

        <ul class="nav flex-column"> 

        <li class="nav-item px-3"> 

            <NavLinkPrevent class="nav-link" rel='nofollow' href="" Match="NavLinkMatch.All"> 

                <span class="oi oi-home" aria-hidden="true"></span> Validation 

            </NavLinkPrevent> 

        </li> 

        <li class="nav-item px-3"> 

            <NavLinkPrevent class="nav-link" rel='nofollow' href="counter" Match="NavLinkMatch.All"> 

                <span class="oi oi-home" aria-hidden="true"></span> counter 

            </NavLinkPrevent> 

        </li> 

    </ul> 

</div> 

.. 

Javascript.js

var GriddotnetInstance, Gridid, NavLinkInstance; 

function setInstance(id, instance) { 

    Gridid = id; 

    GriddotnetInstance = instance; 

} 

function CheckforSave(ins) { 

.. 

.. 

} 

  

function Navigate(val) { 

.. 

.. 

} 

Host.cshtml

<head> 

.. 

<script src="~/JavaScript.js"></script> 

.. 

</head> 

Please get back to us if you need further assistance. 

  

Regards, 

Sarveswaran PK

Attachment: SfGridNav_c0609f4d.zip