Handling server side errors (non-MVC version)

[RES]

I'm aware of the following example showing how to deal with server side errors.
http://www.kendoui.com/code-library/mvc/grid/handling-server-side-validation-errors-during-pop-up-editing.aspx

However I'm trying to handle server side errors using the non-MVC version of the Kendo grid and I notice in the API there is no dataBinding event that I can cancel.  So how would I cancel the data binding in this scenario?  Thanks,

Scott

[Vladimir Iliev]

Hi Scott,

 

Basically the DataBinding event is available and you can modify the "Handling server side validation errors" example to work with KendoUI Web Grid:

<div id="Grid"></div>
<script type="text/javascript">
    $(document).ready(function () {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Home/_Read",
                    dataType: "json"
                },
                update: {
                    url: "/Home/_Update",
                    dataType: "json"
                },
                create: {
                    url: "/Home/_Create",
                    dataType: "json"
                }
            },
            //Error event
            error: error,
            batch: false,
            schema: {
                //Define the field which contains the error
                errors: "Errors",
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number", editable: true, nullable: false },
                        Name: { validation: { required: "true"} }
                    }
                }
            }
        });

        $("#Grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 400,
            toolbar: ["create"],
            columns: [
                            { field: "Id", title: "Id" },
                            { field: "Name", title: "Name", width: "150px" },
                            { command: ["edit"], title: " ", width: "210px"}],
            editable: "popup"
        });
    });
</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 form
        container.find("[data-val-msg-for=" + name + "]")
            .replaceWith($(validationMessageTmpl({ field: name, message: errors[0]})))
    }
</script>

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

Kind Regards,
Vladimir Iliev
the Telerik team

[RES]

Thank you, works like a charm.

[John]

I am also using the non-MVC version of the Kendo Grid and have a couple of questions about the function below:

1. I think data-val-msg-for should be data-valmsg-for.  Is this true?
2. In my local test, on an update or create, I am returning a response like the following: jQuery1720898955156095326_1365793297067({"Errors": {"Name": "invalid name"}}.  The code you provided is handling the response insofar as it is triggers error and showMessage, but no such container exists for Name that has the attribute data-val-msg-for or data-valmsg-for so there is nothing to replace.  Am I missing something?

Thanks,
John

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

[Vladimir Iliev]

Hi John,

Please find the answers of your questions below:

1. You are correct - you should use the "data-valmsg-for" in your case.
2. I would suggest to open a new support thread with more information about the current setup that you have.

Kind Regards,
Vladimir Iliev
the Telerik team