asp.net-mvc - 同时使用 ClientRowTemplate 和 ColumnMenu 的 Kendo GridView 不起作用

Question

我目前面临同时使用 ClientRowTemplate 和 ColumnMenu 的 kendo ui 网格视图的问题。

 @(Html.Kendo().Grid<ByCompanyParticipants>()
    .Name("grdParticipantsList")
    .Columns(cols =>
    {
        cols.Bound(bcp => bcp.IsAssigned)
            .Width(40)
            .Title("Assigned")
            .Sortable(false)
            .Groupable(false)
            .Filterable(false)
            .HeaderHtmlAttributes(new { @class = "thGreenGridColumnHeader" })
            .HeaderTemplate("<div class='divParticipantsCheckAll'>" +
                                "<form class='frmParticipantsCheckAll'>" +
                                "<input id='chkParticipantsCheckAll' type='checkbox' onclick='ToggleParticipantCheckBoxes()' />" +
                                "</form>" +
                            "</div>");

        cols.Bound(bcp => bcp.CompanyName)
            .Title("Company")
            .HeaderHtmlAttributes(new { @class = "thGreenGridColumnHeader" });

        cols.Bound(bcp => bcp.FirstName)
            .Title("First Name")
            .HeaderHtmlAttributes(new { @class = "thGreenGridColumnHeader" });

        cols.Bound(bcp => bcp.LastName)
            .Title("Last Name")
            .HeaderHtmlAttributes(new { @class = "thGreenGridColumnHeader" });

        cols.Bound(bcp => bcp.Title)
            .Title("Position")
            .HeaderHtmlAttributes(new { @class = "thGreenGridColumnHeader" });

        cols.Bound(bcp => bcp.City)
            .Title("City")
            .HeaderHtmlAttributes(new { @class = "thGreenGridColumnHeader" });

        cols.Bound(bcp => bcp.MSO)
            .Title("MSO")
            .HeaderHtmlAttributes(new { @class = "thGreenGridColumnHeader" });

        cols.Bound(bcp => bcp.UserID)
            .Title("User Role")
            .Filterable(false)
            .Sortable(false)
            .Groupable(false)
            .HeaderHtmlAttributes(new { @class = "thGreenGridColumnHeader" });

        cols.Bound(bcp => bcp.UserID)
            .Title("Co-Owner")
            .Width(84)
            .Filterable(false)
            .Sortable(false)
            .Groupable(false)
            .HeaderHtmlAttributes(new { @class = "thGreenGridColumnHeader" });
    })
    .ClientRowTemplate(
    "<tr class='byUserParticipantRow'>" +
        "#=InjectParticipantGridGroupCells()#" +
        "<td>" +
            "<div class='divParticipantsCheckBox'>" +
                "<form>" +
                    "<input id='chkParticipant#:UserID#' type='checkbox' class='chkParticipantsCheckBox' onclick='ToggleParticipantCheckBox(#:UserID#)' #:(IsAssigned != null && IsAssigned) ? 'checked=\"true\"' : \"\"# />" +
                "</form>" +
            "</div>" +
        "</td>" +
        "<td class='trGridRow'>" +
            "#:CompanyName#" +
        "</td>" +
        "<td class='trGridRow'>" +
            "#:FirstName#" +
        "</td>" +
        "<td class='trGridRow'>" +
            "#:LastName#" +
        "</td>" +
        "<td class='trGridRow'>" +
            "#=(Title == null ? '' : Title)#" +
        "</td>" +
        "<td class='trGridRow'>" +
            "#=(City == null ? '' : City)#" +
        "</td>" +
        "<td class='trGridRow'>" +
            "#=(MSO == null ? '' : MSO)#" +
        "</td>" +
        "<td>" +
            "<div class='divParticipantUserRole'>" +
            "</div>" +
        "</td>" +
        "<td>" +
            "<div class='divIsParticipantCoOwner'>" +
                "<form>" +
                    "<input class='chkIsParticipantCoOwner' type='checkbox' />" +
                "</form>" +
            "</div>" +
        "</td>" +
    "</tr>"
    )
    .DataSource(ds =>
    {
        ds.Ajax()
        .Read(read =>
        {
            read.Action("GetProjectParticipants", "ProjectConfiguration")
                .Data("GetProjectParticipantParameters");
        })
        .ServerOperation(false);
    })
    .Events(e =>
    {
        e.DataBound("OnByUserParticipantGridDataBound");
    })
    .Filterable()
    .ColumnMenu()
    .Groupable()
    .HtmlAttributes(new { style = "height: 285px;" })
    .Scrollable()
    .AutoBind(false)
    .Selectable(se => se.Mode(GridSelectionMode.Single))
    .Sortable()
)

以下是我正在执行的复制问题的步骤：

A. 观察网格视图上的列和标题列表。

B. 使用列菜单折叠复选框列（左侧第一列）。

C. 按列表中的任何列（x 名字、姓氏、公司名称等）进行分组，并注意之前使用列菜单隐藏的复选框列再次可见，尽管它的标题不存在。

Answer 1

嗨，这只是层次网格的一个例子，

@using (Html.BeginForm("GridListView", "Test", FormMethod.Post))
{ 

    @(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleModel>()
    .Name("grid12")
    .Columns(columns =>
    {
        columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbxq' type='checkbox'  />").ClientTemplate("<input id='checkbox_#=inx#' class='chkbxq' type='checkbox' />");
        columns.Bound(p => p.SampleDescription);
        columns.Bound(p => p.SampleCode);
        columns.Bound(p => p.SampleItems);
    })
      .ClientDetailTemplateId("client-template")

        .Pageable()
            .Navigatable()
             .Sortable()
             .Groupable()
         .DataSource(dataSource => dataSource
        .Ajax()
            .Model(model => model.Id(p => p.inx))
           //.PageSize(1)
            .Read(read => read.Action("Read", "Test"))
     )
  )
} 

客户端模板

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

         @(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleGridModel>()
                    .Name("gridChild_#=inx#")
            .Columns(columns =>
            {
                columns.Template(@<text></text>).ClientTemplate("<input id='checkboxChild_#=inx#' 'class='checkchild' onclick='UpdateIdinHF(this);' type='checkbox'/>").Width(30);
                columns.Bound(o => o.SampleDescriptionGrid).Width(100);
                columns.Bound(o => o.SampleCodeGrid).Width(100);
                columns.Bound(o => o.SampleItemsGrid).Width(100);
            })
           .DataSource(dataSource => dataSource
               .Ajax()
               .PageSize(5)
               .Read(read => read.Action("ReadGrid", "Test"))
           )
           .ToClientTemplate()
   )
</script>

模型

   public class SampleGridModel
    {
        public int inx { get; set; }
        public bool studentclassGrid { get; set; }
        public string SampleDescriptionGrid { get; set; }
        public string SampleCodeGrid { get; set; }
        public string SampleItemsGrid { get; set; }
    }

 public class SampleModel
    {
        public int inx { get; set; }
        public bool studentclass { get; set; }
        public string SampleDescription { get; set; }
        public string SampleCode { get; set; }
        public string SampleItems { get; set; }

        public IEnumerable<SampleGridModel> sampleGridModel { get; set; }
    }