Showing Notifications in an Inline Editable Grid

Environment

Product Version	2022.3.913
Product	Grid for Progress® Telerik® UI for ASP.NET MVC

Description

How can I show success and error notification messages when editing Inline Grid?

Solution

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

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

    @(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>

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.

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

    <script>
        function onRequestEnd(e) {
            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>

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 the handling modelstate errors section in the documentation, and display the Notification with the respective message for the error.

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

    <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();
            }
        }
    </script>

Showing Notifications in an Inline Editable Grid

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also

Getting Started

Support Resources

Community