Select the detail row checkbox checked only when master row checked

[Rangadurai]

Hi,
    I have problem in mastertableview and detailtableview.When we click on the mastertable row checkbox means i want the actual output should be check all the checkbox displaying in the detail table view for that particular master row.
I have used this javascript which i mentioned below but its not working properly.

 

 

function MarkCheckBox(cntrl, CmdtType) {

 

 

 

var rgBarcodeGen = document.getElementById('<%=rgBarcodeGen.ClientID %>');

 

 

 

var gvRow = rgBarcodeGen.getElementsByTagName('tr');

 

 

 

for (var i = 1; i < gvRow.length; i++) {

 

 

 

var gvCntrl = gvRow[i].getElementsByTagName('input');

 

 

 

for (var j = 0; j < gvCntrl.length; j++) {

 

 

 

if (gvCntrl[j].type == "checkbox") {

 

 

 

if (CmdtType == 'master') {

 

gvCntrl[j].checked = cntrl.checked;

 

 

break;

 

}

 

 

else if (CmdtType == 'detail') {

 

gvCntrl[i = j].checked = cntrl.checked;

 

 

break;

 

}

}

}

}

}

 

[Jayesh Goyani]

Hello,

Please try with below code snippet.

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
          OnDetailTableDataBind="RadGrid1_DetailTableDataBind">
          <MasterTableView HierarchyDefaultExpanded="true" Name="Parent">
              <Columns>
                  <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID">
                  </telerik:GridBoundColumn>
                  <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name">
                  </telerik:GridBoundColumn>
                  <telerik:GridTemplateColumn HeaderText="IsSelect">
                      <ItemTemplate>
                         <asp:CheckBox ID="CheckBox1" runat="server" onclick="checkParentCheckbox(this);" />
                      </ItemTemplate>
                  </telerik:GridTemplateColumn>
              </Columns>
              <DetailTables>
                  <telerik:GridTableView Width="100%" Name="Child">
                      <Columns>
                          <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID">
                          </telerik:GridBoundColumn>
                          <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name">
                          </telerik:GridBoundColumn>
                          <telerik:GridTemplateColumn HeaderText="IsSelect">
                              <ItemTemplate>
                                  <asp:CheckBox ID="CheckBox1" runat="server" onclick="checkParentCheckbox(this);" />
                              </ItemTemplate>
                          </telerik:GridTemplateColumn>
                      </Columns>
                  </telerik:GridTableView>
              </DetailTables>
          </MasterTableView>
      </telerik:RadGrid>

protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {


        dynamic data = new[] {
                new { ID = 1, Name ="name1"},
                new { ID = 2, Name = "Name2"},
                new { ID = 3, Name = "name3"},
                new { ID = 4, Name = "Name4"},
                new { ID = 5, Name = "name5"}
            };
        RadGrid1.DataSource = data;

    }

    protected void RadGrid1_DetailTableDataBind(object sender, GridDetailTableDataBindEventArgs e)
    {
        dynamic data = new[] {
                new { ID = 1, Name ="name11"},
                new { ID = 2, Name = "Name21"},
                new { ID = 3, Name = "name31"},
                new { ID = 4, Name = "Name41"},
                new { ID = 5, Name = "name51"}
            };
        e.DetailTableView.DataSource = data;
    }

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
   <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
       <script type="text/javascript">

           function checkParentCheckbox(obj) {

               var grid = $find("<%=RadGrid1.ClientID %>");
               if (grid) {
                   var MasterTable = grid.get_masterTableView();
                   var Rows = MasterTable.get_dataItems();
                   for (var i = 0; i < Rows.length; i++) {
                       var row = Rows[i];
                       var ParentCheckBox1 = $(row.get_element()).find("input[id*='CheckBox1']").get(0);

                       var childTable = row.get_nestedViews();
                       if (childTable) {
                           var childItems = childTable[0].get_dataItems();
                           for (var j = 0; j < childItems.length; j++) {
                               var childRow = childItems[j];
                               var CheckBox1 = $(childRow.get_element()).find("input[id*='CheckBox1']").get(0);
                               if (ParentCheckBox1.checked == false) {
                                   CheckBox1.checked = false;
                               }
                           }
                       }
                   }
               }
           }
       </script>
   </telerik:RadCodeBlock>

I have used Jquery so do not forget to add Jquery in Page.

Thanks,
Jayesh Goyani