Changing the style of a checkbox when a parent node contains any checked children

2 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 17 Mar 2006 Link to this post


    Requirements

    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.
     
  2. sl
    sl avatar
    1 posts
    Member since:
    May 2007

    Posted 13 Jun 2007 Link to this post

    The CSS does not render correctly for Firefox; therefore, the red box does not show.
Back to Top