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

Show validation summary in Grid popup


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


I want to display the validation summary instead of tooltips in the grid popup edit template.


The Kendo UI Grid with popup editing uses the Kendo UI Validator which is designed to show the errors as tooltips:

UI for ASP.NET Core 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 Core Grid popup validation summary

See Also

In this article