Url Action not evaluating record ID during Ajax load

[James]

I'm using the KendoUI Grid with nested detailed grids in a KendoUI Tab control.  In one of the child grids I need to include a custom column as a link to a different page.  I need to pass the current row ID as a querystring.  The link is drawing but is creating the URL like this: https://localhost:44322/Admin/CompanyModuleAppRole?moduleID=undefined

The routing is working as expected and the controller is getting the request and drawing the new page.  Here is the cshtml (line 150 is the problem)
Thanks for any help out there.

@using InnovareClinicianDesktop.Areas.Admin.ViewModels
@model InnovareClinicianDesktop.Areas.Admin.ViewModels.CompanyViewModelResults

@{
    ViewBag.Title = "Details";
}

<h2>Manage records in the Company table.</h2>
<div id="example" class="k-content">
    @RenderCompanyViewModel()
</div>

<h1>Other options:</h1>
@Html.ActionLink("Return to Application Management", "Index", "Home")


@helper RenderCompanyViewModel()
{
    @(Html.Kendo().Grid<CompanyViewModel>(Model.CompanyViewModels)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.CompanyName).Width(127);
            columns.Bound(p => p.IsActive).Width(40);
            columns.Bound(p => p.CreatedDate).Width(80).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.CreatedBy).Width(80);
            columns.Bound(p => p.LastModifiedDate).Width(80).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.LastModifiedBy).Width(80);
            columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            }).Width(160);
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .Sortable(sortable => sortable
            .AllowUnsort(true)
            .SortMode(GridSortMode.MultipleColumn))
        .Scrollable()
        .ClientDetailTemplateId("template")
        .Resizable(resize => resize.Columns(true))
        .Selectable(sel => sel.Mode(GridSelectionMode.Single))
        .HtmlAttributes(new { style = "height:530px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Events(events => events.Error("error_handler"))
            .Model(model => { model.Id(p => p.CompanyID); model.Field(p => p.CompanyID).DefaultValue(System.Guid.Empty); })
            .Create(create => create.Action("EditingPopup_Create", "Company", new { area = "Admin" }))
            .Read(read => read.Action("EditingPopup_Read", "Company", new { area = "Admin" }))
            .Update(update => update.Action("EditingPopup_Update", "Company", new { area = "Admin" }))
            .Destroy(update => update.Action("EditingPopup_Destroy", "Company", new { area = "Admin" }))
        )
    )
}

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("tabStrip_#=CompanyID#")
            .SelectedIndex(0)
            .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
            .Items(items =>
            {
                items.Add().Text("Users").Content(@<text>
                    @(Html.Kendo().Grid<InnovareClinicianDesktop.Areas.Admin.ViewModels.ApplicationObjectViewModel>()
                        .Name("applicationObject_#=CompanyID#")
                        .Columns(columns =>
                        {
                            columns.Bound(u => u.ObjectID).Title("ID").Width(56);
                            columns.Bound(u => u.ObjectName).Width(110);
                            columns.Bound(u => u.ObjectType).Width(30);
                            columns.Bound(u => u.FirstName).Width(190);
                            columns.Bound(u => u.LastName).Width(40);
                            columns.Bound(u => u.EmailAddress).Width(160);
                            columns.Bound(u => u.CreatedDate).Width(80).Format("{0:MM/dd/yyyy}");
                            columns.Bound(u => u.CreatedBy).Width(160);
                        })
                        .ToolBar(toolbar =>
                        {
                            toolbar.Custom().Text("Manage Users").Name("manageApplications").Action("Index", "ApplicationObject", new { companyID = "#=CompanyID#" });
                        })
                        .Pageable(pageable => pageable
                            .Refresh(true)
                            .PageSizes(true)
                            .ButtonCount(5))
                        .Sortable(sortable => sortable
                            .AllowUnsort(true)
                            .SortMode(GridSortMode.MultipleColumn))
                        .Scrollable()
                        .Resizable(resize => resize.Columns(true))
                        .Selectable(sel => sel.Mode(GridSelectionMode.Single))
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(5)
                            .Read(u => u.Action("ToolbarTemplate_ApplicationObjects", "Company", new { companyID = "#=CompanyID#" }))
                        )
                        .ToClientTemplate())
                </text>
                );
                items.Add().Text("Applications").Content(@<text>
                    @(Html.Kendo().Grid<InnovareClinicianDesktop.Areas.Admin.ViewModels.CompanyApplicationViewModel>()
                        .Name("companyApplication_#=CompanyID#")
                        .Columns(columns =>
                        {
                            columns.Bound(a => a.CompanyApplicationID).Title("ID").Width(56);
                            columns.Bound(a => a.ApplicationID).Width(110);
                            columns.Bound(a => a.IsActive).Width(30);
                            columns.Bound(a => a.CreatedBy).Width(160);
                            columns.Bound(a => a.CreatedDate).Width(80).Format("{0:MM/dd/yyyy}");
                            columns.Bound(a => a.LastModifiedBy).Width(160);
                            columns.Bound(a => a.LastModifiedDate).Width(80).Format("{0:MM/dd/yyyy}");
                        })
                        .ToolBar(toolbar =>
                        {
                            toolbar.Custom().Text("Manage Applications").Name("manageApplications").Action("Index", "CompanyApplication", new { companyID = "#=CompanyID#" });
                        })
                        .Pageable(pageable => pageable
                            .Refresh(true)
                            .PageSizes(true)
                            .ButtonCount(5))
                        .Sortable(sortable => sortable
                            .AllowUnsort(true)
                            .SortMode(GridSortMode.MultipleColumn))
                        .Scrollable()
                        .Resizable(resize => resize.Columns(true))
                        .Selectable(sel => sel.Mode(GridSelectionMode.Single))
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(5)
                            .Read(a => a.Action("ToolbarTemplate_CompanyApplications", "Company", new { companyID = "#=CompanyID#" }))
                        )
                        .ToClientTemplate())
                </text>
                );
                items.Add().Text("Modules").Content(@<text>
                    @(Html.Kendo().Grid<InnovareClinicianDesktop.Areas.Admin.ViewModels.CompanyModuleViewModel>()
                        .Name("companyModule_#=CompanyID#")
                        .Columns(columns =>
                        {
                            columns.Bound(m => m.CompanyModuleID).Title("ID").Width(56);
                            columns.Bound(m => m.IsActive).Width(30);
                            columns.Bound(m => m.CreatedBy).Width(160);
                            columns.Bound(m => m.CreatedDate).Width(80).Format("{0:MM/dd/yyyy}");
                            columns.Bound(m => m.LastModifiedBy).Width(160);
                            columns.Bound(m => m.LastModifiedDate).Width(80).Format("{0:MM/dd/yyyy}");
                            columns.Bound(m => m.ModuleID).ClientTemplate("<a href='" + Url.Action("Index", "CompanyModuleAppRole") + "?moduleID=" + "#= item.MethodID #" + "'>Manage Roles</a>").Width(100);
                        })
                        .ToolBar(toolbar =>
                        {
                            toolbar.Custom().Text("Manage Modules").Name("manageModules").Action("Index", "CompanyModule", new { companyID = "#=CompanyID#" });
                        })
                        .Pageable(pageable => pageable
                            .Refresh(true)
                            .PageSizes(true)
                            .ButtonCount(5))
                        .Sortable(sortable => sortable
                            .AllowUnsort(true)
                            .SortMode(GridSortMode.MultipleColumn))
                        .Scrollable()
                        .Resizable(resize => resize.Columns(true))
                        .Selectable(sel => sel.Mode(GridSelectionMode.Single))
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(5)
                            .Read(m => m.Action("ToolbarTemplate_CompanyModules", "Company", new { companyID = "#=CompanyID#" }))
                        )
                    .ToClientTemplate())
                </text>
                );
            })
            .ToClientTemplate())
</script>

<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    function onComplete(e) {
        if (e.name == "Delete") {
            var result = e.response.result;
            if (result == true)
                $("#Items").data("tGrid").rebind();
            else {
                alert("Error on deleting")
            }
        }
    }
</script>

[James]

This was a very frustrating bug to hunt down.  Believe it or not, I found a clue to fix my issue on a Telerik forum... <B>NOT</B> the Telerik documentation.  I tried several suggestions through hours of searching the web:

NONE of these worked:

//columns.Bound(m => m.CompanyModuleID).ClientTemplate("<a href='" + Url.Action("Index", "CompanyModuleAppRole") + "?companyModuleID=" + "<#= item.CompanyModuleID#>" + "'>Manage Roles</a>").Width(100);

//columns.Command(command => command.Custom("Manage Roles").Click("location.href='@Url.Action("ViewCustomerDetail", "CompanyModuleAppRole", new { moduleID = \\#=MethodID\\# })'"));

//columns.Bound(m => m.ModuleID).ClientTemplate("<a href='\\#= GetEditChildUrl(this) \\#'>Manage Roles</a>").Width(100);

//columns.Bound(m => m.ModuleID).ClientTemplate("" + @Html.ActionLink("Index", "CompanyModuleAppRole" + new { moduleID = "\\#= item.MethodID \\#" })).Width(100);

//columns.Bound(m => m.ModuleID).ClientTemplate("" + @Html.ActionLink("Index", "CompanyModuleAppRole" + new { moduleID="<#=item.MethodID#>" })).Width(100);

//columns.Template(m => m.ModuleID).ClientTemplate("" + @Html.ActionLink("Index", "Com
panyModuleAppRole" + new { moduleID = "\\#=item.MethodID \\#" })).Width(100);

This was the solution that worked:

columns.Bound(m => m.CompanyModuleID).ClientTemplate("<a href='" + Url.Action("Index", "CompanyModuleAppRole") + "?companyModuleID=" + "\\#: CompanyModuleID\\#" + "'>Manage Roles</a>").Width(100);

Notice the way I had to escape the variable from the bound row: "\\#: CompanyModuleID\\#".  The colon and not the equal sign made it work.

I sure hope this helps others more than the product documentation did for me :)