Server side errors in grid popup - Rails

[Douglas]

I'm trying to follow the example presented here:

http://www.kendoui.com/forums/ui/grid/handling-server-side-errors-non-mvc-version.aspx

for handing server-side errors. Here's what I have:

<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>


<script type="text/javascript">

    var validationMessageTmpl = kendo.template($("#message").html());
    function error(args) {
        var errors = $.parseJSON(args.xhr.responseText).errors
        if (errors) {
            var grid = $("#grid").data("kendoGrid");
            grid.one("dataBinding", function (e) {
                e.preventDefault();   // cancel grid rebind if error occurs
                var grid = $("#grid").data("kendoGrid");
                for (var error in errors) {
                    showMessage(grid.editable.element,error, errors[error]);
                }
            });
        }
    }

    function showMessage(container, name, errors) {
        //add the validation message to the form
        container.find("[data-valmsg-for=" + name + "]")
                replaceWith($(validationMessageTmpl({ field: name, message: errors[0]})))
    }

The first problem I have is that "grid.one" is undefined.

I've also tried to just get there error message to show by removing grid.one as follows:

      if (errors) {
            var grid = $("#grid").data("kendoGrid");
            for (var error in errors) {
                  showMessage(grid.editable.element,error, errors[error]);
            }
      }

Everything looks OK in the showMessage function. The " container.find("[data-valmsg-for=" + name + "]")" does work and the name and error message are correct, but the error message doesn't appear.

Any idea what I'm doing wrong here?




 

[Vladimir Iliev]

Hi Douglas,

 
Please find the answers of your questions below:

• The first problem I have is that "grid.one" is undefined. - From the provided information it's not clear for us what is the exact reason for this behavior - could you please confirm that the Grid wrapper has Id attribute equal to "grid"?
• From the provided information it's not clear for us what is the exact reason for this behavior - could you please confirm that the Grid wrapper has Id attribute equal to "grid"?  - For the current solution to work the PopUp editor template should contain the correct placeholders for the error message (the ones that the "showMessage" function searched for) and the validation scripts should be included to the project, however from the provided information it's not clear for us if these requirements are met. Could you please provide runable project where the issue is reproduced?

Kind Regards,
Vladimir Iliev
Telerik

[Terence]

I am encountering the same situation. 

 I try to add checking on valmsg while it seems it cannot find that field

 

please see

 

var found = container.find("[data-for=" + name + "],[data-val-msg-for=" + name + "],[data-valmsg-for=" + name + "]");
                            if (found.length > 0) {
                                alert ("Found");
                            } else { alert ("T"); }  

 

 

It always return "T". Please advise.​

<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>

<script type="text/javascript">

                    var validationMessageTmpl = kendo.template($("#message").html());
                    function error(args) {
                        if (args.errors) {
                            var grid = $("#grid").data("kendoGrid");
                            grid.one("dataBinding", function (e) {
                                e.preventDefault();   // cancel grid rebind if error occurs
                                for (var error in args.errors) {
                                    showMessage(grid.editable.element, error, args.errors[error].errors);
                                }
                            });
                        }
                    }


                    function showMessage(container, name, errors) {
                        //add the validation message to the from
                        alert (name + " " + errors + "[data-valmsg-for=" + name + "]");

                        var found = container.find("[data-for=" + name + "],[data-val-msg-for=" + name + "],[data-valmsg-for=" + name + "]");
                            if (found.length > 0) {
                                alert ("Found");
                            } else { alert ("T"); }

                        container.find("[data-valmsg-for=" + name + "]")
                            .replaceWith((validationMessageTmpl({ field: name, message: errors[0]})))
                    }

</script>

[Terence]

what I mean is that the Error message does not appear. 

 So, I add an alter statement to check whether [data-for=" + name + "],[data-val-msg-for=" + name + "],[data-valmsg-for=" + name + "] is existed. However, it seems that the program cannot find those fields. It always executes alert("T") script. 

 Please advise.

[Vladimir Iliev]

Hello Terence,

I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Could you please provide runable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

Regards,
Vladimir Iliev
Telerik

 

 

[Terence]

Hi,

I create a similar example on http://dojo.telerik.com/isiXI/5

As I don't have a JSON service (only available in our environment), I provide a returned JSON error data instead.

var errorData = [   { "Errors": {
        "Id": {
            "errors": "The ID is invalid"
        },
        "Name": {
            "errors": "Invalid "
        }
    }
}]

For testing purpose, I've changed the datasource Create and Update service to return the above Error data only in our environment. Everytime when I update/create record, the Popup screen is stopped without showing any error message. Please advise.

 

 

[Vladimir Iliev]

Hi Douglas,

After inspecting the provided demo it appears that the errors are not show due to several invalid configurations:

• "showMessage" function throws error as the output generated from the defined template contains empty spaces at the start and the end of the string: 

  var output = validationMessageTmpl({
      field: name,
      message: errors
  }).trim();
  

• The element that you search for in "showMessage" function is not available and the selector should be changed: 

  container.find("[data-container-for='" + name + "']").append($(output));

• The structure of the error returned from the server side is invalid - in case of error you should return the response as object (not as an array):  

• var errorData = {
      Errors: {
          "Id": {
              "errors": "The ID is invalid"
          },
          "Name": {
              "errors": "Invalid "
          }
      }
  }

For convenience I updated the provided demo with the above changes and it start working as expected:

• http://dojo.telerik.com/isiXI/14

Regards,
Vladimir Iliev
Telerik

 

 

[Terence]

Thanks.

 I have used your codes in my application and it can show the error message now. Thanks.

However, there is another problem. After the error message (e.g. requires user to select an item from MultiSelect box) is shown, when I select an item, the error does not disappear. Do you have any clue? (Attached please find the screen dump. There is not any javascript error found).

 

In your demo, I don't encounter such problem. But, I don't know why my application has such problem. Please advise.

[Vladimir Iliev]

Hi Terence,

Could you please try to upgrade the Kendo UI scripts / styles to the latest official release and check if this behavior is still reproducible? If the validation is still not removed please open a new support thread/forum post and provide runable demo where the issue is reproduced. This would help us pinpoint the exact reason for current behavior. 

Regards,
Vladimir Iliev
Telerik

 

 

[Terence]

Hi,

 I have created a reproducible case. The error message on the Status code fails to change to display:none if I click the Update button more than once.

http://dojo.telerik.com/isiXI/15

 

Regards

 

Terence

[Vladimir Iliev]

Hi Terence,

Please note that as general practice it is accepted to ask different questions in separate support threads. In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving. That why I would ask you again to open a new support thread (or forum post) and provide the demo from your last post. 

Regards,
Vladimir Iliev
Telerik