Kendo Grid Edit InLine Custom Validation message e.g. for duplicate Names etc

Question

I have an entity Location and I am using the Kendu UI Grid with InLine edit mode. The entity owns a property DisplayName, which is required and must not exist twice in the database.

At the moment, it works to display the Required Validation message:

And it also works to build up a method CustomValidateModel called in the LocationController Ajax InLine Create method, that checks if the Name is already existing in the database and adds then a ModelError. I catch this error then in the .Events(events => events.Error("onError")) via javascript and show then the message via javascript popup.

ModelState.AddModelError("DisplayName", "Name already exists.");

And this is the crux of the matter: I don't want to have this javascript popup message. I want to have also this information below the field, like this "Field required!" message. I have searched plenty of time, but the most people suggest only this Validation and output via javascript as it works in the moment.

Additionally, the actual problem besides the popup, is, that the record, which the user wants to create in the Grid, is then disappearing after confirming the javascript popup. But for usability, I want that the new line and the input persists. The users should be able to edit the given Name, he wanted to save. And NOT should enter the complete line again. Only the Validation message "Name already existing." should prompt for information.

Code:

Location entity:

Answer 1

We accomplished this in a Grid just like you did on the controller side by adding our custom error to the model state and passing that back to the view. And then in the onError javascript event we built the validation message ourselves and placed it in the grid.

Javascript onError:

function onError(e, status) {
    if (e.errors) {
        var message = "Error:\n";  

        var grid = $('#gridID').data('kendoGrid');
        var gridElement = grid.editable.element;

        $.each(e.errors, function (key, value) {
             if (value.errors) {
                gridElement.find("[data-valmsg-for=" + key + "],[data-val-msg-for=" + key + "]")
                .replaceWith(validationMessageTmpl({ field: key, message: value.errors[0] }));
                gridElement.find("input[name=" + key + "]").focus()
             }
        });
    }
}

Then create a validationMessageTmpl (or whatever you want to call it):

var validationMessageTmpl = kendo.template($("#message").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>

As far as why user input is disappearing, I assume that:

this.cancelChanges();

may have something to do with it. I believe this does just what it says and cancels all changes. Which would reset your grid and remove all user input.

One thing to note: The code in the ModelState (also the key in your $.each) must be the same name as the view model property being used for the column you want to display the error on.