如何在 Kendo 网格中处理客户端错误处理

Question

我需要一些帮助。我想获取服务器端错误并显示给剑道网格。如何使用客户端 JavaScript。我会在哪里找到剑道网格中的错误。如何找到它..如果我当时正在调用服务，那么服务器中会出现一些错误，例如（错误请求或 500）。如何获取剑道网格中的这个错误。使用 javascript Kendo grid 可能会在客户端出现错误。

Answer 1

我假设您正在使用 Ajax 将数据加载到 Kendo 网格中。错误事件处理需要在网格中定义。

@DontVoteMeDown 的答案适用于 JavaScript。这可能是您问题的正确答案。

Razor 实现更直接，可以如下所示实现。

@(Html.Kendo().Grid<KendoGridAjaxEditing.Models.ProductViewModel>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(product => product.ProductID).Width(100);
          columns.Bound(product => product.ProductName);
          columns.Bound(product => product.UnitsInStock).Width(250);
          columns.Command(commands =>
          {
              commands.Edit();
              commands.Destroy();
          }).Title("Commands").Width(200);
      })
      .ToolBar(toolbar => toolbar.Create())
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .DataSource(dataSource =>
          dataSource.Ajax()
            .Events(events => events.Error("grid_error")) // Handle the "error" event
            .Model(model =>
            {
                model.Id(product => product.ProductID);
                model.Field(product => product.ProductID).Editable(false);
            })
            .Create(create => create.Action("Products_Create", "Home"))
            .Read(read => read.Action("Products_Read", "Home"))
            .Update(update => update.Action("Products_Update", "Home"))
            .Destroy(destroy => destroy.Action("Products_Destroy", "Home"))
      )
      .Pageable()
)
<script>
function grid_error(e) {
    if (e.errors) {
        var message = "There are some errors:\n";
        // Create a message containing all errors.
        $.each(e.errors, function (key, value) {
            if ('errors' in value) {
                $.each(value.errors, function () {
                    message += this + "\n";
                });
            }
        });
        // Display the message
        alert(message);
        // Cancel the changes
        var grid = $("#grid").data("kendoGrid");
        grid.cancelChanges();
    }
}
</script>

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/ajax-editing

Answer 2

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events-error

只需监听错误事件并调整您的服务器响应以在抛出错误时返回 Json 对象。

在 ASP.NET MVC 项目中，我在基本控制器中使用如下所示的方法：

    protected JsonResult JsonError(ModelStateDictionary modelState)
    {
        if (modelState == null) new ArgumentNullException();
        if (modelState.IsValid) new ArgumentException();

        Response.Clear();
        Response.ContentEncoding = Encoding.UTF8;
        Response.HeaderEncoding = Encoding.UTF8;
        Response.TrySkipIisCustomErrors = true;
        Response.StatusCode = 400;

        return Json(String.Join("\n", modelState.SelectMany(state => state.Value.Errors, (state, error) => error.ErrorMessage)));
    }

它需要对您的 odata 服务进行一些调整，但这应该可以帮助您入门。返回带有 400 StatusCode 的错误消息的重要部分（其他代码可能有效）。

Answer 3

为最近可能遇到此问题的任何人编写此答案。这个问题基本上分为三个部分：-

1. 如果服务器上的代码中断，您将返回什么操作方法。这是我为 Kendo ui 返回的内容，以识别服务器上存在错误：-

   return Json(new { error = String.Format("Error message.") });

请注意，如果您的 JSON 未从服务器以正确格式返回，kendo 将无法识别该代码已损坏。

1. 您如何处理前端的错误。如果您使用 new kendo.data.DataSource 在这种情况下，您使用 error 属性并将其分配给如下函数：-

   var cloudStore = new kendo.data.DataSource({
   
   //other properties here
   
   //error property below
   error: function (e) {
   
       //since an error has occured, we are below removing the object we added to the grid
       $("#cloudGrid").each(function (item) {
           var grid = $(this).data("kendoGrid");
           if (e.sender === grid.dataSource) {
               grid.cancelChanges();
           }
       });
   
       //opening a popup to show the error message
       alert(e.errors);
       }
   )};
   

2. Kendo 甚至在后端实际更新对象之前就更新了前端的网格，因此如果服务器上发生错误，我们会相应地更新网格。为此，请注意我上面的代码并查看each 循环。这就是网格恢复到之前阶段的地方。