how to get the reference for checkbox element from both parent and child grids

Question

I have got requirement like i need to find the parent grid row checkbox and if parent grid row checkbox is checked then i need to set all child grid checkboxes to true for that parent grid row checkbox for that purpose I have done like this....

 <script type="text/javascript">
    $(document).ready(function () {
        $('#btnMove').click(function () {                                        
        var parentgrid = $('#GridParent').data('kendoGrid');  
        var childGrid = $('#GridParent').closest(".k-grid").data("kendoGrid");               
        var Count = $('#Gridparent').data("kendoGrid").dataSource.total();
        alert(Count);
      for (i = 0; i < Count; i++) 
     {
          var isChecked = parentgrid.tbody.find('tr:eq(' + i + ')').find('td').find('.chkbxq').is(':checked');
          alert(isChecked); // here i need to get the property of parent grid row checkbox and I am not getting this alert....                  
          if (isChecked == true)
          {
             var allchildgridchkboxes = childGrid.tbody.find('td').find('chkbx');
             alert(allchildgridchkboxes); // i am not getting this alert     
             // here i need to set the all checkboxes checked property to true
          }

     }     
   });
 });
</script>

and this is my view where i am defining checkboxes in grid ...

View

@using (Html.BeginForm())
{ 
   @(Html.Kendo().Grid<Topco.TopMapp.MVC.Models.CostPageSearch>()
        .Name("Gridparent")
        .Columns(columns =>
        {
            columns.Template(@<text></text>).ClientTemplate("<input id='checkbox' onclick='grdChkBoxClick(this);' class='chkbxq' type='checkbox' />").Width(30);
            columns.Bound(e => e.CostPage).Width(100);
            columns.Bound(e => e.Description).Width(100);
            columns.Bound(e => e.VendorName).Width(100);
            columns.Bound(e => e.BillTypeDirect).Width(100);
            columns.Bound(e => e.BillTypeWarehouse).Width(100);
            columns.Bound(e => e.VendorName).Width(100);    
        })
        .ClientDetailTemplateId("client-template")
        .HtmlAttributes(new { style = "height:480px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(6)
            .Read(read => read.Action("HierarchyBinding_Employees", "CostPageDisplay"))
        )
        .Events(events => events.DataBound("dataBound"))
)
    <script id="client-template" type="text/kendo-tmpl">
         @(Html.Kendo().Grid<Topco.TopMapp.MVC.Models.ItemsDescriptionModel>()
            .Name("grid_#=CostPage#")
            .Columns(columns =>
            {
                columns.Template(@<text></text>).ClientTemplate("<input id='checkbox' onclick='grdChkBoxClick(this); 'class='chkbxq' type='checkbox'/>").Width(30);
                columns.Bound(o => o.ItemId).Width(100);
                columns.Bound(o => o.ItemDescription).Width(100);
                columns.Bound(o => o.BrandCode).Width(100);
                columns.Bound(o => o.PackSize).Width(100);
            })
           .DataSource(dataSource => dataSource
               .Ajax()
               .PageSize(5)
               .Read(read => read.Action("HierarchyBinding_Orders", "CostPageDisplay" , new { employeeID = "#=CostPage#" }))
           )
           .ToClientTemplate()
   )
    </script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
        //alert('1');
    }
</script>

would any one pls help on this ... how to find the parent grid row checkbox checked and how to get all checkboxes for child grid ....

pls look at the image ...i need to get the checkbox reference for both grids

UPDATE :

  <script type="text/javascript">
    $(document).ready(function () {
        $('#btnMove').click(function () {
            debugger;
            alert("button clicked");
            var parentgrid = $('#GridParent').data('kendoGrid');       
            var count = $('#Gridparent').data('kendoGrid').dataSource.total();
            alert(count);
            var ischeckedone = parentgrid.tbody.find('td').find('.chkbxq').is(':checked');
            alert(ischeckedone);
            var rows = parentgrid.table.find('>tbody>tr').find('tr.k-state-selected').dataSource.total();
            alert(rows);
            //var sel = rows[0].cells[1].innerHTML;
            //alert(sel);        
            //var gridchild = parentgrid.parents("[data-role=grid]").data("kendoGrid");
            //var COUNT = parentgrid.parents("[data-role=grid]").data("kendoGrid").dataSource.total();
            //var childGrid = $('#GridParent').closest(".k-grid").data("kendoGrid");
            //var childgrid = parentgrid.detailCell.find('>.k-grid').data().kendoGrid;                
            //var anothercount = $('#GridParent').closest(".k-grid").data("kendoGrid").dataSource.total();
            //alert(anothercount);
           // var childrows = parentgrid.detailCell.find('>.k-grid').data().kendoGrid.dataSource.total();
           // alert(childrows);
            var chekbox = parentgrid.table.find('tr').find('td:first input').find('.chkbxq').is(':checked');
            alert(chekbox);
            for (i = 0; i < Count; i++) {
               // var isChecked = parentgrid.tbody.find('tr:eq(' + i + ')').find('td').find('.chkbxq').is(':checked');
                var chekbox = parentgrid.table.find('tr').find('td:first input').find('.chkbxq').is(':checked');
                alert(chekbox);// din't worked
                alert(isChecked);// din't worked
                if (isChecked == true)
                {
                    var allchildgridchkboxes = childGrid.tbody.find('td').find('chkbx');
                    alert(allchildgridchkboxes); // din't worked
                }              
            }     
        });
    });
</script>

Answer 1

In my code i have checkbox in header not in td but this help you to find corresponding child grid checkbox to,

<script type="text/javascript">
    $(document).ready(function () {
          $('#grid12').on("click", ".chkbxq", function (e) {
        var $this = $(this);
        var selected = $this.is(':checked');
        var id = $this.attr('id');
        var value = id.replace('checkbox_', '');
        var rowIndex = $this.parent().index();
        var cellIndex = $this.parent().parent().index();
        var grid = $("#grid12").data("kendoGrid");
        var datatItem = grid.dataItem(grid.tbody.find('tr:eq(' + cellIndex + ')'));

         var childgridid = $('.k-detail-row').find('td.k-detail-cell').find('div.k-grid').attr('id');
          var valurchildgrid = childgridid.replace('grid_', '');
          var childrowscount = $('div[id*="grid_' + valurchildgrid + '"]').data("kendoGrid").dataSource.total();

        var check = $('.k-detail-row').find('td.k-detail-cell').find('div.k-grid').find('table').find('tbody').find('input[id*="checkboxChild_' + value + '"]').each(function () {
            if (selected == true) {
                $(this).attr('checked', 'checked');
            }
            else {
                $(this).attr('checked', false);
            }
        });        



    });
});
</script>

Grid View

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

         @(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleGridModel>()
                    .Name(" grid_#=CostPage#")
            .Columns(columns =>
            {
                columns.Template(@<text></text>).ClientTemplate("<input id='checkboxChild_#=inx#' 'class='checkchild' 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>
@using (Html.BeginForm("GridListView", "Test", FormMethod.Post))
{ 

@*<input id="Submit1" type="button" value="SubmitValue" />*@
    <input id="btnsubmit" type="button" value="SubmitValue" />
    @(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")
        .AutoBind(true) // here I am disabling automatic binding at page load
       .DataSource(dataSource => dataSource
        .Ajax()
            .Read(read => read.Action("Read", "Test"))
     )
  )

In Child Grid pass unique-key in each child checkbox. INX is our unique-key.Pass Unique-key like this id='checkboxChild_#=inx#'.

This is demo link http://jsbin.com/ivoqup/3/edit