Handle AJAX Delete error

[Ahmed Ilyas]

I know I can handle an AJAX error if say, I am trying to do an insert, but the server reports and error. I can catch and display the error like so on client side:

<script type="text/javascript">

        $('#Add').click(function() {

            $.ajax({
                url: '<%= Url.Action(AjaxAddStopPoint , new { Id = Model.Service.Id })%>?StopPointId=' + $("#StopPoints option:selected").val(),
                type: "POST",
                success: function(result) {
                    refreshServiceStopPointsGrid();
                },
                error: function(xmlHttpRequest, textStatus, errorThrown) {
                    if (xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0)
                        return;  // it's not really an error. A situation could be where the user has canceled an ajax request during an ajax request.
                    else {
                        if (xmlHttpRequest.status == 500) // server side set. we have an error
                        {
                            alert(xmlHttpRequest.responseText); // display it
                        }
                    }
                }
            });
        });

        function refreshServiceStopPointsGrid() {
            var grid = $('#ServiceStopPointListGrid').data('tGrid');
            grid.rebind();
        }
   
    </script>

But what about if I have a on the grid, rows of data. And the user hits delete on one of them but then the server cannot delete (for whatever reason) - how do I catch the error like above, for that row?
where and how would I bind the event to that row, so it can catch the error through the AJAX delete command?

[Ahmed Ilyas]

ok im almost there thanks to:
http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api-and-events.html#OnError

But I face the problem of not being able to get the model state errors even though on server side I am setting it:

try
{
 ...
}
catch (SomeException ex)
{
 SetResponseErrorCode(); // 500

 ModelState.AddModelError("_FORM", "Unable to delete.");

}

clientside:
var xmlHttpRequest = e.XMLHttpRequest;
       
        if (xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0)
            return;  // it's not really an error. A situation could be where the user has canceled an ajax request during an ajax request.
        else {
            if (xmlHttpRequest.status == 500) // server side set. we have an error
            {
                e.preventDefault();
                alert(e.textStatus + ', ' + textStatus); // display it
            }
        }


textStatus is always "error" and I cannot create the modelstate error message as per example on the docs.

[Sam Rossetti]

Were using ajax binding and ajax custom commands. When validating the model we have a few custom validation conditions. To add an error message to the model we did the following.

ModelState.AddModelError(String.Empty, @"Your message here");

When then return the view as normal for the grid response.

In the page with the grid we attach to the onComplete client event and check the response model state.

function Assessments_onComplete(e) {
    if (e.response.modelState != null) {
        displayModelStateErrors(e.response.modelState);
    }
}

function displayModelStateErrors (modelState) {
    // Alert the user of any model state errors not tied to a specific element
    if (modelState[""] != null && modelState[""].errors != null) {
        var alertMessage = "";
        for (var i = 0; i < modelState[""].errors.length; i++) {
            alertMessage = alertMessage + modelState[""].errors[i] + "\r\n";
        }
        alert(alertMessage);
    }
}

Instead of doing the alert you could handle the errors however you want.