KendoUI 编辑问题

Question

Kendo UI 编辑选项显示了一些意外行为，如图所示，Server 列下方有一个文本框，ServerIP 列下方有 2 个文本框，它们都包含我选择的服务器“SQL”的 ID。问题是当我想显示服务器 IP 列时会发生这种行为，服务器和服务器 IP 都来自同一个表。

@(Html.Kendo().Grid<EnvironmentPOCO>()
      .Name("Grid")
      .Columns(columns =>
      {
          columns.Bound(d => d.EnvironmentName).Width(200).Title("EnvirontmentName");

          columns.ForeignKey(d => d.EnvironmentTypeID, (List<EnvironmentTypePOCO>)ViewData["EnvironmentType"], "EnvironmentTypeID", "EnvironmentTypeCode").Width(150).Title("EnvironmentCode").EditorTemplateName("_EnvironmentCodeDropDown");
          columns.ForeignKey(d => d.ServerID, (List<ServerPOCO>)ViewData["ServerDetails"], "ServerID", "ServerName").Width(200).Title("Server").EditorTemplateName("_ServerDropDown");
          columns.ForeignKey(d => d.ServerID, (List<ServerPOCO>)ViewData["ServerDetails"], "ServerID", "ServerIP").Width(200).Title("ServerIP");
          columns.ForeignKey(d => d.ProjectID, (List<ProjectPOCO>)ViewData["Projects"], "ProjectID", "ProjectName").Width(200).Title("ProjectName").EditorTemplateName("_ProjectNameDropDown");
       //   columns.ForeignKey(d => d.ProjectID, (List<ProjectPOCO>)ViewData["Projects"], "ProjectID", "ProjectDescription").Width(200).Title("ProjectDescription")/*.EditorTemplateName("_ProjectDescription")*/;

          columns.Command(d =>
          {
              d.Edit();
              d.Destroy();

          }).Width(200).Title("Action");
      })
      .ToolBar(tools => tools.Create())
      .Sortable()
      .Pageable()
      .Filterable()
      .DataSource(dataSource => dataSource
        .Ajax()
            .Model(model =>
                {
                    model.Id(m => m.EnvironmentID);
                    model.Field(m => m.EnvironmentName);
                    model.Field(m => m.EnvironmentTypeID);
                    model.Field(m => m.ProjectID);
                    model.Field(m => m.ServerID);

                })
            .Read(read => read.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Get))
            .Create(create => create.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Post))
            .Update(update => update.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Put))
            .Destroy(destroy => destroy.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Delete))
      )
)

Answer 1

我找到了一个解决方案，实际上如果你想显示外键的 2 个字段，你可以在你的类中创建一个属性。

 public string ServerDetailsProperty
        {
            get
            {
                return string.Format(" Name: {0} || IP: {1}", ServerName, ServerIP);
            }
        }

然后像这样在你的 csHTML 文件中调用它。

 columns.ForeignKey(d => d.ServerID, (List<ServerPOCO>)ViewData["ServerDetails"], "ServerID", "**ServerDetailsProperty**").Width(200).Title("ServerIP");

现在，如果您按“编辑”，您希望看到图中的意外行为。

Answer 2

尝试更改服务器 IP 列的 id 和名称属性，因为网格无法区分编辑时的服务器列和服务器 IP 列。

我在下面尝试了供您参考：

      columns.ForeignKey(d => d.ServerID, (List<ServerPOCO>)ViewData["ServerDetails"], "ServerID", "ServerIP").Width(200).Title("ServerIP").HtmlAttributes(new { @id="ServerIP_#=ServerIP#", @name="ServerIP_#=ServerIP#" })   

如果这不能解决您的问题，请告诉我。

---

编辑：

您可以在客户端模板中添加下拉菜单，如下所示：

columns.Bound(s => s.ServerID).ClientTemplate((@Html.Kendo().DropDownList()
  .BindTo((List<ServerPOCO>)ViewData["ServerDetails"])
  .Name("ServerIP#=ServerIP#")
  .DataTextField("ServerIP")
  .DataValueField("ServerID")
  .ToClientTemplate()).ToHtmlString());

在 Grid DataBound 事件中，将网格脚本设置为与文档一起加载，如下所示：

function onGridDataBound(e) {
    $('#GridName script').appendTo(document.body);
}

最后在模型元中将该字段设置为只读：

 model.Field(s => s.SensorID).Editable(false);

欲了解更多信息，请查看说明：Dropdown in Column Client Template