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
>