Help in checkbox in treeview

3 posts, 0 answers
  1. Stephen
    Stephen avatar
    4 posts
    Member since:
    Jun 2012

    Posted 12 Jul 2012 Link to this post

    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. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 12 Jul 2012 Link to this post

    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.
Back to Top