How can I populate Kendo UI grid using nested model?

Question

I am trying to bind my Kendo UI grid with nested model like Products having a nested model Category. I have given everything as per the documentation but I unable find out that what's wrong with my code.

       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 } }
                }
            }
        },

and using this model as in the columns of the gird

 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" },

Following is my model returned from the server.

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

Now all the columns are successfully binded with the grid execept for Category name column. Am I missing something or doing anything wrong ?

Updated -Following is my server product view model

   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; }

And this is how I am receiving data on client side.

Answer 1

I can't try this out right now but here's an idea: your controller response contains a field named CategoryName at the top level, and in your model you're defining another field with the same name... even though you're telling it you want to map it to Category.CategoryName, I think it may be picking up the top-level CategoryName from your response (which is undefined).

Try using a different name for the CategoryName in your model.... a name that does not match any of the names in your response, and see if that does it.

Post back with the results. Good luck

Answer 2

I have managed to solve this issue after spending my two long days. The issue was that I was explicitly defining column CategoryName in Knedo Grid as per documentation which wasn't required to do and I simply removed it and add following line in schema model field.

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

In this way nested model's property was directly binded with column. I must say Kendo's documentation is terrible.