Server Side Validation

2 posts, 0 answers
  1. amir muhammad
    amir muhammad avatar
    4 posts
    Member since:
    Mar 2010

    Posted 09 Mar 2020 Link to this post

    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.

     

  2. Aleksandar
    Admin
    Aleksandar avatar
    267 posts

    Posted 12 Mar 2020 Link to this post

    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

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top