I have a grid, with a nested sub grid using a detail template.
<div class="card">
<div class="card-body">
@(Html.Kendo().Grid<SimpleReportMenu.Models.User>
()
.Name("Grid")
.Events(e => e.Edit("onEdit"))
.Editable(editable => editable
.Mode(GridEditMode.PopUp))
.Columns(col =>
{
col.Bound(o => o.ID).Title("ID");
col.Bound(o => o.UserName).Title("User Name");
col.Bound(o => o.FullName).Title("Full Name");
col.Bound(o => o.Admin).Title("Admin?");
col.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); });
})
.ClientDetailTemplateId("subdetailsTemplate")
.ToolBar(commands => commands.Create())
.DataSource(ds => ds
.Ajax()
.Model(m =>
{
m.Id(p => p.ID);
//m.Field(p => p.ID).Editable(false);
})
.Events(e=>e.Error("error"))
.PageSize(10)
.Read(rd => rd.Action("RD_Users", "Admin")
)
.Create(create => create.Action("InsertUser", "Admin"))
.Update(update => update.Action("UpdateUser", "Admin"))
.Destroy(delete => delete.Action("DeleteUser", "Admin"))
)
.Pageable(p => p.Refresh(true))
.Sortable()
.Filterable()
)
</div>
</div>
and
<script id="subdetailsTemplate" type="text/kendo-tmpl">
@(Html.Kendo().Grid<SimpleReportMenu.Models.UserGroupMapping>()
.Name("MapGrid_#=ID#")
.Columns(columns =>
{
columns.Bound(o => o.ID).Title("ID");
columns.ForeignKey(p => p.GroupID, (System.Collections.IEnumerable)ViewData["groups"], "ID", "GroupName").Title("Group").Width(200);
//columns.Bound(o => o.UserID).Title("User");
columns.Command(command => { command.Destroy().Text(" "); command.Edit().Text(" ").UpdateText(" ").CancelText(" "); });
})
.Events(e => e.DataBound("gridBind"))
.ToolBar(tb => tb.Create())
.Editable(e => e.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Events(e => e.Error(o=>gridTemplateHelper("#=ID#")))
.Model(m =>
{
m.Id(p => p.ID);
m.Field(p => p.ID).Editable(false);
})
.Read(read => read.Action("RD_UserGroups", "Admin", new { UserId = "#= ID #" }))
.Create(u => u.Action("InsertUserDirectorate", "Admin", new { UId = "#= ID #" }))
.Update(u => u.Action("InsertUserDirectorate", "Admin"))
.Destroy(u => u.Action("DeleteUserDirectorate", "Admin"))
)
.Pageable(p => p.Refresh(true))
.ToClientTemplate()
)
</script>When the foreign key column is not commented out, expanding the record throws the javascript error:-
Uncaught SyntaxError: Invalid or unexpected token
at eval (<anonymous>)
at jquery.min.js:2:2668
at Function.globalEval (jquery.min.js:2:2679)
at Ha (jquery.min.js:3:21263)
at n.fn.init.after (jquery.min.js:3:23226)
at n.fn.<computed> [as insertAfter] (jquery.min.js:3:24511)
at HTMLAnchorElement.<anonymous> (kendo.all.js:68415:114)
at HTMLTableElement.dispatch (jquery.min.js:3:12445)
at r.handle (jquery.min.js:3:9174)This is confusing, as the same foreign key column works without issues on another page, when not in a template. Also, the same syntax in a nested grid works in another project (using a different verison of the framework). This project is using version 2020.2.513 .
The scripts are loaded by the code:-
<script src="@Url.Content("~/Scripts/modernizr-2.8.3.js")"></script>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@*<link href="@Url.Content("~/Content/kendo/2020.2.513/kendo.bootstrap-v4.min.css")" rel="stylesheet" type="text/css" />*@
<link href="@Url.Content("~/Content/kendo/2020.2.513/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2020.2.513/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/BS5/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bs5/bootstrap-icons.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/kendo/2020.2.513/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2020.2.513/jszip.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2020.2.513/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2020.2.513/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2020.2.513/cultures/kendo.culture.en-GB.min.js")"></script>
<script src="@Url.Content("~/Scripts/BS5/bootstrap.bundle.min.js")"></script>I'm at a loss to see what the problem is. If you cpould help it would be much appreciated.
It seems to be an issue with the GridForeignKey Editor Template. It is:-
@model object @( Html.Kendo().DropDownListFor(m => m) .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"]) .HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")}) )but if I replace it with an earlier version:-
@model object @( Html.Kendo().DropDownListFor(m => m) .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"]) )Hi Andrew,
Thank you for the details provided.
I invested time to replicate the described behavior at my side. After implementing the scenario locally, the ForeignKey Editor is working as expected.
Attached is the sample project that I prepared for the case.
Feel free to make the needed tests locally with the sample project attached and let me know if this is the expected behavior.,
Looking forward to hearing back from you.
Kind Regards,
Anton Mironov
Hi Andrew,
Thank you for sharing this one with the team.
If any further assistance or information is needed, do not hesitate to contact us.
Best Regards,
Anton Mironov