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

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.

 

Answer 1

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

Answer 2

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.

Answer 3

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.

 

Answer 4

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.

Answer 5

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