Kendo: Handling Errors in Ajax Data Requests

Question

Using Kendo UI in MVC4 I have a Grid that makes Ajax calls for data back into the Controller:

<         


        

Answer 1

To extend Drew's answer just a little bit: we usually want to roll back the change in the Kendo Grid also when an error occurs. Otherwise, if an error is thrown as an item is deleted from the grid, for instance, it will still appear to be deleted even though the error was thrown and a message was shown.

This function also cancels the changes in any grids that are using the data source that threw an error:

function onError(e, status) {

    // Cancel changes on any grids on the page that are using this data source
    $('.k-grid').each(function (item) {
        var grid = $(this).data("kendoGrid");
        if (e.sender === grid.dataSource) {
            grid.cancelChanges();
        }
    });

    if (e.status == "customerror") {
        alert(e.errors);
    }
    else {
        alert("Generic server error.");
    }

}

Answer 2

How about

throw new HttpResponseException(HttpStatusCode.BadRequest);

Answer 3

Try to raise the exception and check whether it is prompting an alert message or not.

For Kendo grid, there is error event which might be helpful for you.

http://docs.kendoui.com/documentation/getting-started/using-kendo-with/aspnet-mvc/migration/widgets/grid

We used telerik mvc grids which automatically displays alert messages if there is any error while binding.

http://www.telerik.com/community/forums/aspnet-mvc/grid/exception-handling.aspx

http://www.telerik.com/community/forums/aspnet-mvc/grid/how-to-do-error-handling-in-gridaction-methods.aspx

Answer 4

Found it, Kendo supports it by just adding a Event to the DataSource the JS function to call. That's it.

  .DataSource(dataSource => dataSource
      .Ajax()
      .Events(events => events.Error("onError"))
      .Read(read => read.Action("SearchUser_Read", "Search").Data("parentModel"))
  )

<script> 
    function onError(e, status) {
          alert("A server error has occurred!");
}
</script>

Answer 5

If you need to display an error message from the server then you can do it by returning a DataSourceResult object with only its Errors property set:

return this.Json(new DataSourceResult
            {
                Errors = "my custom error"
            });

And pick it up on the client by using this (referenced by the .Events(events => events.Error("onError")) line):

function onError(e, status) {
    if (e.status == "customerror") {
        alert(e.errors);
    }
    else {
        alert("Generic server error.");
    }
}