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: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,
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");
}
}
});
})
