Click here to Skip to main content
15,851,335 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello all, i am trying to implement a UI like,
a treeview, when i check or uncheck the node checkboxes the selected tree structure should get formed at right hand side.
i am implemented the code partially.. but it is unable to remove parent nodes
please help me
ASP.NET
<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All">
        <Nodes>
            <asp:TreeNode Text="Chapter1" Value="Chapter1">
                <asp:TreeNode Text="SubTopic1" Value="SubTopic1"></asp:TreeNode>
                <asp:TreeNode Text="SubTopic2" Value="SubTopic2"></asp:TreeNode>
                <asp:TreeNode Text="SubTopic3" Value="SubTopic3"></asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="Chapter2" Value="Chapter2">
                <asp:TreeNode Text="SubTopic4" Value="SubTopic4"></asp:TreeNode>
                <asp:TreeNode Text="SubTopic5" Value="SubTopic5"></asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="Chapter3" Value="Chapter3"></asp:TreeNode>
            <asp:TreeNode Text="Chapter4" Value="Chapter4"></asp:TreeNode>
            <asp:TreeNode Text="Chapter5" Value="Chapter5"></asp:TreeNode>
        </Nodes>
    
    </asp:TreeView>
    <br />
    <br />
    <asp:TreeView ID="TreeView2" runat="server" ShowCheckBoxes="All">
    </asp:TreeView>


and jquery is,
JavaScript
function ChangeSelection() {
            $("#<%=TreeView2.ClientID %>").children().remove().end().append($("#<%=TreeView1.ClientID %>").children().clone());
            var ids = $.map($("#<%=TreeView1.ClientID %> input[type=checkbox]:not(:checked)").closest("div"), function (item) { return item.id; });
            $(ids).each(function (index, item) {
                var childDiv = $("#<%=TreeView2.ClientID %>").find("div[id=" + item + "]");
                var childDivChecked = $("#<%=TreeView2.ClientID %>").find("div[id=" + item + "] input[type=checkbox]:checked").length;
                if (childDivChecked == 0) {
                    $(childDiv).remove();
                }
                $("input[type=checkbox]", $(childDiv)).each(function () {
                    $(this).parent().remove();
                });
            });
            $("#<%=TreeView2.ClientID %> input[type=checkbox]").attr("checked", true).closest("div").css('background', 'white');
        }
        $(function () {
            $("#<%=TreeView1.ClientID %> input[type=checkbox]").bind("click", function () {
                var table = $(this).closest("table");
                if (table.next().length > 0 && table.next()[0].tagName == "DIV") {
                    var childDiv = table.next();
                    var isChecked = $(this).is(":checked");
                    $("input[type=checkbox]", childDiv).each(function () {
                        if (isChecked) {
                            $(this).attr("checked", "checked");

                        } else {
                            $(this).removeAttr("checked");
                        }
                    });
                    ChangeSelection();
                }
                else {
                    var parentDIV = $(this).closest("DIV");
                    if ($("input[type=checkbox]", parentDIV).length == $("input[type=checkbox]:checked", parentDIV).length) {
                        $("input[type=checkbox]", parentDIV.prev()).attr("checked", "checked");
                    }
                    else {
                        $("input[type=checkbox]", parentDIV.prev()).removeAttr("checked");
                    }
                }
            });
        })
Posted

1 solution

Use This Code.


Just replace the code inside tag.

<pre lang="xml">&lt;script&gt;
function ChangeSelection(objThis) {

$(&quot;#&lt;%=TreeView2.ClientID %&gt;&quot;).children().remove().end()
.append(objThis.closest('table').clone())
.append(objThis.closest('table').siblings('div').clone());

objThis.closest('table').hide();
objThis.closest('table').siblings('div').hide();

var ids = $.map($(&quot;#&lt;%=TreeView1.ClientID %&gt; input[type=checkbox]:not(:checked)&quot;).closest(&quot;div&quot;), function (item) { return item.id; });
$(ids).each(function (index, item) {
var childDiv = $(&quot;#&lt;%=TreeView2.ClientID %&gt;&quot;).find(&quot;div[id=&quot; + item + &quot;]&quot;);
var childDivChecked = $(&quot;#&lt;%=TreeView2.ClientID %&gt;&quot;).find(&quot;div[id=&quot; + item + &quot;] input[type=checkbox]:checked&quot;).length;
if (childDivChecked == 0) {
$(childDiv).remove();
}
$(&quot;input[type=checkbox]&quot;, $(childDiv)).each(function () {
$(this).parent().remove();
});
});
$(&quot;#&lt;%=TreeView2.ClientID %&gt; input[type=checkbox]&quot;).attr(&quot;checked&quot;, true).closest(&quot;div&quot;).css('background', 'white');
}


$(function () {
$(&quot;#&lt;%=TreeView1.ClientID %&gt; input[type=checkbox]&quot;).bind(&quot;click&quot;, function () {
var table = $(this).closest(&quot;table&quot;);
if (table.next().length &gt; 0 &amp;&amp; table.next()[0].tagName == &quot;DIV&quot;) {
var childDiv = table.next();
var isChecked = $(this).is(&quot;:checked&quot;);
$(&quot;input[type=checkbox]&quot;, childDiv).each(function () {
if (isChecked) {
$(this).attr(&quot;checked&quot;, &quot;checked&quot;);

} else {
$(this).removeAttr(&quot;checked&quot;);
}
});
ChangeSelection($(this));
}
else {
var parentDIV = $(this).closest(&quot;DIV&quot;);
if ($(&quot;input[type=checkbox]&quot;, parentDIV).length == $(&quot;input[type=checkbox]:checked&quot;, parentDIV).length) {
$(&quot;input[type=checkbox]&quot;, parentDIV.prev()).attr(&quot;checked&quot;, &quot;checked&quot;);
}
else {
$(&quot;input[type=checkbox]&quot;, parentDIV.prev()).removeAttr(&quot;checked&quot;);
}
}
});
})
&lt;/script&gt;</pre>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900