Kendo UI 网格外键列为空

Question

我尝试按照示例将外键放入网格中。我按照这个例子：

http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn

我对它做了一些改动，因为我想使用 Popup Editor。

这是 View 中的 Grid 实现。

@(Html.Kendo().Grid<Example.Web.UI.ViewModels.ExampleItem>()
.Name("ExampleGrid")
.Columns(columns =>
{
    columns.Bound(p => p.Name);
    columns.Bound(p => p.Label);
    columns.Bound(p => p.Type);
    columns.Bound(p => p.InputType);

    columns.ForeignKey(p => p.ParentId, (System.Collections.IEnumerable)ViewData["items"], "Id", "Name").Title("Parent");

    columns.Command(command => { command.Edit(); command.Destroy(); });
})
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(5))

.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Events(events => events.Error("error_handler"))
    .Model(model =>
            {
                model.Id(p => p.Id);
                model.Field(p => p.Id).DefaultValue(Guid.NewGuid());
                model.Field(p => p.ParentId).DefaultValue(null);
            })
    .Create(update => update.Action("EditingPopup_Create", "Example"))
    .Read(read => read.Action("EditingPopup_Read", "Example"))
    .Update(update => update.Action("EditingPopup_Update", "Example"))
    .Destroy(update => update.Action("EditingPopup_Destroy", "Example"))
)
)

这是ExampeItem型号：

public class ExampleItem
{
    [ScaffoldColumn(false)]
    public Guid Id { get; set; }

    public string Name { get; set; }

    public string Label { get; set; }

    public string Type { get; set; }

    [DisplayName("Input Type")]
    public string InputType { get; set; }

    public ExampleItem Parent { get; set; }

    public Guid ParentId { get; set; }
}

在我的 Controller 中，我这样设置外键项：

ViewData["items"] = exampleItems; // This is a List<ExapleItem>

但由于某些原因，加载 Grid 时 Parent 列为空。

当我点击 Edit 时，会弹出 window 并显示父级的 Guid。

该 Guid 应该是项目的下拉列表。 Parent 列应显示 Parent 项的名称。

此网格的想法是您可以将项目添加到网格中，并且当您这样做时，您可以选择所有已添加的网格项目中的任何一个作为父项。然后在 Grid 中创建一个层次结构，稍后可以按 Parent.

对其进行排序

有人知道我哪里出错了吗？

Answer 1

不确定，但根据我的经验，您忘记为外键列添加编辑器模板。

根据您的代码，您必须将默认编辑器模板添加到您的项目中。
- 有关默认编辑器模板的详细信息，请检查 this 以获得完整 code/demo。
您还可以创建自己的编辑器模板。例如：-

产品的列定义

c.ForeignKey(x => x.ProductID, (List<Product>)ViewData["products"], "ID", "ProdName").EditorTemplateName("ProductIDEditor");

这是产品的编辑器模板，ProductIDEditor.cshtml

@using Kendo.Mvc.UI

@(Html.Kendo().DropDownListFor(m => m)
                  .AutoBind(false)
                  .OptionLabel("Select a value...")
                  .DataTextField("ProdName")
                  .DataValueField("ID")
                  .DataSource(dataSource =>
                  {
                      dataSource.Read(read => read.Action("FilterProducts", "Home").Data("filterProducts"))
                                .ServerFiltering(true);
                  })                                   
            )
            @Html.ValidationMessageFor(m => m)

如有任何疑问，请告诉我。

Answer 2

经过反复试验，我发现了问题所在。

我将模型更改为：

public class ProposalItem
{
    [ScaffoldColumn(false)]
    public int Id { get; set; }

    public string Name { get; set; }

    public string Label { get; set; }

    public string Type { get; set; }

    [DisplayName("Input Type")]
    public string InputType { get; set; }

    public ProposalItem Parent { get; set; }

    [UIHint("GridForeignKey")]
    public int? ParentId { get; set; }
}

因此从 Id 中删除了 Guid 数据类型。还用 [UIHint("GridForeignKey")] 装饰了 ParentId，现在在弹出窗口 window.

中给我一个 DropdownList

KendoUI 中似乎缺少对 Guid 的支持。

我会 post 另一个关于 Guid 为何不起作用的问题。

Answer 3

只需添加：

.DataSource(source => source.Ajax()
            .Model(model =>
            {
                model.Id(o => o.Id);
                model.Field(o => o.Id).Editable(false);
                model.Field(p => p.Id).DefaultValue(Guid.NewGuid());

                model.Field(p => p.ParentId).DefaultValue(Guid.NewGuid());

                **model.Field("ParentId", typeof(Guid));**
            })

它必须做新的 Guid。

Kendo UI 网格外键列为空

Kendo UI Grid Foreign Key column empty

asp.net-mvc

telerik

kendo-ui

kendo-grid

kendo-asp.net-mvc