Kendo UI edit option showing some unexpected behaviour, as you can see in the image there is a text box below Server column and 2 below ServerIP column all containing the id of server "SQL" i selected. Problem is when ever i want to show Server IP column this behaviour occurs, both server and server IP are from the same table.

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))
      )
)

Related posts

Recent Viewed