Handling Validation Errors from Server in Kendo Grid

11 posts, 1 answers
  1. Keith
    Keith avatar
    33 posts
    Member since:
    Jan 2013

    Posted 09 Apr 2013 Link to this post

    I have a Kendo Grid and am using MVVM.  I have my solution working for all CRUD operations more or less. One thing I was wondering is how do I manage server side validation errors in the grid when using MVVM.  For instance if I add a new record which calls a web service to save.  If the WS raises an error saying a record already exists with the same values or similar then how do I go the following:

    1) Catch the error and display to the end user
    2) Prevent the row from being added to the grid (I wouldn't want to copy the update to the model in this case).

    The web service call will still succeed with a 200 http code however it will return a flag indicating there was a validation failure.  My data source code is like:

    var paramDataSource = new kendo.data.DataSource({
                schema: {
                    data: function (data) { //specify the array that contains the data
                        return data || [];
                    },
                    model: { // define the model of the data source. Required for validation and property types.
                        id: "PARAMETER_ID"
                    },
                    errors: "error"
                },
                error: function(e) {
                    alert(e.errors);
                    },
                pageSize: 10,
                batch: false,
                transport: {
                    read:
                    {   
                        url: "/UserParameter/GetData",
                        dataType: "json"
                    },                
                    update: {
                        url: "/UserParameter/Edit",
                        type: "POST" ,
                        dataType: 'json'
                    },
                    create: {
                       url: "/UserParameter/Create",
                        type: "POST" ,
                        dataType: 'json'
                    }
                }
            });



    // Create an observable object.
            var vm = kendo.observable({
                userParams: paramDataSource
            });

            kendo.bind($("#userParams"), vm);        
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 11 Apr 2013 Link to this post

    Hello Keith,

    Indeed you need to specify the field from which the error will come and if you return it from the server the error event will be triggered.

    To prevent the Grid from closing you need to prevent the next dataBinding event.

    e.g.

    function onErrorReturned(){
         alert('there was an error');
         $('#gridName').data().kendoGrid.one('dataBinding',function(e){
                  e.preventDefault();
         })
    }

    I hope this helps.

    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Keith
    Keith avatar
    33 posts
    Member since:
    Jan 2013

    Posted 11 Apr 2013 Link to this post

    Hi Petur,

    I've added the following to the data source schema:

    errors: function (response) {
                        response.Message;
     }

    Message is the name of the field in the response that will contain an error.

    I then have the following defined on the DataSource:

    error: function() {
                    alert('there was an error');

                    $('#userParams').data().kendoGrid.one('dataBinding', function (e) {
                        e.preventDefault();
                    })

                }

    On an edit operation I've force the message field to be populated but the event is never raised.

    Is this possibly because in the Read operation the Message field is not present, it is only present in the Create, Edit and Destroy operation?

    Thanks,
    Keith

  4. Keith
    Keith avatar
    33 posts
    Member since:
    Jan 2013

    Posted 11 Apr 2013 Link to this post

    To follow up I've changed all 4 web services (Create, Read, Update, Delete) to return a Message property set the error property to be "Message".   The error event is successfully raised on the Read operation, however it is never raised after any of the others.

    For instance I have an edit command on the grid which opens a popup window, upon editing a record and pressing update the call is made to my Web Service which forces the Message property to have a value. This error event is never raised in this instance.
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 15 Apr 2013 Link to this post

    Hello Keith,

    I am not sure what could be the reason for this, I noticed that the return statement is missing:

    errors: function (response) {
                 return       response.Message;
     }


    Could you please check if this is the case?

    Kind regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Keith
    Keith avatar
    33 posts
    Member since:
    Jan 2013

    Posted 17 Apr 2013 Link to this post

    Hi Petur,

    Making that change unfortunately makes no difference, when I debug the script in the browser the errors function on the schema is hit but not after any other action (edit etc.).  Is it something to do with using HTTP POST for the other actions, the read is a GET.  Other than that I can't see any difference.

    Thanks,
    Keith
  7. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 18 Apr 2013 Link to this post

    Hello Keith,

    I do not see any problem with your setup. Check the following example:

    http://jsbin.com/azabep/2/edit


    The error event is triggered because in the response there is myError field.

    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Keith
    Keith avatar
    33 posts
    Member since:
    Jan 2013

    Posted 21 Jun 2013 Link to this post

    Apologies for dragging up an old thread. However I still haven't quite got this working.  I am now able to retrieve error messages from all my actions and display them successfully.

    The problem I now have is that my model still gets updated even if the update has not succeeded on the server side.

    For instance if there is an error raised on the server for Deleting a grid row then I cannot cancel the update to the model.

    On my datasource I have an error handler defined like:

    error: function (xhr) {
                        if (xhr.status = "customerror") {
                            alert(xhr.errors);
                        }
                        else {
                            alert('An unexpected error has occurred, please contact technical support');
                        }

                        $('#grid').data().kendoGrid.one('dataBinding', function (e) {
                            e.preventDefault();
                        })
                    }

    The error message displays correctly as I expect however the grid and model get updated with the changes. I want to be able to cancel this change.

    I know I can just force a refresh of the datasource however that leads to other issues and doesn't sound the correct way to handle such a scenario.

    Thanks.
  9. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 25 Jun 2013 Link to this post

    Hello Keith,

    Preventing the dataBinding event of the Grid was exactly what I was about to suggest you. Here is an example:

    http://jsbin.com/azabep/30/edit


    However if you are using incell editing, the Grid has already rebound when you exited edit mode. What I can suggest to restore the changes is to use the cancelChanges of the dataSource:

    http://jsbin.com/azabep/31/edit


    I hope this helps.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Answer
    Keith
    Keith avatar
    33 posts
    Member since:
    Jan 2013

    Posted 27 Jun 2013 Link to this post

    Excellent thanks.
  11. Ivan ORdoñez
    Ivan ORdoñez avatar
    1 posts
    Member since:
    Aug 2005

    Posted 09 Oct 2013 Link to this post

    that's pretty helpful but, what if i want to show errors on the cell's edit that caused the error???
Back to Top