当处理多个网格时处理元素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"]) 
) 

剑道将着眼于在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.