Showing a Message When a Grid Server Request Is Completed

Environment

Product	Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core 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.

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

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

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