Show Confirmation Popup When User Leaves the Page with Unsaved Grid Changes

Environment

Product	Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version	2024.4.1112

Description

How can I detect changes in an InLine editable Grid when the user tries to leave the page and prompt the user with a warning message about the unsaved changes?

Solution

To detect the changes in the Grid when the user attempts to navigate away from the page with the Grid, you can check whether there has been a change in the Grid's DataSource. If at least one change occurs, show the prompt.

1. Handle the beforeunload event of the current window.
2. Get a reference to the Grid and access its DataSource.
3. Check the dirty flag of the data items, which indicates that the data item has been changed.
4. Show the popup if at least one change occurs.

Razor

    @(Html.Kendo().Grid<ProductViewModel>()
        .Name("grid")
        .Editable(editable => editable.Mode(GridEditMode.InLine))
       ...//  Additional configuration.
    )

Razor

    @addTagHelper *, Kendo.Mvc
    <kendo-grid name="grid">
        <editable mode="inline"/>
        <!-- Additional configuration-->
    </kendo-grid>

JS

    $(document).ready(function () {
        $(window).bind("beforeunload", function (event) {
            var gridDS = $('#grid').getKendoGrid().dataSource; // Access the Grid's DataSource.
            if (dataSourceHasChanges(gridDS)) {
                return "You have unsaved changes. Are you sure you want to leave this page?"; // Show the popup.
            }
        });
    });

    function dataSourceHasChanges(ds) { // Check the Grid's DataSource for changes.
        var dirty = false;
        $.each(ds.data(), function () {
            if (this.dirty == true) {
                dirty = true;
            }
        });
        return dirty;
    }

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Server-Side TagHelper API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base