Show Crud Server validation error beside fields

[Chatra]

Hi,

1) I am looking for how to show one or more server side errors  beside the fields .As of now able to popup database sever error but not sure how to show it beside the column fields.Please find the demo attached below(By default showing the sever error while updating the code Field).
2) For some reason the Validation messages are showing below the fields and not beside the fields in the form as show in the image.

Here is how I have set it up 

01.uwdataSource = new kendo.data.DataSource({

02.                            transport: {

03.                                read: {

04.                                    url: crudServiceBaseUrl + "/GetUnderwriterData"

05.                                },

06.                                create: {

07.                                    url: crudServiceBaseUrl + "/POSTaddUnderwriterData",

08.                                    type: "POST",

09.                                    contentType: "application/json"

10.                                },

11.                                update: {

12.                                    url: crudServiceBaseUrl + "/POSTUnderwriterData",

13.                                    type: "POST",

14.                                    contentType: "application/json"

15.                                },

16.                                parameterMap: function (options, operation) {

17.                                    if (operation !== "read" && options.models) {

18.                                        return kendo.stringify(options.models[0]);

19.                                    }

20.                                },

21.                                error: function (args)

22.                                {

23.                                    if (args.errors) {

24.                                      alert('there was an error');

25.                                      var grid = $("#underwriterGrid").data("kendoGrid");

26.                                     grid.one("dataBinding", function (e) {  

27.                                    e.preventDefault();//cancel grid rebind if error occurs                            

28.                 

29.                                                for (var error in args.errors) {

30.                                                    showMessage(grid.editable.element, error, args.errors[error].errors);

31.                                                }                   

32.                                            });

33.                                        }

34. 

35.                                }

36.                            },

37.       schema: {

38.                                //Define the field which contains the error

39.                                errors: function (response) {

40.                                    return response.error;

41.                                },

42.

43.                },//End of Schema
           });

 uwdataSource.bind("error", dataSource_error);


01.function showMessage(container, Code, errors) {
02.        var validationMessageTmpl = kendo.template($("#message").html());
03.        //add the validation message to the form
04.        container.find("[data-valmsg-for=" + Code + "],[data-val-msg-for=" + Code + "]").replaceWith($(validationMessageTmpl({ field: Code, message: errors[0] })))
05.        // .replaceWith(validationMessageTmpl({ field: name, message: errors[0] }))
06.    }
07.
08.function dataSource_error(e) {
09.        alert(e.xhr.responseText); // displays "error"
10.    }

//Index.cshtml


<script type="text/kendo-template" id="message">
  <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
            <span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div>
  </div>
</script>

Thanks,
Chatrapathi chennam

[Daniel]

Hello,

By default the error messages are displayed below the inputs in the grid editor. You could override the styles in order to show them beside the inputs:

.k-tooltip-validation.k-invalid-msg
{
    display:inline-block;
}

.k-invalid-msg .k-callout
{
       display:none;
}

In order to show the messages from the server next to the inputs:

1. Return a success response with a field with the same name as the one set to the schema.errors configuration(error in this case). Based on the response structure that is currently expected in the dataBinding handler you should return an object assigned to the field that is similar to the one in the snippet below:
   
   var success = NDatabaseIO.WriterData.UpdateWriter(model.writerID, model);

   if (string.IsNullOrEmpty(success.ErrorString))

   {

       return Request.CreateResponse(HttpStatusCode.OK, model);

   }

   else

   {

       return Request.CreateResponse(HttpStatusCode.OK, new {

           error = new

           {

               Code = new
 {

                   errors = new string[] { success.ErrorString }

               }

           }

       });              

   }
2. Use the error event to prevent the grid from rebinding using the dataBinding event and add the message in the handler. You should also add a placeholder for the message after the input so that it is found when the client-side validation was never triggered:
   

   <td>
       <input type="text" id="Code" class="k-input k-textbox" name="Code" data-bind="value:Code"  placeholder="Code" required validationMessage="Please enter code." />
       <span data-for="Code" class="k-invalid-msg"></span>
   </td>

   function showMessage(container, field, errors) {
       var validationMessageTmpl = kendo.template($("#message").html());
       container.find("[data-for=" + field + "]").replaceWith($(validationMessageTmpl({ field: field, message: errors[0] })));
   }
   
   function dataSource_error(args) {
      if (args.errors) {
           var grid = $("#writergrid").data("kendoGrid");
           grid.one("dataBinding", function (e) {
               e.preventDefault();
   
               for (var error in args.errors) {
                   showMessage(grid.editable.element, error, args.errors[error].errors);
               }
           });
       }
   }

Regards,
Daniel
Telerik

 

 

[Chatra]

Hi Daniel,

Thanks for the hep and solution really helped.

I could see client validation message showing in-line but server validation message not showing in-line but it is showing below the column field as shown in attachment below.

Thanks,
Chatrapathi Chennam

[Daniel]

Hi again,

You should remove the inline display:block style from the error template:

<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; "

or use an important rule for the display:inline-block style  in order to show the server message in the same way.

Regards,
Daniel
Telerik

 

 

[Chatra]

Hi Daniel,

Thank you for the reply.But for some reason this not working in Chrome for client or sever validation messages.

please see below attachment.

Thanks
Chatrapathi chennam

[Daniel]

Hi,

Could you check the attached updated project and this screen cast and let me know if I am missing something?

Regards,
Daniel
Telerik

 

 

[Chatra]

Hi Daniel,

I have quick question regarding response return ;like how to handle one or more server validations from different fields .


Thanks,
Chatrapathi chennam

[Daniel]

Hi,

The logic on the client can already handle errors for multiple fields. On the server, you should add all fields with errors to the error object:

error = new
{
    Code = new
    {
        errors = new string[] { success.ErrorString }
    },
    OtherField = new
    {
    ..

If multiple errors can be shown for a field than you should either set the concatanated string to the errors array or add multiple messages to the array and change the logic in the template to show a all messages:

function showMessage(container, field, errors) {
    var validationMessageTmpl = kendo.template($("#message").html());
    container.find("[data-for=" + field + "]").replaceWith($(validationMessageTmpl({ field: field, messages: errors })));
}

<script type="text/kendo-template" id="message">
  <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em;" data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
            <span class="k-icon k-warning"> </span>
        #for (var i = 0; i < messages.length;  i++) {#
            #:messages[i]# </br>
        #}#
    <div class="k-callout k-callout-n"></div>
  </div>
</script>

Regards,
Daniel
Telerik