如何使用 MVC 包装器将 TreeList 绑定到 MVC 模型类

Question

我发现很难理解层次结构是如何绑定在 TreeList 中的。我们正在尝试实现 InCell 编辑，但我无法使用 HTML MVC 包装器来实现。

请帮助我提供可行的解决方案，因为 How to 网站上的解决方案并未深入了解 DB 架构，也无法对其进行调试以了解如何构建模型。

1. https://docs.telerik.com/aspnet-mvc/helpers/treelist/editing

代码 sn-ps：希望对您有所帮助：

Html Markup:


@(Html.Kendo().TreeList<ABC.Areas.COManager.ViewModels.MaterialViewModel>()
                                              .Name("treelist")
                  .Toolbar(toolbar =>
                  {
                                                                                          //toolbar.Create().Name("Add Item to order");
                                                                                          toolbar.Save();
                      toolbar.Cancel();
                  })
         .Columns(columns =>
         {
             columns.Add().Field(e => e.OrderItemId).Title("Item id").Expandable(true);//.Width(220);
                                                                                 columns.Add().Field(e => e.OrderSubItemId).Title("Sub item id");//.Width(220);
                                                                                 columns.Add().Field(e => e.WBS).Title("WBS");//.Width(220);
                                                                                 columns.Add().Field(e => e.Rate).Title("Rate");//.Width(100);
                                                                                 columns.Add().Field(e => e.Hours);
             columns.Add().Field(e => e.CostAmount).Title("Cost Amount").Format("{0:C2}");
             columns.Add().Command(c =>
             {
                 c.CreateChild().Text("Add Item detail");
                 c.Destroy();
             }
);//.Width(240);
                                                                             })
.Events(ev => ev.DataBound("onDataBound"))
.Editable(e => e.Mode(TreeListEditMode.InCell))
.DataSource(dataSource => dataSource
.Batch(true)
.Read(read => read.Action("All_InCell", "OrderInputs"))
.Create(create => create.Action("Create_InCell", "OrderInputs").Type(HttpVerbs.Post))
.Update(update => update.Action("Update_InCell", "OrderInputs").Type(HttpVerbs.Post))
.Destroy(delete => delete.Action("Destroy_InCell", "OrderInputs").Type(HttpVerbs.Post))
.Model(m =>
{
m.Id(f => f.OrderSubItemId);
m.ParentId(f => f.OrderItemId);
//m.Expanded(true);
m.Field(f => f.OrderId);
m.Field(f => f.OrderItemId);
m.Field(f => f.OrderSubItemId);
m.Field(f => f.WBS);
m.Field(f => f.Rate);
m.Field(f => f.Hours);
m.Field(f => f.CostAmount).DefaultValue(0);
})
)
                //.Height(540)

        )



Controller action for read:

public JsonResult All_InCell([DataSourceRequest] DataSourceRequest request)
        {
            var result = GetDirectory().ToTreeDataSourceResult(request,
                e => e.OrderSubItemId,
                e => e.OrderItemId,
                e => new MaterialViewModel
                {
                    OrderItemId = e.OrderItemId,
                    OrderId = e.OrderId,
                    OrderSubItemId = e.OrderSubItemId,
                    OrderDate = e.OrderDate,
                    hasChildren = false
                }
            );

            return Json(result, JsonRequestBehavior.AllowGet);
        }



Gets the Data:

private IEnumerable<MaterialViewModel> GetDirectory()
        {
            return employeeDirectory.GetAll();
        }



Returns the data (Dummy/Static): Could this be the problem? I am unsure.


   internal IEnumerable<MaterialViewModel> GetAll()
        {
            var returnData = new List<MaterialViewModel>();
            for (var i = 0; i <= 10; i++)
            {
                returnData.Add(new MaterialViewModel { OrderId = i + 1, OrderItemId = (10 * (i + 1)) + (i + 1), OrderSubItemId = (100 * (i + 1)) + (i + 1), OrderDate = DateTime.Now, WBS = "ABC" + (i + 1).ToString(), Description = "Description " + (i + 1).ToString(),  });
            }
            return returnData;
        }




Model:

MaterialViewModel


public class MaterialViewModel: OrderInputsViewModel
    {
        public string WBS { get; set; }

        public string Description { get; set; }

        public double Rate { get; set; }

        public int Hours { get; set; }

        public double CostAmount { get; set; }
    }



Model:

OrderInputsViewModel


    public class OrderInputsViewModel
    {
        //[ScaffoldColumn(false)]
        public int? OrderId { get; set; }

        //[ScaffoldColumn(false)]
        public int OrderItemId { get; set; }

        public int OrderSubItemId { get; set; }

        public DateTime OrderDate { get; internal set; }

        //[ScaffoldColumn(false)]
        public bool hasChildren { get; set; }


    }

期望有一个由 Model 类填充的 TreeList，并能够在加载的项目中创建子项。

Answer 1

由 Progress Telerik 支持团队回答。在这里分享决议，希望它可以帮助任何未来的读者。

Ans - 也许我遇到的问题是 TreeList 中没有数据。原因是 ParentId 不可为空，并且没有根项目 - ParentId 为空的项目。 进行以下两项更改，我可以看到 TreeList 正确呈现：

绑定到 TreeList 的模型：

public class OrderInputsViewModel
 {
   //Parent Id
   **public int? OrderItemId { get; set; }**               

返回数据的方法（Dummy/Static）：

returnData.Add(new MaterialViewModel {
   OrderId =i + 1 ,
   OrderItemId = i % 2 == 0 ? (10 * (i + 1)) + (i + 1) 
**: (int?)null**,
   OrderSubItemId = (100 * (i + 1)) + (i + 1),
   OrderDate = DateTime.Now,
   WBS = "ABC" + (i + 1).ToString(),
   Description = "Description " + (i + 1).ToString()
});