This is a migrated thread and some comments may be shown as answers.

Handling validation errors in grid custom popup

2 Answers 835 Views
Grid
This is a migrated thread and some comments may be shown as answers.
PaulH
Top achievements
Rank 1
PaulH asked on 09 Jul 2019, 10:59 AM
I have a requirement to validate an email address and web address for basic format validity in a custom grid popup. All standard data annotated validation works such as required, length etc in the popup but adding the validation for the email address and web address by implementing the IValidatableObject interface on my model and adding the necessary code in a Validate method doesn't produce the required effect. At first pass, the popup closes and an error is displayed at the bottom of the grid view (as it would with an inline editable grid). I've followed the example code provided, albeit for MVC, to handle server side validation errors in the Error event of the datasource of the grid and while it stops the popup from closing, it will not display the error messages against the relevant controls - in fact it displays nothing at all. I've not been able to debug the message handling code to establish why it is not able to connect the error message (correctly returned) with the relevant control of the popup. Can you please advise?

2 Answers, 1 is accepted

Sort by
0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 11 Jul 2019, 05:24 PM
Hi, Paul,

The Kendo UI Validator can validate emails on the client using the HTML5 validation:

https://docs.telerik.com/kendo-ui/controls/editors/validator/overview#validator-overview

To use the client side validation for emails, you should provide the type in the custom popup editor:

<div class="k-edit-label">
     @(Html.LabelFor(m => m.Email))
 </div>
 <div class="k-edit-field">
     @(Html.Kendo().TextBoxFor(m => m.Email).HtmlAttributes(new { type = "email"}))
     @(Html.ValidationMessageFor(m => m.Email))
 </div>

If you would like to use custom validation on the server, prevent the popup from closing and display the server error underneath the field, you can do this programmatically as the data source has no knowledge of the server validation error:

.DataSource(dataSource => dataSource
   .Ajax()
   .Events(events => events.Error("onError"))
)
 
<script>
  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";
                });
            }
            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();
     });       
  });
 }
}
</script>

Let me know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
PaulH
Top achievements
Rank 1
answered on 15 Jul 2019, 07:43 AM

That's great Alex thanks. I implemented your onError code and naturally it worked first time.

Thanks and kind regards

Paul.

Tags
Grid
Asked by
PaulH
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
PaulH
Top achievements
Rank 1
Share this question
or