如何从父网格和子网格中获取复选框元素的引用

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>

1 个解决方案

#1

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

在我的代码中,我的标题中的复选框不在td中,但这有助于您找到相应的子网格复选框,

<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#'.

在子网格中,在每个子复选框中传递唯一键。 INX是我们的唯一键.Pass Unique-key就像这样id ='checkboxChild _#= inx#'。

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

这是演示链接http://jsbin.com/ivoqup/3/edit