Handling server side errors (non-MVC version)

5 posts, 1 answers
  1. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 12 Oct 2012 Link to this post

    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
  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 18 Oct 2012 Link to this post

    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
    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. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 18 Oct 2012 Link to this post

    Thank you, works like a charm.
  5. John
    John avatar
    2 posts
    Member since:
    Feb 2013

    Posted 12 Apr 2013 Link to this post



    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]})))
    }
  6. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 17 Apr 2013 Link to this post

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