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

Question

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

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将不会识别出代码已损坏。

2. 您如何处理前端错误。如果您使用的是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);
       }
   )};
   

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