Check Check all checkbox of the current details table in a RadGrid after checking the header checkbox

2 posts, 0 answers
  1. Shubham
    Shubham avatar
    32 posts
    Member since:
    May 2013

    Posted 27 Dec 2013 Link to this post

     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>
  2. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 02 Jan 2014 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top