Question

Kendo UI编辑选项显示一些意外行为，正如您在图像中看到的那样，Server列下面有一个文本框，ServerIP列下面有2个文本框，其中包含我选择的服务器“SQL”的id。问题是当我想要显示服务器IP列时出现这种情况，服务器和服务器IP都来自同一个表。

Overlapping Fields in Edit Option

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

我找到了一个解决方案，实际上如果你想显示foriegn键的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和name属性，因为网格无法区分“编辑”上的“服务器列”和“服务器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);
}

最后在模型元中将字段设置为readonly：

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

有关详细信息，请查看解释： Dropdown in Column Client Template

KendoUI编辑问题

2 个答案: