显示多个网格时处理元素 Id 冲突

Question

因此，我正在处理需要显示 2 Kendo 个网格的页面。网格基于相同的模型，具有相同的模式等。唯一的区别是其中一个模型属性的值（以及关联的网格名称和 CRUD 调用）。例如：

<div>
@(Html.Kendo().Grid<Person>()
            .Name("Sales")
            .Columns(columns =>
            {
                columns.Bound(c => c.FullName);
                columns.Bound(c => c.Department);
                columns.Command(command =>
                {
                    command.Edit();
                    command.Destroy();
                });
            })
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.InLine))
            .Sortable()
            .DataSource(datasource => datasource
                .Ajax()
                .ServerOperation(false)
                .Model(model => model.Id(u => u.PersonID))
                .Create(update => update.Action("Person_Create", "Admin", new { positionTypeId = 1 }))
                .Read(read => read.Action("Person_Read", "Admin"))
                .Update(update => update.Action("Person_Update", "Admin"))
                .Destroy(update => update.Action("Person_Destroy", "Admin"))
            ))
</div>
<div>
            @(Html.Kendo().Grid<Person>()
            .Name("IT")
            .Columns(columns =>
            {
                columns.Bound(c => c.FullName);
                columns.Bound(c => c.Department);
                columns.Command(command =>
                {
                    command.Edit();
                    command.Destroy();
                });
            })
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.InLine))
            .Sortable()
            .DataSource(datasource => datasource
                .Ajax()
                .ServerOperation(false)
                .Model(model => model.Id(u => u.PersonID))
                .Create(update => update.Action("Person_Create", "Admin", new { positionTypeId = 2 }))
                .Read(read => read.Action("Person_Read", "Admin"))
                .Update(update => update.Action("Person_Update", "Admin"))
                .Destroy(update => update.Action("Person_Destroy", "Admin"))
            ))
</div>

模特所在的位置

public class Person
{
    public int PersonID { get; set; }
    public string Department{ get; set; }
    public int PositionTypeId { get; set; }
    public string FullName { get; set; }
}

因此，每个网格都有一个唯一的 ID，但网格内的许多元素将具有相同的 ID。显然，这并不理想。例如，如果（我现在正在处理的）我想为部门附加一个下拉列表编辑器，

@(Html.Kendo().DropDownList()
    .Name("Department")
    .BindTo((System.Collections.IEnumerable)ViewData["Department"])
)

kendo 将查看 DropDownList 中的 .Name()，并将模板附加到第一个具有正确 ID 的元素。因此，第一个网格创建了它的编辑器（两次），而第二个网格仍然是标准的文本框输入。

所以我想知道是否有办法避免这个问题（最好不用在 js 中重新编码网格）。

Answer 1

如果您希望将列显示为网格内的下拉列表，您通常会使用 ForeignKey 列定义而不是 Bound

@(Html.Kendo().Grid<Person>()
            .Name("Sales")
            .Columns(columns =>
            {
                columns.Bound(c => c.FullName);
                columns.ForeignKey(c => c.Department, (System.Collections.IEnumerable)ViewData["Department"], "NameOfValueColumn", "NameOfDisplayTextColumn");
                columns.Command(command =>
                {
                    command.Edit();
                    command.Destroy();
                });
            })

您必须确保在您的项目中也有 EditorTemplates，特别是 GridForeignKey。

See a demo of this on the Telerik site.

显示多个网格时处理元素 Id 冲突

Dealing with element Id conflicts when displying multiple grids

kendo-ui

kendo-grid

kendo-asp.net-mvc