Showing a Validation Summary in a Grid Popup
Environment
| Product | Telerik UI for ASP.NET MVC Grid |
| Created with Product Version | 2019.1.220 |
Description
I want to display the validation summary instead of tooltips in the Grid's Popup edit template.
Solution
The Telerik UI for ASP.NET MVC Grid with popup editing uses a Validator that is designed to show the errors as tooltips:
You can create a validation summary with a few lines of JavaScript.
- Override the
errorTemplateof the editable internal widget which holds the validator - Add an
Edit()event handler and bind to the validate event of the validator - 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:
For more information on validation, see the following articles: