New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
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:
-
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. )
-
Create a Tooltip:
Razor<div id="tooltip" hidden="hidden"></div> @(Html.Kendo().Tooltip() .For("#tooltip") .Position(TooltipPosition.Top) )
-
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.JSfunction 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