尝试使用 ASP.NET MVC 从 Kendo UI Grid 中的子网格重定向时出错

Question

@(Html.Kendo().Grid<ClaimTravelCashSelectByApproverId_Result>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.chkbox)
                .HeaderTemplate("<input type='checkbox' id='chkAllClaim'/>")
                .ClientTemplate("<input type='checkbox' class='clsClaim'/>")
                .HtmlAttributes(new { style = "text-align: center" })
                .Filterable(false)
                .Width(50);
            columns.Bound(e => e.Name)
                .Filterable(filterable => filterable.UI("name"))
                .Width(150)
                .Title("Claim");
            columns.Bound(e => e.Description)
                .Filterable(false)
                    .Width(150);
            columns.Bound(e => e.Amount)
                .Filterable(false)
                    .Width(100);
            columns.Bound(e => e.Status)
                    .Width(100);
            columns.Bound(e => e.FullName)
                    .Width(150);
            columns.Bound(e => e.CreatedDate).ClientTemplate("#= kendo.toString(kendo.parseDate(CreatedDate,'dd/MM/yyyy'), '" + ProjectSession.DateFormat + "') #")
                    .Width(100);
            columns.Template(@<text></text>).ClientTemplate(
        @Html.ViewLink("View Comment", "javascript:", null, null, new { datahref = Url.Action("_ViewClaimComment", "Home", new { Data = "#=ClaimId#" }), @class = "clsView" }).ToHtmlString())
        .Width(50);

        })
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:1000px;" })
        .Filterable(filterable => filterable
        .Extra(false)
         .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            ))
        )
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(6)
                    .Read(read => read.Action("claimApproverList", "Approver"))
        )
        .Events(events => events.DataBound("dataBound")))

<script id="template" type="text/kendo-tmpl">@(Html.Kendo().Grid<ClaimSelectByApproverIdByClaimId_Result>()
            .Name("grid_#=ClaimId#")
            .Columns(columns =>
            {
                columns.Bound(o => o.ClaimId).Width(110);
                columns.Bound(o => o.ClaimTypeId).Width(110);
                columns.Bound(o => o.ClaimTypeName).Width(110);
                columns.Bound(o => o.NoOfItems).Width(110);
                columns.Template(@<text></text>).ClientTemplate(
                    @Html.ViewLink("View", "RedirectByClaimTypeName", "Approver", new { Data = "#=ClaimId#" , TypId = "#=ClaimTypeId#" }).ToHtmlString())
                    .Width(50);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                //.PageSize(10)
                .Read(read => read.Action("GetClaimInnerGridByClaimId", "Approver", new { ClaimId = "#=ClaimId#" }))
            )
            //.Pageable()
            //.Sortable()
            .ToClientTemplate()
)</script>

/* View comment fro claim*/
$(".clsView").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    alert($(this).attr("datahref"));
    $("#divCommentsdialog").load($(this).attr("datahref")).dialog({
        modal: true,
        height: 450,
        width: 600,
        draggable: false,
        resizable: false,
        dialogClass: 'no-close success-dialog',
        title: '@objFieldNameList["Claim"]' + " " + '@objFieldNameList["Comment"]',
        close: function (event, ui) {
            $(this).dialog('destroy');
            $("#divCommentsdialog").empty();
        }
    });
});




$("#chkAllClaim").click(function () {
    $('.clsClaim').prop('checked', $(this).is(':checked'));
});



/* If all checkbox is checked than top checkbox will be checked.*/
$('.clsClaim').click(function () {
    if ($('.clsClaim:not(:checked)').length > 0) {
        $("#chkAllClaim").prop('checked', false);
    }
    else {
        $("#chkAllClaim").prop('checked', true);
    }
});

现在我的问题是：

1. 当我检查 'chkAllClaim' 时，Kendo 网格似乎是回发且未选中复选框（不知道在我的 js 函数之后究竟发生了什么）

2. 当我点击类 'clsView' 时，它不会转到 js 函数（当我从浏览器插入该函数时）

3. 在我的第一个网格中，我得到了“#=ClaimId#”，对于“查看评论”，在第二个网格（子网格）中，我也得到了“#=ClaimId#”，但是当我尝试获取“ #=ClaimTypeId#" , I GOT ERROR : ReferenceError: ClaimTypeId is not defined（问题出在哪里？）

我从这里参考：http://demos.telerik.com/aspnet-mvc/grid/hierarchy

Answer 1

只需在#之前使用\\作为内部网格绑定

  @(Html.Kendo().Grid<Uhrs.Domain.Entities.EntityPermission>()
          .Name("grid_#=FundUserRoleId#") // make sure the Name is unuque
          .Columns(columns =>
          {
              columns.Bound(p => p.MenuID).Visible(false);
              columns.Bound(p => p.MenuName).ClientTemplate("<strong>\\#:MenuName\\#</strong>");
              columns.Bound(p => p.MenuStatus).ClientTemplate("<input type='checkbox' \\#: MenuStatus? checked='checked': checked='' \\# class='chkbx' onclick='checkBoxClick(this,#=FundUserRoleId#)' />");


          })
          .ToolBar(toolbar => toolbar.Save())
          .Editable(editable => editable.Mode(GridEditMode.InCell))
          .HtmlAttributes(new { style = "width:610px;" })
          .DataSource(dataSource =>
              dataSource
              .Ajax()
              .Batch(true)
              .ServerOperation(false)
              .PageSize(20)
              .Model(model =>
                    {
                        model.Id(p => p.MenuID);
                        model.Field(p => p.MenuName).Editable(false);

                    })
              .Events(events => events.Error("error_handler").RequestEnd("onRequestEndChildGrid"))
              .Read(read => read.Action("ReadUserPermissions", "Admin", new { linkFundUserId = "#=FundUserRoleId#" }))
              .Create(create => create.Action("CreateUserPermissions", "Admin", new { linkFundUserId = "#=FundUserRoleId#" }))
              .Update(update => update.Action("UpdateUserPermissions", "Admin", new { linkFundUserId = "#=FundUserRoleId#", roleID = "#=Role.RoleId#" }))
          )
          .Pageable()
          .ToClientTemplate()
    )