New to Telerik UI for ASP.NET Core? Download free 30-day trial

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

See Also

In this article