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

Help in checkbox in treeview

2 Answers 32 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 12 Jul 2012, 12:32 PM
I have a rad treeview and a checkbox in my web page. I want to allow the node to expand only if the checkbox is checked

2 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 12 Jul 2012, 12:51 PM
Hi Stephen,

Try the following Javascript to achieve your scenario.

JS:
<script type="text/javascript">
 function OnClientNodeExpanding(sender, args)
 {
  var check = document.getElementById("CheckBox1");
  if (!check.checked)
  {
   args.set_cancel(true);
  }
 }
</script>

Hope this helps.

Thanks,
Princy.
0
Ivana
Telerik team
answered on 12 Jul 2012, 01:01 PM
Hi Stephen,

You can take advantage of the client API of the control in order to achieve the described behavior.
Here is an example which shows one possible approach:
function clientNodeChecking(sender, args) {
    var node = args.get_node();
    if (node.get_checked() === true)
        node.expand();
    else
        node.collapse();
}
<telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="True" Height="280px"
    TriStateCheckBoxes="true" CheckChildNodes="true" OnClientNodeChecked="clientNodeChecking">
    <Nodes>
        <telerik:RadTreeNode Text="Software" >
            <Nodes>
                <telerik:RadTreeNode Text="Business &amp; Office" />
                <telerik:RadTreeNode Text="Database" />
            </Nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode Text="Books">
            <Nodes>
                <telerik:RadTreeNode Text="Arts" />
                <telerik:RadTreeNode Text="Biographies" />
            </Nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode Text="Music">
            <Nodes>
                <telerik:RadTreeNode Text="Alternative" />
                <telerik:RadTreeNode Text="Blues" />
            </Nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode Text="Movies">
            <Nodes>
                <telerik:RadTreeNode Text="Action" />
                <telerik:RadTreeNode Text="Animation" />
            </Nodes>
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

I hope this will help.

Greetings,
Ivana
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
Stephen
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Ivana
Telerik team
Share this question
or