Checkbox event not firing with jquery

Question

I have a checkbox line in the parent grid and a checkbox line in the child grid, as well as in the hierarchy grid mode using the kendo user interface . architecture is like this ...

I have four rows in the parent grid, there is a checkbox in this column, and for each parent row I have one child grid with 4 rows in it and one column column ...

If I check the box in the row of the parent grid, I need to access the checkboxes in the column of the child grid that apply only to this row, and I need to set the checked attribute to true for this child grid .....

for this, I turn to the checkbox with the parent grid like this.

this is javascript function

<script type="text/javascript"> $('.chkbxq').live('click', function (e) { alert('1'); // this alert is not firing var checkchildgrid = $('#Gridparent').find(".k-detail-row").find('td.k-detail-cell').find('[type="checkbox‌​"]').is(':checked'); alert(checkchildgrid); if ($(this).is(':checked')) { checkchildgrid.attr('checked', 'checked'); } else { checkchildgrid.attr('checked', false); } }); </script> 

and this is the hierarchy grid code ....

  @model IEnumerable<Topco.TopMapp.MVC.Models.CostPageSearch> @{ ViewBag.Title = "Index"; } <h2>Index</h2> @using (Html.BeginForm()) { @(Html.Kendo().Grid<Topco.TopMapp.MVC.Models.CostPageSearch>() .Name("Gridparent") .Columns(columns => { columns.Template(@<text></text>).ClientTemplate("<input id='chqprnt' 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); }) .Sortable() .Pageable() .Scrollable() .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' class='chkbx' 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#" })) ) .Pageable() .Sortable() .ToClientTemplate() ) </script> <script> function dataBound() { this.expandRow(this.tbody.find("tr.k-master-row").first()); //alert('1'); } </script> 

but when I click on the checkbox in the parent grid, the click event does not fire ...

can anyone suggest any ideas and solutions to this problem that would be very grateful to me .....

thank you very much in advance...

EDIT: you would look at the image below, where I checked the box, and clicking on this box does not fire the event ...

Answer 1

Try it,

  $('#Gridparent').on("click", ".chkbxq", function (e) { var selected = $(this).is(':checked'); var grid = $("#grid12").data("kendoGrid"); if (selected == true) { var check = $('.k-detail-row').find('td.k-detail-cell').find('div.k-grid').find('table').find('tbody').find('[type="checkbox"]').attr('checked', true); var asd = check.is(':checked'); alert(asd); } }); 

Use a grid click.

Answer 2

This is how I imagine it should be encoded - disclaimer I don’t know Kendo at all

If we need to handle checkboxes like you are WRITE, we can do

 $(function() { $('.chkbxq').on('click', function (e) { var checked = this.checked; $('#Gridparent').find(".k-detail-row").find('td.k-detail-cell').find('[type="checkbox‌​"]').each(function() this.checked=checked; // toggle }); }); }); 

If the content is included, you need to

 $(function() { $("#Gridparent").on('click','.chkbxq', function (e) { var checked = this.checked; $(this).find(".k-detail-row").find('td.k-detail-cell').find('[type="checkbox‌​"]').each(function() this.checked=checked; // toggle }); }); }); 

NOTE .find works right from home, so maybe you just need to

 $(this).find('[type="checkbox‌​"]').each(function() 

Answer 3

see below if this helps:

  <script type="text/javascript"> $('.chkbxq').on('click', function (e) { alert('1'); // this alert is not firing var checkchildgrid = $('#Gridparent').find(".k-detail-row").find('td.k-detail-cell').find('[type="checkbox‌​"]').prop('checked'); alert(checkchildgrid); if ($(this).prop('checked')) { checkchildgrid.prop('checked', 'checked'); } else { checkchildgrid.prop('checked', false); } }); 

Hope this helps.