checkbox event is not firing with jquery

Question

I have got checkbox row in parent grid and checkbox row in child grid as well in Hierarchy grid mode using kendo UI. the architecture is like this...

I have got four rows in parent grid,in that one column is checkbox and for every parent row i have got one child grid with 4 rows in it and one checkbox column as well...

If i click the checkbox in parent grid row i need to access the checkboxes in child grid column related to this row only and need to set the checked attribute as true for that child grid.....

for that I am accessing the parent grid checkbox 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 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 parent grid the click event is not firing ...

would any one pls suggest any ideas and solutions with this problem that would be very grateful to me.....

many thanks in advance ...

EDIT : would you pls look at the image below that is where i placed the checkbox and clicking on that checkbox does not firing event ...

Answer 1

Try this,

 $('#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 grid click.

Answer 2

see following if it 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);
    }    
});        

i hope it helps.

Answer 3

This is how I imagine it should be coded - disclaimer I do not know Kendo at all

If we need to process the checkboxes as you 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 ajaxed in, you need

$(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 all the way down the dom, so perhaps you just want

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