Popup Edit Mode Validation Difficulties

[Nick]

Hello all, I hope you can point me in the right direction.

 

My requirement is to show validation messages (whether from Data Annotation [Required] attributes, etc., or from the server-side via ModelState Errors) in an error message block at the top of the editor, not next to the fields which the errors are related to. I am showing errors in a Kendo Notification that is present on my _Layout.cshtml page (I declared it there in hopes that I could have some of my CRUD error handling done in one place instead of each and every view...)

 

Problem

The problem that I am having is that if you try to submit my form without entering required data, you're shown the errors at the top, correctly. Then, if you correct the errors that were from the model's data annotations and don't cause any server-side errors, the popup permanently stays in "loading" mode and never closes. If you then F5 to refresh, the record does save to the database.

 

I've been tinkering with my code all day to try and magically get it to work, but this generally should show what I'm trying to do.

First, I added logic to the .Edit event of my Grid:

    function onEdit(e) {
        e.sender.editable.validatable.bind("validate", function (e) {
            SendErrorsToNotification(this.errors()); // SendErrorsToNotificationis the js function to take incoming errors and show them in the Kendo Notification
        });
    };

My hope here is that I will "intercept" the kendo validation for data annotations, get the errors, and then show them in my Kendo Notification. Errors are currently being displayed using this logic - whether my problem is stemming from here is another question.

 

Next, server-side validation. Inside my Create/Update actions I simply have a Validate function defined to do business logic validation, i.e. this:

                var validationErrors = Validate("Create", brand);
                foreach (string error in validationErrors.Distinct())
                {
                    ModelState.AddModelError("BasicValidation", error);
                }
                ...

                return Json(new[] { viewmodel}.ToDataSourceResult(request, ModelState));

 I capture these errors by handling the .Error event of my grid, and call the same SendErrorsToNotification function again:

 function error(e) {
         SendErrorsToNotification(e.errors);
     }

This is SendErrorsToNotification. Basically, create an error collection based on the incoming parameter, clear the notification of its existing data, then add the new errors and show the Notification again.

function SendErrorsToNotification(e) {
    var staticNotification = $("#statusNotification").data("kendoNotification");

    if (e.length > 0 || (e.BasicValidation !== undefined && e.BasicValidation.errors.length > 0)) {

        if (e.errorThrown === "custom error") {
            // custom rtc errors from server side, gather the errors up and place them into e.errors so the rest of this function can run smoothly
            e.errors = e.errors.BasicValidation.errors;
        }

        var grid = $(".grid-with-notifications").data("kendoGrid");
        grid.one("dataBinding", function (g) {
            g.preventDefault();
        });

        // Clear existing messages from the notification.
        var existingNotifications = staticNotification.getNotifications();
        existingNotifications.each(function () { 
            $(this).remove();
        });

        var errorMessage = "";
        $.each(e, function (key, value) {
            errorMessage += "&bull;&nbsp;&nbsp;" + this + "<br/>";
        });

        staticNotification.show(errorMessage, "error");

        var container = $(staticNotification.options.appendTo);
        container.scrollTop(container[0].scrollHeight);
    }
    else {
        staticNotification.hide();
    }

 

I really apologize for not being able to format any of this code as code, for some reason my browser isn't "showing advanced formatting options" while creating this post. Sorry for the wall of text, hopefully someone can read my mind (and scattered code) and help me understand some of my short comings here. I have been fairly stumped by this for a few days now and getting quite sad :(

[Tsvetomir]

Hi Nick,

We have already resolved the issue within the ticket that you have submitted in our private ticketing system. For anyone from the community who encounters the same behavior, the solution is to conditionally prevent the dataBinding event of the grid. It actually prevents the form from being bound to the underlying model in the data source.

 

Regards,
Tsvetomir
Progress Telerik