Showing Notifications in an Inline Editable Grid

Environment

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

Description

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

Solution

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

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

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

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

• Inline Editing in the Grid for ASP.NET Core
• Notification Component for ASP.NET Core
• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core