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>