How to Validate UserName Not Already Used in PopUpEditor Using AJAX

[Taylor]

(Edited- pivoted back to using [Remote] validation, but need to figure out how to keep popup in place after ModelState validation failure if user clicks submit)

Hi all,

I am working on a PopUp Editor for a Grid widget that displays user account information.  The PopUp Editor is a custom template, and has Telerik TextBox widgets for the user account's data, including UserName.  We want to validate the UserName by making a clientside call to the server to see if the UserName is already in use.

I am using  [Remote] validation in our view model that makes a call from the clientside to a method in our controller that checks if the UserName is already in use.  As has been the case with other people, this call is made even if a user clicks through the UserName Textbox and doesn't change the value for UserName, but our use case is such that I can work around this issue.

The problem is that if a user changes the username to an existing username, the Remote validation fires, but does not prevent the user from clicking Update on the PopUp- the user can click Update.  On the server side, the Update will fail due to ModelState.IsValid = false, and a failure message is returned, but the user is not notified of the failure- the PopUp just fades out.  If the user clicks "Edit" again, the username has the updated value in the PopUp, even though the update failed.

I was expecting that if the user clicks Submit, then the failure message that's returned would be displayed, and the PopUp would not fade out.   I suspect it may have to do with using an custom Editor Template,  but I'm hoping somebody can point out whatever it is I might be missing.

I used the following as guides:

• https://demos.telerik.com/aspnet-mvc/grid/editing-remote-validation
• https://www.telerik.com/forums/remote-validation-of-fields-in-grid-popup
• https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/editing/popup#handling-modelstate-errors

Has anybody been successful in using a custom template for PopUpEditor on a Grid, with a [Remote] validation, with the returned ModelState errors preventing the PopUpEditor from disappearing, instead displaying the returned error(s)?

Thanks in advance!

Taylor

[Alexander]

Hi Taylor,

I really appreciate the thorough explanation regarding the current scenario that is implemented on your premises. And the articles you have further used as a stepping stone.

I tried reciprocating an identical behavior to the one described. By explicitly adding server-side error handling for duplicated fields by using the approach we have outlined in the following article:

•  Handling ModelState Errors

To prevent the Popup from closing, it is important to ensure that the default action of the dataBinding event of the Grid is prevented - if this is the approach you have undergone:

<script>
    function onError(args) {
        var errors = args.errors;
        debugger;

        if (errors) {
            var grid = $("#grid").data("kendoGrid");
                grid.one("dataBinding", function (e) {
                   e.preventDefault();
                   debugger;
                   $.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-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error"><span class="k-tooltip-icon k-icon k-i-warning"></span><span class="k-tooltip-content">' + message + '</span><span class="k-callout k-callout-n"></span></div>').show();
                       
                       if($(grid.editable.element).find("[data-valmsg-for='" + key + "']").length == 0){
                           $(grid.editable.element).find(".k-tooltip-error").removeClass("k-hidden");
                       } 
                });
            });
        }
    }
</script>	
	

Notice, that I have additionally incorporated a logic associated for the Tooltip's persisting - (highlighted in green). But it appears that the PopUp is not closing on my end.

Here is a screencast that further gives a more visual illustration of the observed behavior on my end.

With that in mind, could you please consider replicating the sporadic behavior within the attached sample and send it back for further examination? This will help me debug the issue locally and based on the gathered research, provide more guidance.

The server-side validation is executed primarily for the "ShipName" TextBox editor which resides within a custom PopUp template.

Looking forward to your reply.

Kind Regards,
Alexander
Progress Telerik

[Taylor]

Hi Alexander,

Thank you for your response.  My code is pretty much in line with your example, but the PopUpEditor still was closing.  While debugging, I found this article:  https://www.telerik.com/forums/kendo-grid---asp-net-core---error-handler-doesn-t-fire, in which somebody was having a similar issue.  It turns out that the Json Serialization format on the response was the problem.  Once I set the serialization formatting per the article, my PopUpEditor started behaving as expected.

Thanks for your help!

Taylor