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

Groupheader checkbox cannot deselect

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

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

http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/radgrid-checkbox-for-specific-group.aspx

i had implemented the code from

https://github.com/telerik/aspnet-sdk/tree/master/Grid/GroupingAndSelection

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.

Thanks.

<script type="text/javascript" language="javascript" >
    function Clicked(strKey) {
        alert(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,
               currentRow,
               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.numberOfItems++;
                    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.
                    currentNode.numberOfItems++;
                    //If the item is selected mark it as one.
                    if (currentRow.className.indexOf("rgSelectedRow") !== -1) {
                        currentNode.numberOfCheckedItems++;
                    }
                }
                //Add the node to the tree
                treePositionsCache[i] = currentNode;
            }
        }
    }
 
 
    function RowSelected(sender, args) {
        PerformSelect(treePositionsCache[$get(args.get_id()).rowIndex]);
    }
 
    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;
            PerformSelect(node.parent);
        }
    }
 
    //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) {
                    break;
                }
            } else if (isChecked) {
                masterTable.selectItem(rows[i]);
            } else {
                masterTable.deselectItem(rows[i]);
            }
        }
    }
 
   </script>


<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"
        CellSpacing="0">
 
                <PagerStyle Mode="NumericPages"></PagerStyle>
              
                <MasterTableView DataSourceID="ldsPayrollFlow" DataKeyNames="SID" GroupLoadMode="Client">
                    <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
                    <RowIndicatorColumn>
                        <HeaderStyle Width="10px"></HeaderStyle>
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn>
                        <HeaderStyle Width="10px"></HeaderStyle>
                    </ExpandCollapseColumn>
 
                    <GroupByExpressions>                                              
                    <telerik:GridGroupByExpression>
                        <SelectFields>
                            <telerik:GridGroupByField FieldAlias="DisplayName" FieldName="DisplayName" HeaderText="Staff Name"></telerik:GridGroupByField>
                        </SelectFields>
                        <GroupByFields>
                            <telerik:GridGroupByField FieldName="DisplayName" ></telerik:GridGroupByField>
                        </GroupByFields>                        
                        </telerik:GridGroupByExpression>
 
                    </GroupByExpressions>
                    <GroupHeaderTemplate>
                            <asp:CheckBox ToggleType="CheckBox" ID="GroupHeaderCheckBox" OnClick="GroupToggleSelection(this);" runat="server"></asp:CheckBox>
                    </GroupHeaderTemplate>
 
                    <Columns>
                            <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" Visible="TRUE" HeaderStyle-Width="10" Display="false">
                            </telerik:GridClientSelectColumn>
                        <telerik:GridBoundColumn DataField="SID" HeaderText="SID" ReadOnly="True"
                            SortExpression="SID" UniqueName="SID" Visible=false>
                        </telerik:GridBoundColumn>

1 Answer, 1 is accepted

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

just comment/undo the following sentences in

function

 

 

GroupToggleSelection(sender)

 

//sender.checked = !sender.checkbox;



Tags
Grid
Asked by
Joe
Top achievements
Rank 1
Answers by
Joe
Top achievements
Rank 1
Share this question
or