locked
How can I expand and collapse the child nodes when the parent node is selected using JavaScript’s /Jquery. RRS feed

  • Question

  • User-1202100973 posted

    How can I expand and collapse the child nodes when the parent node is selected using JavaScript’s /Jquery.

    <asp:TreeView ID="tv1" runat="server" ShowCheckBoxes="All">
        <Nodes>
            <asp:TreeNode Text="New Node1" Value="New Node1">
                <asp:TreeNode Text="New Node2" Value="New Node2">
                    <asp:TreeNode Text="New Node2.1" Value="New Node2.1"></asp:TreeNode>
                    <asp:TreeNode Text="New Node2.2" Value="New Node2.2"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="New Node8" Value="New Node2">
                    <asp:TreeNode Text="New Node8.1" Value="New Node2.1"></asp:TreeNode>
                    <asp:TreeNode Text="New Node8.2" Value="New Node2.2"></asp:TreeNode>
                </asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="New Node3" Value="New Node3">
                <asp:TreeNode Text="New Node4" Value="New Node4"></asp:TreeNode>
                <asp:TreeNode Text="New Node5" Value="New Node5"></asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="New Node6" Value="New Node6">
                <asp:TreeNode Text="New Node7" Value="New Node7"></asp:TreeNode>
                <asp:TreeNode Text="New Node8" Value="New Node8"></asp:TreeNode>
                <asp:TreeNode Text="New Node9" Value="New Node9"></asp:TreeNode>
            </asp:TreeNode>
        </Nodes>
    </asp:TreeView>

    Here in my example if we check the check box New Node1 then 2 child node's need to expand.

                    ->New Node2

                    ->New Node8

     If we  Unchecked the New Node1   the view needs to be collapsed.

    Any help is appreciated. Thank you for all the Help.

     

    Thursday, April 14, 2016 8:42 PM

Answers

  • User61956409 posted

    Hi Aditya_ven,

    Here is my scenario for check Box.

      I.E Google Chrome Type=CheckBox
     $("input[type='checkbox']").click(function () { working on first time click not working on first time click Type=CheckBox
     $("input[type='checkbox']").change(function () { not working on first time click working on first time click Type=CheckBox

    Can you please suggest the which works for both I.E and Chrome.

    I attach the change event to checkboxes and the code works fine in IE11.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 25, 2016 9:42 AM

All replies

  • User61956409 posted

    Hi Aditya_ven,

    Here in my example if we check the check box New Node1 then 2 child node's need to expand.

    According to your description, I create the following sample code for your reference.

    <asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" ShowExpandCollapse="true" ExpandDepth="0">
        <Nodes>
            <asp:TreeNode Text="New Node1" Value="New Node1">
                <asp:TreeNode Text="New Node2" Value="New Node2">
                    <asp:TreeNode Text="New Node2.1" Value="New Node2.1"></asp:TreeNode>
                    <asp:TreeNode Text="New Node2.2" Value="New Node2.2"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="New Node8" Value="New Node2">
                    <asp:TreeNode Text="New Node8.1" Value="New Node2.1"></asp:TreeNode>
                    <asp:TreeNode Text="New Node8.2" Value="New Node2.2"></asp:TreeNode>
                </asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="New Node3" Value="New Node3">
                <asp:TreeNode Text="New Node4" Value="New Node4"></asp:TreeNode>
                <asp:TreeNode Text="New Node5" Value="New Node5"></asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="New Node6" Value="New Node6">
                <asp:TreeNode Text="New Node7" Value="New Node7"></asp:TreeNode>
                <asp:TreeNode Text="New Node8" Value="New Node8"></asp:TreeNode>
                <asp:TreeNode Text="New Node9" Value="New Node9"></asp:TreeNode>
            </asp:TreeNode>
        </Nodes>
    </asp:TreeView>
    
    $(function () {
        $("[type='checkbox']").change(function () {
            var ischecked = $(this).is(":checked");
    
            if (ischecked) {
                $(this).parent().parent().parent().parent().next("div").css("display", "block");
    
                $(this).parent().parent().parent().parent().next("div").find("table>tbody>tr>td [type='checkbox']").attr("checked", "checked");
    
                $(this).parent().parent().parent().parent().next("div").find("table>tbody>tr>td [type='checkbox']").trigger("change");
            } else {
                $(this).parent().parent().parent().parent().next("div").css("display", "none");
                $(this).parent().parent().parent().parent().next("div").find("table>tbody>tr>td [type='checkbox']").removeAttr("checked");
    
                $(this).parent().parent().parent().parent().next("div").find("table>tbody>tr>td [type='checkbox']").trigger("change");
            }
        })
    })
    

    Best Regards,

    Fei Han



    Friday, April 15, 2016 6:57 AM
  • User-1202100973 posted

    Hi Fei Han,

    Thank you very much for your reply.

    Can I please request for a small favor at this point.

    So in  the tree view . Can we get the check box checked/Unchecked when the text  of the node is selected  .

    i.e   when New Node1 (Text ) is selected can we make the check box checked/Unchecked.

    Thank You for your Help Fei Han.

    Friday, April 15, 2016 11:29 PM
  • User-1202100973 posted

    Hi Fei Han,

    Sorry to mark this as not answer.

    Actually this code is working fine in Google Chrome.

    But in Internet explore. Its not working on the first click .

    Its working on the send click.

    Am I missing any thing.

    Can you please advise.

     

    Friday, April 22, 2016 10:15 PM
  • User-1202100973 posted

    Hi Fei Han,

    Here is my scenario for check Box.

      I.E Google Chrome Type=CheckBox
     $("input[type='checkbox']").click(function () { working on first time click not working on first time click Type=CheckBox
     $("input[type='checkbox']").change(function () { not working on first time click working on first time click Type=CheckBox

    Can you please suggest the which works for both I.E and Chrome.

    Friday, April 22, 2016 10:46 PM
  • User61956409 posted

    Hi Aditya_ven,

    Here is my scenario for check Box.

      I.E Google Chrome Type=CheckBox
     $("input[type='checkbox']").click(function () { working on first time click not working on first time click Type=CheckBox
     $("input[type='checkbox']").change(function () { not working on first time click working on first time click Type=CheckBox

    Can you please suggest the which works for both I.E and Chrome.

    I attach the change event to checkboxes and the code works fine in IE11.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 25, 2016 9:42 AM