Display Server Errors in Grid Using Tooltips

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I display the errors received from the server as tooltips when editing the Grid?

Solution

The solution relies on the following key steps:

1. Define an editable Grid and handle the data validation on the server:

   Razor

   @(Html.Kendo().Grid<OrderViewModel>()
       .Name("grid")
       .Editable(editabel => editabel.Mode(GridEditMode.InLine))
       .DataSource(dataSource => dataSource
           .Ajax()
           .Model(model => model.Id(p => p.OrderID))
           .PageSize(20)
           .Read(read => read.Action("Orders_Read", "Home"))
           .Update(up => up.Action("Orders_Update", "Home"))
       )
       ... // Additional configuration.
   )

   C#

       public ActionResult Orders_Update([DataSourceRequest] DataSourceRequest request, OrderViewModel order)
       {
           ... // Validation logic.
           if (!isValid)
           {
               ModelState.AddModelError("'" + order.Category.CategoryName + "'", "This is my server error!");
           }
           return Json(new[] { order }.ToDataSourceResult(request, ModelState));
       }

2. Create a Tooltip:

   Razor

   <div id="tooltip" hidden="hidden"></div>
   
   @(Html.Kendo().Tooltip()
       .For("#tooltip")
       .Position(TooltipPosition.Top)
   )

3. Handle the Error event of the Grid's DataSource to retrieve the returned errors from the server when the Update request fails and display them by using the Tooltip component.

   JS

   function err_handler(e) {
       if (e.errors !== undefined) {
           var message = "Errors:\n";
           $.each(e.errors, function (key, value) {
               if ('errors' in value) {
                   $.each(value.errors, function () {
                       message += this + "\n";
                   });
               }
           });
   
           // Modify the Tooltip settings at runtime.
           tooltip.setOptions({
               autoHide: false,
               content: message
           });
           tooltip.show($("td[data-container-for='Category']")); // Show the Tooltip with the error message.
       }
   }

To review the complete example, refer to the project on how to display server error using a Tooltip component.

More ASP.NET MVC Grid Resources

• ASP.NET MVC Grid Documentation
• ASP.NET MVC Grid Demos
• ASP.NET MVC Grid Product Page
• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC
• Server-Side API Reference of the Grid for ASP.NET MVC
• Telerik UI for ASP.NET MVC Knowledge Base