ASP.NET MVC Display Server Validation Errors in PopUp Editable Grid

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

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I display server validation errors when the Grid is in PopUp edit mode?

Solution

You can achieve this requirement using the following implementation:

Configure the Grid for PopUp editing:

Razor

@(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridEditingPopUpServerValidation.Models.Product>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id);
        columns.Bound(p => p.Name);
        columns.Command(command => command.Edit()).Width(100);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.Id))
        .Read("Products_Read", "Home")
        .Update("Products_Update", "Home")
        .Create("Products_Create", "Home")
        .Events(events => events.Error("error"))
    )
)

Create an external Kendo UI Template for the error messages:

HTML

<script type="text/kendo-template" id="message">
    <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error"
     style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
        <span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div>
    </div>
</script>

<script type="text/javascript">
    var validationMessageTmpl = kendo.template($("#message").html());
</script>

Handle the Error event of the DataSource to intercept the received error messages from the server:

    function error(args) {
        if (args.errors) {
            var grid = $("#grid").data("kendoGrid");
            grid.one("dataBinding", function (e) {
                e.preventDefault();   // Prevent the "dataBinding" event of the Grid if an error occurs.

                for (var error in args.errors) {
                    showMessage(grid.editable.element, error, args.errors[error].errors);
                }
            });
        }
    }

    function showMessage(container, name, errors) {
        // Add the validation message to the form.
        container.find("[data-valmsg-for=" + name + "],[data-val-msg-for=" + name + "]")
            .replaceWith(validationMessageTmpl({ field: name, message: errors[0] }))
    }

To see the example, refer to the project on how to display server validation errors in the PopUp edit mode of the Telerik UI Grid.

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also