How to show success and error notification messages for kendo grid after updating the row

[Teja]

Hi All,

we are using kendo inline editable grid. I want show success and error notifications after update the row data. can anyone please let me know if there is any solution?

Thanks!

 

[Brian]

Following...

[Mihaela]

Hello Teja,

You can utilize the Notification component to render a message when a specified record has been edited.

To achieve the desired result, follow the steps below:

• Create a Notification component with templates for success and error.

• Handle the RequestEnd event of the DataSource that triggers when a remote request is finished. If the request type is "update" and the server response has no errors, display the Notification with the respective message for success.

• Handle the Error event of the DataSource that triggers when the request to the remote endpoint fails. In the event handler, display the errors, call the cancelChanges() method of the Grid as is explained in this article, and display the Notification with the respective message for error.

Here is an example implementation for your reference:

<div id="notification-container"></div>

@(Html.Kendo().Grid<GridViewModel>()
  .Name("grid")
  .DataSource(ds => ds
    .Ajax()
    .Events(e => e.Error("onError").RequestEnd("onRequestEnd"))
    ...
  )
  ...
)

@(Html.Kendo().Notification()
        .Name("gridNotification")
        .AppendTo("#notification-container")
        .HideOnClick(true)
        .AllowHideAfter(200)
        .Templates(t =>
        {
          t.Add().Type("error").ClientTemplateID("errorTemplate"); //Specify a template for errors;
          t.Add().Type("success").ClientTemplateID("successTemplate"); //Specify a template for success;
        })
)

<script id="errorTemplate" type="text/x-kendo-template">
  <p>#= message #</p>
</script>

<script id="successTemplate" type="text/x-kendo-template">
    <div class="edit-success">
        <span class="k-icon k-i-check-circle"></span><span>#= message #</span>
    </div>
</script>

<script>
    function onError(e) { //The event will fire when there are Model State errors
        if (e.errors) {
            var message = "There are some errors:\n";
            // Create a message containing all errors.
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            // Display the message.
            var notification = $("#gridNotification").data("kendoNotification"); //Get a reference of the Notification
            notification.show({ //Display it
                message: "Record is not saved!"
            }, "error");

            // Cancel the changes.
            var grid = $("#grid").data("kendoGrid");
            grid.cancelChanges();
        }
    }

    function onRequestEnd(e) {  //The event will fire when a remote service request is finished
        if(e.type == "update") {
            if (e.response.Errors == null) {
                var notification = $("#gridNotification").data("kendoNotification"); //Get a reference of the Notification
                notification.show({ //Display it
                    message: "Record Saved Successfully!"
                }, "success");
            }
        }
    }
</script>

If you have any questions, please let me know.

Regards, Mihaela Progress Telerik