[Solved] Nested Grid EditPopup causing 'appendChild' error

[Charlston]

I have just upgraded app from .NET8 to .NET10. Ran into a issue testing the app where the nest grid with an edit mode is causing an appendChild error in the console menu that didnt exist when it was .NET8. You can see the code and the full error message. 

 

@(
Html.Kendo().Grid<ContactTasks>()
    .Name("grid")
       .Columns(columns =>
    {
        columns.Bound(p => p.Portal).Filterable(false).Visible(false);
        columns.Bound(p => p.ContactTaskId).Filterable(false).Visible(false);
        columns.Bound(p => p.TaskName).Title("Campaign Group");
        columns.Bound(p => p.StartDate);
        columns.Bound(p => p.Active);
        columns.Command(command => { command.Edit().Text(" ").HtmlAttributes(new { @class = "edit-ContactTask" }); }).HtmlAttributes(new
        {
            style = "text-align: center;"
        });
    })
        .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("Campaigns"))
          .ToolBar(t =>
            {
                t.ClientTemplateId("GridToolbarTemplate");

            })
        .Resizable(resize => resize.Columns(true))
        .Sortable()
           .Scrollable(s => s.Enabled(false))
        .Pageable(pageable => pageable
            .ButtonCount(5)
            .Refresh(true)
            .PageSizes(new[] { 20, 50, 100, 500 }))
            .AutoBind(true)
        .Reorderable(reorder => reorder.Columns(true))
        .Events(e => e.DataBound("onDataBound"))
        .Filterable()
             .ClientDetailTemplateId("client-template")
        .HtmlAttributes(new { style = "height:650px;" })
        .ColumnMenu()
        .AutoBind(true)
        .DataSource(dataSource => dataSource
             .Ajax()
             .PageSize(20)
             .Events(ev => ev.RequestEnd("onRequestEnd"))
             .Model(model => model.Id(p => p.ContactTaskId))
             .Read(read => read.Action("Read", "Campaigns").Data("getMecFilterLocal").Type(HttpVerbs.Get))
             .Create(update => update.Action("Create", "Campaigns").Data("getFilters").Type(HttpVerbs.Post))
             .Update(update => update.Action("Update", "Campaigns").Data("forgeryToken").Type(HttpVerbs.Post))
             .Destroy(update => update.Action("Delete", "Campaigns").Data("forgeryToken").Type(HttpVerbs.Post))
    )
)

<script id="client-template" type="text/x-kendo-template">

 @(
Html.Kendo().Grid<EFCoreScaffoldSPACS.Models.ContactLists>()
                        .Name("grid_#=ContactTaskId#") // make sure the Name is unuque
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.PortalId).Hidden(true);
                                    columns.Bound(c => c.ContactListId).Hidden(true); ;
                                    columns.Bound(c => c.ListName).Title("Campaign Name");
                                    columns.Bound(p => p.StartDateTime).Title("Start Date Override");
                                    columns.Bound(p => p.ContactsCount).Title("Contacts Count");
                                    columns.Bound(p => p.Active);

                                    columns.Command(command => { command.Edit().Text(" ").IconClass("fas fa-sm fa-pen-to-square").HtmlAttributes(new { @class = "edit-ContactList custom-icon-button" }); command.Custom("openContacts").Template("<a class='edit-ContactListMembers' href='" + Url.Action("Index", "PhoneOperators", new { Mec = "#=PortalId#" }) + "' data-toggle='tooltip' ><i class='fa-regular fa-users'></i></a>").HtmlAttributes(new { @class = "edit-ContactListMembers" }); }).HtmlAttributes(new
                                    {
                                        style = "text-align: left; "
                                    });
                                })
                                .ToolBar(toolbar =>
                                    {
                                        toolbar.Create().Text("New Campaign").HtmlAttributes(new { @class = "btn btn-primary", style = "width: 170px;" });

                                    })
                                   .Editable(e => e.Mode(GridEditMode.PopUp))
                                @* .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("ContactLists")) *@
                            .HtmlAttributes(new { style = "min-height: 600px; height: 100%;" })
                            .DataSource(dataSource => dataSource
                                                 .Ajax()
                                               .Events(events => events.Error("error_handler")) 
                                                  .PageSize(100)
                                                  .Model(model => model.Id(p => p.ContactListId))
                                                 .Read(read => read.Action("Read", "ContactLists").Data("getFiltersGETList(#=ContactTaskId#)").Type(HttpVerbs.Get))
                                                 .Create(update => update.Action("Create", "ContactLists").Data("getFiltersList(#=ContactTaskId#)").Type(HttpVerbs.Post))
                                                 .Update(update => update.Action("Update", "ContactLists").Data("forgeryToken").Type(HttpVerbs.Post)))
                              .Pageable()
                              .ToClientTemplate()
                                            ) 
</script>

Error Message 

VM140:1 Uncaught SyntaxError: Failed to execute 'appendChild' on 'Node': Unexpected token '{' (at VM140:1:6534)
    at HTMLElement.appendChild (injectScript.js:1:36669)
    at m (jquery-3.7.1.min.js:2:880)
    at $e (jquery-3.7.1.min.js:2:46274)
    at ce.fn.init.after (jquery-3.7.1.min.js:2:48055)
    at ce.fn.<computed> [as insertAfter] (jquery-3.7.1.min.js:2:49175)
    at init._addDetailRow (inline-ai-prompt-commands.js:15:48)
    at init._toggleDetails (inline-ai-prompt-commands.js:15:48)
    at HTMLAnchorElement.<anonymous> (inline-ai-prompt-commands.js:15:48)
    at HTMLTableElement.dispatch (jquery-3.7.1.min.js:2:40035)
    at v.handle (jquery-3.7.1.min.js:2:38006)