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:

    public ActionResult SearchUser_Read([DataSourceRequest]DataSourceRequest request)
    {
        var data = CreateAnExcaptionHere();
        return Json(data.ToDataSourceResult(request));
    }

How do I use this call to inform the page that there was an error?

Answer 1

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.");
    }
}

Answer 2

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 3

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 4

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 5

For Read data, you should not add exemption to ModelState and return it Like you would do it for Create Update and Delete Requested, Instead add the error to datasource object and handle it with the same jquery onerror event.

 public virtual JsonResult Read_Tasks([DataSourceRequest] DataSourceRequest request) 
    {
        try
        {
            return Json(ListAll().ToDataSourceResult(request));
        }
        catch (Exception ex)
        {
            string exmptionText = ex.Message;

            ModelState.AddModelError(string.Empty, exmptionText); //This will not work 
            Logger.Error(exmptionText + ex.StackTrace);

            return this.Json(new DataSourceResult
            {
                Errors = new
                {
                    a = new { errors = new[] { exmptionText } }
                }
            });
        }
    }

function error_handler(e)
    {
        if (e.errors)
        {
        var message = "Errors:\n";
        $.each(e.errors, function (key, value) {
            if ('errors' in value) {
                $.each(value.errors, function () {
                    message += this + "\n";
                });
            }

 alert(message );
        });

     
    }

Answer 6

How about

throw new HttpResponseException(HttpStatusCode.BadRequest);