Showing a Validation Summary in a Grid Popup

Environment

Product	Telerik UI for ASP.NET MVC Grid
Created with Product Version	2024.2.514

Description

How can I display the validation summary instead of tooltips in the Grid's Popup edit template?

Solution

The Telerik UI for ASP.NET MVC Grid configured for Popup editing uses a Validator that shows the error messages as tooltips:

You can show a validation summary with a few lines of JavaScript.

1. Handle the Edit event of the Grid.
2. Get a reference to the Kendo UI Validator and update its options by using the setOptions() method.

Razor

    @(Html.Kendo().Grid <OrderViewModel>()
        .Name("grid")
        .Events(e => e.Edit("addValidationSummary"))
        ...
    )

JS

    <script>
        function addValidationSummary(e) {
            var validator = e.container.data("kendoValidator");
            validator.setOptions({
                errorTemplate: "", // Remove the "errorTemplate". This way, the tooltip will not show.
                validationSummary: true // Enable the validation summary option.
            });
        }
    </script>

As a result, the error messages will be displayed as a list above the editors:

To keep the tooltips, as well, do not reset the "errorTemplate" option:

JS

    <script>
        function addValidationSummary(e) {
            var validator = e.container.data("kendoValidator");
            validator.setOptions({
                validationSummary: true
            });
        }
    </script>

For more information on validation, refer to the following articles:

• Show Server Validation Errors in a Grid Edit Popup
• Validation in Telerik UI for ASP.NET MVC

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 Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base