Telerik TreeView checkbox

9 posts, 0 answers
  1. ramya
    ramya avatar
    3 posts
    Member since:
    Oct 2008

    Posted 07 Oct 2008 Link to this post

    Is it possible to make the checkbox disabled(Grayed out)?  I searched for that but i got solution as making checkable property as false. But i don't want that one.I want to make the checkbox grayed out.
     
     
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 08 Oct 2008 Link to this post

    Hello Ramya,

    Please use the following javascript code to disable checkboxes:

     var treeviewInstance = $find("<%= RadTreeView1.ClientID %>");   
     var i;   
     for (i=0; i<treeviewInstance.get_allNodes().length; i++)   
     {   
          var currentNode = treeviewInstance.get_allNodes()[i];    
          var checkBoxElement = currentNode.get_checkBoxElement();                           
          checkBoxElement.disabled = true;             
     }  

    Hope this helps.

    Best wishes,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ramya
    ramya avatar
    3 posts
    Member since:
    Oct 2008

    Posted 09 Oct 2008 Link to this post

    Ya it helps.Thanks a lot.
  5. Hugo Augusto
    Hugo Augusto avatar
    55 posts
    Member since:
    Jul 2004

    Posted 16 Sep 2010 Link to this post

    I believe that this should be the normal behavior. If CheckBoxes Property is set to True, then Checkable=false should not hide the node checkbox, but instead, it should disable it. Seems to me that hiding the checkbox makes the Tri-state behavior unusable because checking a parent node still checks child nodes with Checkable set to false, and that, is a headache if we want to prevent the user to delete the parent node if all the child nodes are not checked. Don't you agree with me?

    So, if I want to have tri-state behavior and the child nodes automatically selected if they don't have the attribute "ReadOnly" set to true, what is the best approach? All the checkboxes in nodes with the attribute "ReadOnly" set to true have been previously disabled in the "OnClientLoad" event with the following code:

    function findNodesByAttribute(tree, attribute, value)
                    {
                       var nodes = tree.get_allNodes();
                       var result = [];
      
                       for (var i = 0; i < nodes.length; i++)
                       {
                         var node = nodes[i];
                         if (node.get_attributes().getAttribute(attribute) == value)
                         {
                            Array.add(result, node);
                         }    
                       }    
                       return result;
                    }
      
                    function clientLoad()
                    {
                        var treeviewInstance = $find("<%= treeViewCanais.ClientID %>");    
      
                        var nodes = findNodesByAttribute(treeviewInstance, "ReadOnly", "true");
                  
                        for (var i = 0; i < nodes.length; i++)
                        {                        
                            var checkBoxElement = nodes[i].get_checkBoxElement();                            
                            checkBoxElement.disabled = true;
                        }                      
                     }
  6. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 22 Sep 2010 Link to this post

    Hi Hugo,

    Which version of the controls exactly you're using? When Checkable is set to false, the node stays unchecked.  Please explain in more details your scenario, what you mean with "the child nodes automatically selected"? Thanks in advance

    Best wishes,
    Yana
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Hugo Augusto
    Hugo Augusto avatar
    55 posts
    Member since:
    Jul 2004

    Posted 27 Sep 2010 Link to this post

    Hello Yana,

    I'll try to explain this better. I'm working with version  2010.2.713. The issue that I found not to behave normally in RadTreeView is:

     When CheckBoxes Property is set to True in a RadTreeView control, if we set Checkable to false on any child node,  the child node checkbox gets hidden instead of staying disabled:

    [X] Parent
        [X] Child 1
        [X] Child 2
             Child 3 (Checkable=false) Parent node has it's state set to Checked altough the 3rd node cannot be checked.

    This behavior of hiding the checkbox, causes the Tri-state behavior to work in an incorrect way because, if you try to check the parent node, all child nodes get checked along with the parent node ignoring the state of the child node with no checkbox. I believe that the correct behavior of RadTreeView should be to leave the a child node with Checkable=false visible but disabled, and when its parent node gets checked all child nodes should get checked also except the one with Checkable=false. This would also uncheck automatically the parent node. Without this behavior, we can't prevent the user to delete the parent node unless all child nodes are checked.

    [] Parent
        [X] Child 1
        [X] Child 2
        [  ] Child 3 (Checkable=false) Checkbox is visible but disabled. Selecting the parent node makes it to stay in Indeterminate state.

    I hope I made myself clear this time. If I'm right on this, I hope you can give me some points :)

  8. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 30 Sep 2010 Link to this post

    Hello Hugo,

    Thank you for the explanation.

    Actually the current behavior of the treeview is by design - when a node has set Checkable="false", its state is not included in Tri-State CheckBoxes. I understand that this behavior is not suitable in your scenario, so I suggest not to use Checkable property. I've attached a simple page to demonstrate how to modify your code with "ReadOnly" attribute in order to achieve the needed approach. Please download the file and give it a try. Let us know how it goes.

    Sincerely yours,
    Yana
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Kai
    Kai avatar
    30 posts
    Member since:
    Aug 2010

    Posted 19 Sep 2012 Link to this post

    Hi Yana,
    thanks for the example!
    I did not find a way to set the attribute when retrieving data from an SQL datasource so I've made a databinding which works quite well. Not sure whether anyone else might need it, so I just share here.
    The returned datatable needs at least 4 columns:
    1. ValueID (containing a unique INT)
    2. ParentValueID (containing NULL (for root nodes) or a valid ValueID (for child nodes))
    3. Text (the text to be displayed)
    4. Selectable (boolean to indicate whether the node should be selectable or not)

    I've used the same variable names as in above example from Yana so it should be easy to implement. Just call BindDataSource and supply the SQL Table.

    Private Sub BindDataSource(ByVal dt As DataTable)
     Dim row As DataRow
     Dim rows() As DataRow
     Dim node As Telerik.Web.UI.RadTreeNode
     rows = dt.Select("ParentValueID IS NULL")
     For Each row In rows
      node = New Telerik.Web.UI.RadTreeNode(row.Item("Text").ToString, row.Item("ValueID").ToString)
      If Not CBool(row.Item("Selectable")) Then node.Attributes.Add("ReadOnly", "true")
      AddSubItems(dt, node)
      treeView1.Nodes.Add(node)
     Next
    End Sub
     
     Private Sub AddSubItems(ByVal dt As DataTable, ByRef mainNode As Telerik.Web.UI.RadTreeNode)
     Dim row As DataRow
     Dim rows() As DataRow
     Dim subNode As Telerik.Web.UI.RadTreeNode
     rows = dt.Select("ParentValueID = " & mainNode.Value)
     For Each row In rows
      subNode = New Telerik.Web.UI.RadTreeNode(row.Item("Text").ToString, row.Item("ValueID").ToString)
      If Not CBool(row.Item("Selectable")) Then subNode.Attributes.Add("ReadOnly", "true")
      AddSubItems(dt, subNode)
      mainNode.Nodes.Add(subNode)
     Next
    End Sub
  10. Plamen
    Admin
    Plamen avatar
    2733 posts

    Posted 21 Sep 2012 Link to this post

    Hi Kai,

     
    Thank you for sharing your solution with Telerik community.

    Kind regards,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017