This is a migrated thread and some comments may be shown as answers.

Groupheader checkbox cannot deselect

1 Answer 31 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Joe asked on 25 Sep 2013, 09:34 AM

as refer to another post for adding a checkbox in groupheader,

i had implemented the code from

it works fine that it can select all child checkbox when click groupheader checkbox.
but i found that the groupheader checkbox cannot deselect after click. i had gone through the code many time but cannot solve it.


<script type="text/javascript" language="javascript" >
    function Clicked(strKey) {
    var tree = {
        isRoot: true
           treePositionsCache = {};
    // The idea is to build a tree in which every node has a relation to it's parent group item
    function GridCreated(sender, args) {
        var rows = sender.get_masterTableView().get_element().rows,
               currentNode = tree,
               shouldGoUpOneLevel = false,
               groupLevel = 1;
        //Builds the tree
        for (var i = 0; i < rows.length; i++) {
            currentRow = rows[i];
            if (currentRow.parentNode.tagName.toLowerCase() === "tbody") {
                //The row is a group header row
                if (currentRow.className.indexOf("rgGroupHeader") !== -1) {
                    //Finds the parent node of the current node
                    if (shouldGoUpOneLevel) {
                        for (var j = 0; j < groupLevel - $telerik.getElementsByClassName(currentRow, "rgGroupCol").length + 1; j++) {
                            currentNode = currentNode.parent;
                    //Determines the group level
                    groupLevel = $telerik.getElementsByClassName(currentRow, "rgGroupCol").length;
                    currentNode = currentNode[i] = {
                        //Sets the parent reference
                        parent: currentNode,
                        //Sets the checkbox reference
                        checkbox: $telerik.findElement(currentRow, "ClientSelectColumnSelectCheckBox") ||
                               $telerik.findElement(currentRow, "GroupHeaderCheckBox"),
                        numberOfItems: 0,
                        numberOfCheckedItems: 0
                } else {
                    // The row is a GridDataItem
                    shouldGoUpOneLevel = true;
                    // Increase the number of item that the parent has.
                    //If the item is selected mark it as one.
                    if (currentRow.className.indexOf("rgSelectedRow") !== -1) {
                //Add the node to the tree
                treePositionsCache[i] = currentNode;
    function RowSelected(sender, args) {
    function RowDeselected(sender, args) {
        PerformDeselect(treePositionsCache[$get(args.get_id()).rowIndex], true);
    //Recursively traverse the tree and deselect the check boxes
    function PerformDeselect(node, firstCall) {
        if (--node.numberOfCheckedItems !== node.numberOfItems && !node.isRoot && node.checkbox.checked) {
            node.checkbox.checked = false;
            PerformDeselect(node.parent, false);
    //Recursively traverse the tree and select the check boxes
    function PerformSelect(node) {
        if (++node.numberOfCheckedItems === node.numberOfItems) {
            node.checkbox.checked = true;
    //Called when a group header check box is checked or unchecked
    function GroupToggleSelection(sender) {
        //Finds the row
        var row = Telerik.Web.UI.Grid.GetFirstParentByTagName(sender, "tr"),
        //Obtains the row index
               rowIndex = row.rowIndex,
        //Determines the group level
               level = $telerik.getElementsByClassName(row, "rgGroupCol").length,
               masterTable = $find('<%=RadGrid1.ClientID%>').get_masterTableView(),
               rows = masterTable.get_element().rows,
               isChecked = sender.checked;
        sender.checked = !sender.checkbox;
        //Traverses the rows from the current header down and selects or deselects the GridDataItems
        for (var i = rowIndex + 1; i < rows.length; i++) {
            //If we encounter a grop header with the same group level we stop the selection/deselection
            if (rows[i].className.indexOf("rgGroupHeader") !== -1) {
                if ($telerik.getElementsByClassName(rows[i], "rgGroupCol").length === level) {
            } else if (isChecked) {
            } else {

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="ldsPayrollFlow" AllowMultiRowSelection="True"
                GridLines="None" Width="960px" AllowSorting="True"
        AutoGenerateColumns="False" AllowFilteringByColumn="True"
                AllowPaging="True" PageSize="15" EnableAJAX="true"
        EnableAJAXLoadingTemplate="true" LoadingTemplateTransparency="25"
                <PagerStyle Mode="NumericPages"></PagerStyle>
                <MasterTableView DataSourceID="ldsPayrollFlow" DataKeyNames="SID" GroupLoadMode="Client">
                    <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
                        <HeaderStyle Width="10px"></HeaderStyle>
                        <HeaderStyle Width="10px"></HeaderStyle>
                            <telerik:GridGroupByField FieldAlias="DisplayName" FieldName="DisplayName" HeaderText="Staff Name"></telerik:GridGroupByField>
                            <telerik:GridGroupByField FieldName="DisplayName" ></telerik:GridGroupByField>
                            <asp:CheckBox ToggleType="CheckBox" ID="GroupHeaderCheckBox" OnClick="GroupToggleSelection(this);" runat="server"></asp:CheckBox>
                            <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" Visible="TRUE" HeaderStyle-Width="10" Display="false">
                        <telerik:GridBoundColumn DataField="SID" HeaderText="SID" ReadOnly="True"
                            SortExpression="SID" UniqueName="SID" Visible=false>

1 Answer, 1 is accepted

Sort by
Top achievements
Rank 1
answered on 26 Sep 2013, 06:40 AM
finally, i solve the problem.

just comment/undo the following sentences in






//sender.checked = !sender.checkbox;

Asked by
Top achievements
Rank 1
Answers by
Top achievements
Rank 1
Share this question