Kendo GridView that uses ClientRowTemplate and ColumnMenu at the same time not working

Question

I am currently facing an issue with kendo ui grid view that uses ClientRowTemplate and ColumnMenu at the same time.

 @(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()
)

Here are the steps that i am doing to replicate the issue:

A. Observe list of columns and headers on grid view.

B. Collapse the check box column(first column on the left) using column menu.

C. Group by any column from the list(x First Name, Last Name, Company Name etc) and notice that the check box column that was hidden earlier using column menu is visible again although it's header is not present.

Answer 1

Hi this is just an example with hierarchy grid,

@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"))
     )
  )
} 

Client Template

<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>

Model

   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; }
    }