Prevent Grid Popup Editor from Closing on Update and Create
Environment
Product | Progress Telerik UI for ASP.NET Core Grid |
Progress Telerik UI for ASP.NET Core version | Created with the 2023.2.829 version |
Description
How can I keep the popup editor of the Telerik UI for ASP.NET Core Grid open after I update or insert a record?
Solution
To achieve the desired scenario:
- Handle the
Edit
event of the Grid and attach an event handler for theclose
event of the Popup window. - In the
close
handler, thee.preventDefault()
method will be called to prevent the popup from closing. - To allow the user to close the editor, set a
preventCloseOnSave
flag when the Cancel and Close buttons are clicked. - 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 Core Grid Resources
- ASP.NET Core Grid Documentation
- 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 REPL: Prevent Grid Popup Editor from Closing on Update and Create
- Telerik UI for ASP.NET Core Breaking Changes
- Telerik UI for ASP.NET Core Knowledge Base