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:

1. Define a global successfullOperation variable to hold the text of the type of the operation.
2. Subscribe and handle the RequestEnd event of the Grid's DataSource. There, set the value of the global variable.
3. Subscribe to the Error event of the Grid's DataSource.
4. In the handler, set the value of the successfulOperation to be an empty string in case an Error event is thrown and the operation failes.
5. Subscribe to the DataBound event of the Grid.
6. In the onDataBound handler, check whether the global variable is set. If set, show the message.

Razor

    ...
    .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"))

JavaScript

    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.

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
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base