How to get a link for a checkbox element from parent and child grids

Question

I have a requirement, since I need to check the parent grid and check the parent grid, then I need to check the boxes for all child grids to true for this row of the parent grid for this purpose. I did it 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 check the boxes in the 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> 

will anyone help with this ... how to set the parent grid checkbox and set all the checkboxes for the child grid ....

Pls look at the image ... i need to get checkbox link 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 checkbox in the header not in td , but this will help you find the appropriate 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> 

View grid

 <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 the child grid, pass unique-key in each child checkbox . INX is our unique-key .Pass unique-key like this id='checkboxChild_#=inx#' .

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