New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Showing a Validation Summary in a Grid Popup


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


I want to display the validation summary instead of tooltips in the Grid's Popup edit template.


The Telerik UI for ASP.NET MVC Grid with popup editing uses a Validator that is designed to show the errors as tooltips:

UI for ASP.NET MVC Grid popup validation

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

  1. Override the errorTemplate of the editable internal widget which holds the validator
  2. Add an Edit() event handler and bind to the validate event of the validator
  3. Generate the Validation summary and append it to a predefined HTML element in your popup template
    .Events(e => e.Edit("addValidationSummary"))
        kendo.ui.Editable.fn.options.errorTemplate = "<span style='color:red;'>*</span>";

        function addValidationSummary(e) {
            var validator ="kendoValidator");
            validator.bind("validate", function (e) {
                var errors = this.errors();
                if (errors.length) {
                    var html = "<ul>";
                    for (var i = 0; i < errors.length; i++) {
                        html += "<li>" + errors[i] + "</li>";
                    html += "</ul>";
    @model ProjectName.Models.Order
    @using Kendo.Mvc.UI
    <div id="errors" style="color:red;"></div>
            @Html.HiddenFor(model => model.Id)
            <div class="editor-label">
                @Html.LabelFor(model => model.OrderDate)
            <div class="editor-field">
                @Html.Kendo().DatePickerFor(model => model.OrderDate)
                @Html.ValidationMessageFor(model => model.OrderDate)
            <div class="editor-label">
                @Html.LabelFor(model => model.CreatedBy)
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(model => model.CreatedBy)
                @Html.ValidationMessageFor(model => model.CreatedBy)

This is the result:

UI for ASP.NET MVC Grid popup validation summary

For more information on validation, see the following articles:

More ASP.NET MVC Grid Resources

See Also

In this article