Showing a Message When a Grid Server Request Is Completed
Environment
| Product | Telerik UI for ASP.NET MVC Grid |
| Progress Telerik UI for ASP.NET MVC version | Created with the 2023.1.117 version |
Description
I have a Grid with CRUD operations. Once the Controller processes the request, I want to display a message to the user through a JavaScript alert whether the process has succeeded or not.
Solution
To show a message when a create, update, or delete operation is performed in the Grid:
- Define a global
successfullOperationvariable to hold the text of the type of the operation. - Subscribe and handle the
RequestEndevent of the Grid's DataSource. There, set the value of the global variable. - Subscribe to the
Errorevent of the Grid's DataSource. - In the handler, set the value of the
successfulOperationto be an empty string in case anErrorevent is thrown and the operation failes. - Subscribe to the
DataBoundevent of the Grid. - In the
onDataBoundhandler, check whether the global variable is set. If set, show the message.
...
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("onError").RequestEnd("onEnd"))
.Model(model => model.Id(p => p.ProductID))
.Create(update => update.Action("Create", "Grid"))
.Read(read => read.Action("Read", "Grid"))
.Update(update => update.Action("Update", "Grid"))
.Destroy(update => update.Action("Destroy", "Grid"))
)
.Events(e=>e.DataBound("onDataBound"))
var successfullOperation = "";
function onDataBound(e) {
if (successfullOperation.length > 0) {
alert("Row was "+successfullOperation+" successfully.")
}
successfullOperation = "";
}
function onEnd(e) {
console.log(e)
if (e.type == "destroy") {
successfullOperation = "deleted"
} else if (e.type == "update") {
successfullOperation = "updated"
} else if (e.type == "create") {
successfullOperation = "created"
}
}
function onError(e) {
successfullOperation = "";
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert("error");
}
}
To explore the complete behavior, see the Telerik REPL example on how to display a message upon a server response to the Update, Create, and Destroy requests performed by the Grid.