Question

我在父网格中有复选框行，子网格中的复选框行也在Hierarchy grid mode using kendo UI中。架构是这样的......

我在父网格中有四行，其中一列是复选框，对于每一个父行，我有一个子网格，其中有4行，还有一个复选框列...

如果我单击父网格行中的复选框，我需要访问与此行相关的子网格列中的复选框，并且需要将该子网格的checked属性设置为true .....

为此我正在访问父网格复选框，就像这样..

这是javascript函数

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

这是层次结构网格代码....

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

但是当我点击父网格中的复选框时，点击事件没有触发......

任何人都会建议任何有这个问题的想法和解决方案，非常感谢我......

非常感谢提前......

编辑：你会看看下面的图片，我放置了复选框，点击该复选框不会触发事件......

enter image description here

Answer 1

试试这个，

 $('#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);
        }

        });

使用网格点击。

Answer 2

这就是我想象的应该编码 - 免责声明我根本不知道剑道

如果我们需要在您写入时处理复选框，我们可以

$(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
    });    
  });    
});

如果内容是ajaxed，则需要

$(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
    });    
  });    
});

注意 .find一直沿着dom工作，所以也许你只是想要

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

Answer 3

如果有帮助，请参阅以下内容：

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

我希望它有所帮助。

复选框事件未使用jquery触发

3 个答案: