Question

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

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

我稍微修改了一下，因为我想使用Popup Editor。

以下是Grid中的View实施。

@(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>

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

当我点击Edit时，会弹出一个窗口并显示父母的Guid。

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

此网格的想法是您可以向网格添加项目，当您这样做时，您可以选择所有已准备好的网格项目作为父项目。然后在Grid中创建一个层次结构，稍后可以通过Parent对其进行排序。

任何人都知道我哪里出错了？

Answer 1

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

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

产品的列定义

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

以下是Product，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; }
}

因此从Guid中删除了Id数据类型。同时使用ParentId修饰了[UIHint("GridForeignKey")]，现在在弹出窗口中为我提供了DropdownList。

看起来KendoUI中缺乏对Guid的支持。

我将发布另一个问题，说明为什么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 Grid外键列为空

3 个答案: