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

Show validation summary in Grid popup

Environment

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

Description

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

Solution

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

image

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"))
    <script>
        kendo.ui.Editable.fn.options.errorTemplate = "<span style='color:red;'>*</span>";

        function addValidationSummary(e) {
            var validator = e.container.data("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>";
                    $("#errors").html($(html));
                }
            });
        }
    </script>
    @model ProjectName.Models.Order
    @using Kendo.Mvc.UI
    <div id="errors" style="color:red;"></div>
        <fieldset>
            <legend>Order</legend>
            @Html.HiddenFor(model => model.Id)
            <div class="editor-label">
                @Html.LabelFor(model => model.OrderDate)
            </div>
            <div class="editor-field">
                @Html.Kendo().DatePickerFor(model => model.OrderDate)
                @Html.ValidationMessageFor(model => model.OrderDate)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.CreatedBy)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(model => model.CreatedBy)
                @Html.ValidationMessageFor(model => model.CreatedBy)
            </div>
        </fieldset>

This is the result:

image

See Also

In this article
Not finding the help you need? Improve this article