如何使用嵌套模型填充 Kendo UI 网格？

Question

我正在尝试将我的 Kendo UI 网格与嵌套模型（例如具有嵌套模型类别的产品）绑定。我已经按照文档提供了所有内容，但我无法找出我的代码有什么问题。

       schema: {
            data: "data",
            total: "Total",
            model: { // define the model of the data source. Required for   validation and property types.
                id: "ProductID",
                fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { validation: { required: true } },
                    UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                    Discontinued: { type: "boolean" },
                    UnitsInStock: { type: "number", validation: { min: 0, required: true } },
                    CategoryName: { from: "Category.CategoryName", validate: { required: true } }
                }
            }
        },

并在网格的列中使用此模型

 columns: [
        "ProductName",
        { field: "UnitPrice", format: "{0:c}", width: "150px" },
        { field: "UnitsInStock", width: "150px" },
        { field: "Discontinued", width: "100px" },
        { field: "QuantityPerUnit", width: "100px" },
        { field: "CategoryName", title: "Category", width: "100px" },
        { command: "destroy", title: "Delete", width: "110px" },

以下是我从服务器返回的模型。

     var resl = productService.GetProducts(take, skip, ref Total);
        var data = resl.ToList();

        // Return as JSON - the Kendo Grid will use the response
        return Json(new { Total = Total, data = data });

现在除了类别名称列之外，所有列都与网格成功绑定。我错过了什么或做错了什么？

更新 - 以下是我的服务器产品视图模型

   public class ProductViewModel
    {
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public decimal UnitPrice { get; set; }
    public string QuantityPerUnit { get; set; }
    public Int32 UnitsInStock { get; set; }
    public int? UnitsOnOrder { get; set; }
    public int? ReorderLevel { get; set; }
    public bool Discontinued { get; set; }
    public int? SupplierID { get; set; }

    public int? CategoryID { get; set; }

    public CategoryViewModel Category { get; set; }

这就是我在客户端接收数据的方式。

Answer 1

在度过了漫长的两天之后，我设法解决了这个问题。问题是我根据不需要做的文档在 Knedo Grid 中明确定义列 CategoryName，我只是将其删除并在模式模型字段中添加以下行。

{ field: "Category.CategoryName",  width: "100px" },

通过这种方式嵌套模型的属性直接与列绑定。我必须说 Kendo 的文档很糟糕。

Answer 2

我现在无法尝试，但这里有一个想法：您的控制器响应在顶层包含一个名为 CategoryName 的字段，并且在您的模型中，您正在定义另一个具有相同名称的字段...即使您'告诉它您要将其映射到 Category.CategoryName，我认为它可能会从您的响应中获取顶级 CategoryName（未定义）。

尝试在您的模型中为 CategoryName 使用不同的名称......一个与您的响应中的任何名称都不匹配的名称，看看是否匹配。

返回结果。祝你好运