This is a migrated thread and some comments may be shown as answers.

Telerik TreeView checkbox

8 Answers 208 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
ramya
Top achievements
Rank 1
ramya asked on 08 Oct 2008, 03:25 AM
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.
 
 

8 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 08 Oct 2008, 12:56 PM
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.
0
ramya
Top achievements
Rank 1
answered on 09 Oct 2008, 05:14 AM
Ya it helps.Thanks a lot.
0
Hugo Augusto
Top achievements
Rank 2
Veteran
Iron
answered on 16 Sep 2010, 11:31 AM
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;
                    }                      
                 }
0
Yana
Telerik team
answered on 22 Sep 2010, 03:50 PM
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
0
Hugo Augusto
Top achievements
Rank 2
Veteran
Iron
answered on 27 Sep 2010, 10:25 AM
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 :)

0
Yana
Telerik team
answered on 30 Sep 2010, 01:02 PM
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
0
Kai
Top achievements
Rank 2
answered on 19 Sep 2012, 08:11 AM
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
0
Plamen
Telerik team
answered on 21 Sep 2012, 10:45 AM
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.
Tags
TreeView
Asked by
ramya
Top achievements
Rank 1
Answers by
Yana
Telerik team
ramya
Top achievements
Rank 1
Hugo Augusto
Top achievements
Rank 2
Veteran
Iron
Kai
Top achievements
Rank 2
Plamen
Telerik team
Share this question
or