Prevent Grid Popup Editor from Closing on Update and Create

Environment

Product	Progress Telerik UI for ASP.NET MVC Grid
Progress Telerik UI for ASP.NET MVC version	Created with the 2023.2.829 version

Description

How can I keep the popup editor of the Telerik UI for ASP.NET MVC Grid open after I update or insert a record?

Solution

To achieve the desired scenario:

1. Handle the Edit event of the Grid and attach an event handler for the close event of the Popup window.
2. In the close handler, the e.preventDefault() method will be called to prevent the popup from closing.
3. To allow the user to close the editor, set a preventCloseOnSave flag when the Cancel and Close buttons are clicked.
4. Contrary to the previous step, subscribe to the Save event of the Grid and reset the flag.

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModelGridPopUp>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(100);
        columns.Bound(p => p.UnitsInStock).Width(100);
        columns.Bound(p => p.Discontinued).Width(100);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Events(ev => {
        ev.Edit("onEdit");
        ev.Save("onSave");
    })
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Model(model => model.Id(p => p.ProductID))
        .Create(update => update.Action("EditingPopup_Create", "Grid"))
        .Read(read => read.Action("EditingPopup_Read", "Grid"))
        .Update(update => update.Action("EditingPopup_Update", "Grid"))
        .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
    )
)

    <script type="text/javascript">
        var preventCloseOnSave = false;

        function onSave(e) {
            preventCloseOnSave = true;
        }
        var onWindowEditClose = function (e) {
            if (preventCloseOnSave) {
                e.preventDefault();
                preventCloseOnSave = false;
            }
        };

        function onEdit(e) {
             var editWindow = e.container.data("kendoWindow");
             editWindow.unbind("close");
             editWindow.bind("close", onWindowEditClose);

            $(".k-grid-cancel").on("mousedown", function (e) {

                preventCloseOnSave = false;
                editWindow.close();
            });
        }
    </script>

More ASP.NET MVC Grid Resources

• ASP.NET MVC Grid Documentation

• ASP.NET MVC Grid Demos

• ASP.NET MVC Grid Product Page

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

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC
• Server-Side API Reference of the Grid for ASP.NET MVC
• Server-Side TagHelper API Reference of the Grid for ASP.NET MVC
• Telerik REPL: Prevent Grid Popup Editor from Closing on Update and Create
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base