| r.a.d.treeview version |
5.1.3.0
RadTreeView AJAX (Prometheus)
Telerik.Web.UI 2007.3.1425
|
| programming language |
C#
|
| .NET version |
1.1 / 2.0
|
| Visual Studio version |
2002/2003/2005
|
| browser support |
IE
|
This project shows you how to change the checkbox style when one or more child-nodes of a parent-node have been checked. We used a client-side approach to accomplish this task:
| <script type="text/javascript"> |
| function pageLoad() |
| { |
| var treeviewInstance = $find("<%= RadTreeView1.ClientID %>"); |
| var i; |
| for (i=0; i<treeviewInstance.get_allNodes().length; i++) |
| { |
| var currentNode = treeviewInstance.get_allNodes()[i]; |
| if (HasCheckedNodes(currentNode)) |
| { |
| var checkBoxElement = currentNode.get_checkBoxElement(); |
| checkBoxElement.className = "RedCheckBox"; |
| } |
| } |
| } |
| |
| function HasCheckedNodes(node) |
| { |
| var atLeastOneChecked = false; |
| var atLeastOneUnChecked = false; |
| |
| for (var i=0; i<node.get_nodes().get_count(); i++) |
| { |
| if (node.get_nodes().getNode(i).get_checked()) |
| { |
| atLeastOneChecked = true; |
| } |
| else |
| { |
| atLeastOneUnChecked = true; |
| } |
| } |
| |
| if (atLeastOneChecked && atLeastOneUnChecked) |
| { |
| return true; |
| } |
| else |
| { |
| return false; |
| } |
| } |
| |
| function afterCheck(sender, eventArgs) |
| { |
| var node = eventArgs.get_node(); |
| if (node.get_parent() != node.get_treeView()) |
| { |
| var checkBoxElement = node.get_parent().get_checkBoxElement(); |
| if (HasCheckedNodes(node.get_parent())) |
| { |
| checkBoxElement.className = "RedCheckBox"; |
| } |
| else |
| { |
| checkBoxElement.className = "WhiteCheckBox"; |
| } |
| } |
| } |
| </script> |
| <telerik:RadTreeView ID="RadTreeView1" |
| CheckBoxes="true" |
| Height="300px" |
| OnClientNodeChecked="afterCheck" |
| runat="server"> |
| </telerik:RadTreeView> |
| <script language=javascript> |
| function ChangeCheckBoxState() |
| { |
| var treeviewInstance = <%=RadTree1.ClientID%>; |
| var i; |
| for (i=0; i<treeviewInstance.AllNodes.length; i++) |
| { |
| var currentNode = treeviewInstance.AllNodes[i]; |
| if (HasCheckedNodes(currentNode)) |
| { |
| var checkBoxElement = currentNode.CheckElement(); |
| checkBoxElement.className = "RedCheckBox"; |
| } |
| } |
| } |
| |
| function HasCheckedNodes(node) |
| { |
| var atLeastOneChecked = false; |
| var atLeastOneUnChecked = false; |
| |
| for (var i=0; i<node.Nodes.length; i++) |
| { |
| if (node.Nodes[i].Checked) |
| { |
| atLeastOneChecked = true; |
| } |
| else |
| { |
| atLeastOneUnChecked = true; |
| } |
| } |
| |
| if (atLeastOneChecked && atLeastOneUnChecked) |
| { |
| return true; |
| } |
| else |
| { |
| return false; |
| } |
| } |
| |
| function AfterCheck(node) |
| { |
| if (node.Parent != null) |
| { |
| var checkBoxElement = node.Parent.CheckElement(); |
| if (HasCheckedNodes(node.Parent)) |
| { |
| checkBoxElement.className = "RedCheckBox"; |
| } |
| else |
| { |
| checkBoxElement.className = "WhiteCheckBox"; |
| } |
| } |
| } |
| |
| document.body.onload = function() { ChangeCheckBoxState() }; |
| |
| </script> |
| <radT:RadTreeview ID="RadTree1" runat="server" CheckBoxes="True" Height="300px" |
| AutoPostBackOnCheck="False" AfterClientCheck="AfterCheck" |
| ImagesBaseDir="~/Outlook" ContentFile="~/tree.xml" /> |
Note: The TriStateCheckBoxes property is available since 2008.2.723.35. See a demo here.