This is a migrated thread and some comments may be shown as answers.
Check Check all checkbox of the current details table in a RadGrid after checking the header checkbox
1 Answer 73 Views
This is a migrated thread and some comments may be shown as answers.
Shubham
Top achievements
Rank 1
Shubham asked on 27 Dec 2013, 08:35 AM
 Hey I have two details tables in my rad Grid . Now what I have to do is to check/uncheck all the checkboxes of the current detail table only. on checking/unchecking the header checkbox. and also want to check the header checkbox of current detail table only. when I have  checked each checkbox of the same detail table



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadGridHierarchyCheckbox.aspx.cs" Inherits="RadGridHierarchyCheckbox" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
           function SetHeaderCheckBox(checkbox)
  {
  //Select or deselect header check box
  }
   function SelectAllCheckBox(checkbox)
  {
  //Select or deselect Detail Table CheckBOXes
  }
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" CellSpacing="0" AutoGenerateColumns="False"
            GridLines="None" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource" OnDetailTableDataBind="RadGrid1_DetailTableDataBind">
           
            <MasterTableView DataKeyNames="OrderID" HierarchyDefaultExpanded="true" CommandItemDisplay="Top">
             
                <DetailTables>
                    <telerik:GridTableView DataKeyNames="OrderID" PageSize="3" Name="DetailViewTest">
                        <Columns>
                            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
                            </telerik:GridBoundColumn>
                            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                                SortExpression="OrderDate" UniqueName="OrderDate">
                            </telerik:GridDateTimeColumn>
                            <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                                FilterControlAltText="Filter Freight column" HeaderText="Freight"
                                SortExpression="Freight" UniqueName="Freight">
                            </telerik:GridNumericColumn>
                            <telerik:GridBoundColumn DataField="ShipName"
                                FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                                SortExpression="ShipName" UniqueName="ShipName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="ShipCountry"
                                FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                                SortExpression="ShipCountry" UniqueName="ShipCountry">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </telerik:GridTableView>
 <DetailTables>
                    <telerik:GridTableView DataKeyNames="OrderID" PageSize="3" Name="DetailViewTest">
                        <Columns>
<telerik:GridTemplateColumn UniqueName="SelectItemCheckBoxColumn" Resizable="false" Reorderable="false">
                                                                <ItemTemplate>
                                                                    <asp:CheckBox ID="SelectItemCheckBox" runat="server" onclick="return SetHeaderCheckBox(this);" />
                                                                 
                                                                </ItemTemplate>
                                                                <HeaderTemplate>
                                                                    <asp:CheckBox ID="SelectHeaderCheckBox" runat="server" onclick="return SelectAllCheckBox(this);" />
                                                                  
                                                                </HeaderTemplate>
                                                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
                            </telerik:GridBoundColumn>
                            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                                SortExpression="OrderDate" UniqueName="OrderDate">
                            </telerik:GridDateTimeColumn>
                            <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                                FilterControlAltText="Filter Freight column" HeaderText="Freight"
                                SortExpression="Freight" UniqueName="Freight">
                            </telerik:GridNumericColumn>
                            <telerik:GridBoundColumn DataField="ShipName"
                                FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                                SortExpression="ShipName" UniqueName="ShipName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="ShipCountry"
                                FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                                SortExpression="ShipCountry" UniqueName="ShipCountry">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </telerik:GridTableView>
                </DetailTables>
                </DetailTables>
                <Columns>
                    <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                        FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                        ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
                    </telerik:GridBoundColumn>
                    <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                        FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                        SortExpression="OrderDate" UniqueName="OrderDate">
                    </telerik:GridDateTimeColumn>
                    <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                        FilterControlAltText="Filter Freight column" HeaderText="Freight"
                        SortExpression="Freight" UniqueName="Freight">
                    </telerik:GridNumericColumn>
                    <telerik:GridBoundColumn DataField="ShipName"
                        FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                        SortExpression="ShipName" UniqueName="ShipName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ShipCountry"
                        FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                        SortExpression="ShipCountry" UniqueName="ShipCountry">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </form>
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 02 Jan 2014, 12:32 PM
Hi Shubham,

Please examine the following code snippet which demonstrates how to achieve the requested behavior.
function SetHeaderCheckBox(checkbox, parentIndex) {
    var masterTable = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
    var nestedView = masterTable.get_dataItems()[parentIndex].get_nestedViews()[0];
    for (var i = 0; i < nestedView.get_dataItems().length; i++) {
        if(!nestedView.get_dataItems()[i].findElement("SelectItemCheckBox").checked)
        {
            nestedView.HeaderRow.getElementsByTagName('input')[0].checked = false;
            return;
        }
    }
    nestedView.HeaderRow.getElementsByTagName('input')[0].checked = true;
}
function SelectAllCheckBox(checkbox, parentIndex) {
    var masterTable = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
    var nestedView = masterTable.get_dataItems()[parentIndex].get_nestedViews()[0];
    for (var i = 0; i < nestedView.get_dataItems().length; i++) {
        nestedView.get_dataItems()[i].findElement("SelectItemCheckBox").checked = checkbox.checked;
    }
}

Basically you are looping each time through all items and check whether all of them are checked. If they are you will check the header CheckBox also. Otherwise the header CheckBox control will remain unchecked. Additionally I attached a small sample to this forum thread for your reference.

Regards,
Kostadin
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Ajax
Asked by
Shubham
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
Share this question
or