Handling Validation Errors from Server in Kendo Grid

[Keith]

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

[Petur Subev]

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

[Keith]

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

[Keith]

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.

[Petur Subev]

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

[Keith]

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

[Petur Subev]

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

[Keith]

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.

[Petur Subev]

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

[Keith]

Excellent thanks.

[Ivan ORdoñez]

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