Telerik TreeView checkbox

[ramya]

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.
 
 

[Yana]

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.

[ramya]

Ya it helps.Thanks a lot.

[Hugo Augusto]

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;
                    }
                 }

[Yana]

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

[Hugo Augusto]

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 :)

[Yana]

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

[Kai]

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

[Plamen]

Hi Kai,

 
Thank you for sharing your solution with Telerik community.

Kind regards,
Plamen
the Telerik team