Show Crud Server validation error beside fields

8 posts, 2 answers
  1. Chatra
    Chatra avatar
    61 posts
    Member since:
    Apr 2014

    Posted 14 May 2014 Link to this post

    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
  2. Answer
    Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 16 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Chatra
    Chatra avatar
    61 posts
    Member since:
    Apr 2014

    Posted 18 May 2014 in reply to Daniel Link to this post

    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
  5. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 20 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Chatra
    Chatra avatar
    61 posts
    Member since:
    Apr 2014

    Posted 23 May 2014 in reply to Daniel Link to this post

    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
  7. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 27 May 2014 Link to this post

    Hi,

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

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Chatra
    Chatra avatar
    61 posts
    Member since:
    Apr 2014

    Posted 27 May 2014 in reply to Daniel Link to this post

    Hi Daniel,

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


    Thanks,
    Chatrapathi chennam
  9. Answer
    Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 29 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready