Server Side Validation

[amir muhammad]

Hi,

I need to do display server side validations errors on Edit/Add Screen of Popup.

I have added the custom template through  "TemplateName" and placed it in "EditorTemplates" and I am adding error message at server as :

                ModelState.AddModelError("error1", "Error 1 description");

but. how do I display on the popup. Currently it shows in JavaScript script error handler I have defined as:
              .Events(events => events.Error("error_handler"))   

 

1) I want to display error besides field on the popup. 
2) As soon as I click update the popup closes. I want it to keep open and display error message. I tried  e.preventDefault();  but it doesn't seems to work. It does cancel the grid refresh but window closes.

 

Has anyone done this? is there a sample I can follow.

 

Thanks in advanced.

 

[Aleksandar]

Hello Amir,

Once you have defined the error handler function that will handle the error event, you need to update the validation messages when an error is returned. A possible approach is demonstrated in the Documentation section on handling ModelState errors. In the provided example the Popup window remains open and allows the user to update the entry: 

function onError(args) {
        var errors = args.errors;
        if (errors) {
            var grid = $("#grid").data("kendoGrid");
                grid.one("dataBinding", function (e) {
                   e.preventDefault();
                   $.each(errors, function (key, value) {
                       var message = "";
                       if ('errors' in value) {
                           $.each(value.errors, function() {
                             message += this + "\n";
                           });
                       }

                        // As long as the key matches the field name, this line of code will be displayed as validation message in the popup.
                       grid.editable.element.find("[data-valmsg-for='" + key + "']").replaceWith('<div class="k-widget k-tooltip k-tooltip-validation" style="margin:0.5em"><span class="k-icon k-i-warning"> </span>' + message + '<div class="k-callout k-callout-n"></div></div>').show();
                });       
            });
        }
    }

In regards to changing the position of the Tooltip, I would suggest checking this HowTo article as it describes a possible approach on how to change the position of a Tooltip.

Let me know if you have other questions.

Regards,
Aleksandar
Progress Telerik