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

所以，我正在制作一个需要显示2个剑道网格的页面。网格基于相同的模型，具有相同的模式等。唯一的区别是其中一个模型属性的值（以及关联的网格名称和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>

因此，每个网格都有一个唯一的Id，但是网格中的许多元素都有相同的Id。显然，这并不理想。例如，如果（我现在正在处理的）我想为部门附加dropdownlist编辑器

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

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

---

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

如果您想在网格中显示一个列作为下拉列表，您通常会使用

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

@（Html.Kendo（）.Grid（））
.名称（“销售”）
.列（列=>
{
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

---

如果您想在网格中以下拉列表的形式显示列，通常会使用

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

@（Html.Kendo（）.Grid（））
.名称（“销售”）
.列（列=>
{
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

---

你能用JS重新编码你的下拉列表吗？想了一会儿，但我没法让它工作。Kendo在编译时将razor语法转换为JS（除非我弄错了），所以我不能引用函数中的JS函数或对象来附加模板。在运行时附加也很困难，因为没有“将编辑器添加到列”功能-需要直接更改网格的js变量和html。但是，如果我错了，请纠正我。你能用js重新编码下拉列表吗？想了一会儿，但我无法让它工作。Kendo在编译时将razor语法转换为js（除非我错了），因此我无法引用函数中的js函数或对象来附加模板。在运行时附加也很困难，因为没有“向列添加编辑器”"函数-有必要直接更改网格的js变量和html。不过，如果我错了，请纠正我。我有同样的问题，但我没有使用asp.net mvc，我使用的是html5和js，有什么解决方案吗？这是我的思路：我有同样的问题，但我没有使用asp.net mvc，我使用的是html5和js，有什么解决方案吗这是我的帖子：