Would you please show me some code about how you display your treeview?
Best regards
Cathy
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Thanks, Cathy, very helpful. I am fairly new to JQuery and have been trying to make this generic so each image in the treeview would automatically be deleted and then moved after the checkbox. I have come up with what I think should work, but it doesn't.
Any chance you could tweak this for me to get it to work? Thank you, thank you!
<script type="text/javascript">
if (typeof jQuery !== 'undefined') {
$(document).ready(function () {
$("input[type='image']").each(function () {
var val = $(this); //a copy of the image?
var checkbox = val.next().get(0); //the checkbox is the next element
val.insertAfter(checkbox);
$(this).remove(); //the original image?
});
});
}
</script>
<script type="text/javascript">
if (typeof jQuery !== 'undefined') {
$(document).ready(function () {
//1. input[type='image'] selector couldn't get node image, because there isn't a input element with type attribute equal to image.
//For this point, you coudl use F12 devalop tools to check this。
$("input[type='image']").each(function () {
//2.Yes, we could get a copy of the image
var val = $(this); //a copy of the image?
//3.However, in html document, checkbox isn't the next element of Image.they are located in different td element.
//So, you could get it use the following code, you also coudl check this use F12 tools.
var checkbox = val.next().get(0); //the checkbox is the next element
val.insertAfter(checkbox);
$(this).remove(); //the original image?
});
});
}
</script>
Besides, I think that the code in my previous reply is a simple way, it works as well, why you don't want to use it?
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Yes, I know that code has problems... thanks for bearing with me and explaining.
The problem with the earlier code is that it only works with one type of image. I have images of different
names and need to evaluate the image at the node level. This is what I got with your earlier routine that assumes all images are named book.png.
None
0 Points
4 Posts
Move Checkbox on ASPNET Treeview
Mar 22, 2017 12:43 AM|owtsgmi|LINK
Can I move the checkbox to the left of the imageURL of a node? Currently, it only shows up on the right (and before the node text).
I am trying to emulate behavior that was possible using the old Microsoft IE WebControls treeview.
Thanks!
Star
8640 Points
2882 Posts
Re: Move Checkbox on ASPNET Treeview
Mar 22, 2017 09:23 AM|Cathy Zou|LINK
Hi owtsgmi,
Would you please show me some code about how you display your treeview?
Best regards
Cathy
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
None
0 Points
4 Posts
Re: Move Checkbox on ASPNET Treeview
Mar 22, 2017 04:48 PM|owtsgmi|LINK
I modified a sample and it looks like this so far:
<asp:TreeView ID="TreeView2" runat="server" ShowCheckBoxes="All"
LineImagesFolder="~/images/lines" ShowLines="True"
ExpandDepth="1"
ParentNodeStyle-ImageUrl="~/images/book.png"
RootNodeStyle-ImageUrl="~/images/book.png"
LeafNodeStyle-ImageUrl="~/images/page.png"
SelectAction="Select"
OnSelectedNodeChanged="Tree_SelectNodeChange"
OnTreeNodeExpanded="Tree_TreeNodeExpanded"
OnTreeNodeCollapsed="Tree_TreeNodeCollapsed">
<NodeStyle Font-Names="Arial" Font-Size="12pt" ForeColor="Black" HorizontalPadding="1"/>
<RootNodeStyle Font-Size="12pt"/>
<HoverNodeStyle Font-UnderLine="True" />
<Nodes>
<asp:TreeNode Text="Favorites">
<asp:TreeNode Text="News">
<asp:TreeNode Text="MSN" NavigateUrl="http://www.msn.com"/>
<asp:TreeNode Text="MSNBC News" NavigateUrl="http://www.msnbc.msn.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Technology">
<asp:TreeNode Text="Microsoft" NavigateUrl="http://www.microsoft.com"/>
<asp:TreeNode Text="ASP.NET" NavigateUrl="http://www.asp.net"/>
<asp:TreeNode Text="GotDotNet" NavigateUrl="http://www.gotdotnet.com"/>
<asp:TreeNode Text="MSDN" NavigateUrl="http://msdn.microsoft.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Shopping">
<asp:TreeNode Text="MSN Shopping" NavigateUrl="http://shopping.msn.com"/>
<asp:TreeNode Text="MSN Autos" NavigateUrl="http://autos.msn.com"/>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="City Links">
<asp:TreeNode Text="MapPoint" NavigateUrl="http://www.mappoint.com"/>
<asp:TreeNode Text="MSN City Guides" NavigateUrl="http://local.msn.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Music Links">
<asp:TreeNode Text="MSN Music" NavigateUrl="http://music.msn.com"/>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
Thanks!
Star
8640 Points
2882 Posts
Re: Move Checkbox on ASPNET Treeview
Mar 23, 2017 03:29 AM|Cathy Zou|LINK
Hi AABTexas,
For your problem, I suggest you could use Juery.
Firstly, you need to remove image,
Then you could use insertAfter() method to insert image before checkbox.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("img[src*='book']").remove(); $("input[type='checkbox']").each(function () { $("<img alt='' src='../Images/book.png'>").insertAfter($(this)); }); }) </script> </head> <body> <form id="form1" runat="server"> <div> <asp:TreeView ID="TreeView2" runat="server" ShowCheckBoxes="All" ShowLines="True" ExpandDepth="1" ParentNodeStyle-ImageUrl="~/Images/book.png" RootNodeStyle-ImageUrl="~/Images/book.png" LeafNodeStyle-ImageUrl="~/Images/book.png" SelectAction="Select" > <NodeStyle Font-Names="Arial" Font-Size="12pt" ForeColor="Black" HorizontalPadding="1"/> <RootNodeStyle Font-Size="12pt"/> <HoverNodeStyle Font-UnderLine="True" /> <Nodes> <asp:TreeNode Text="Favorites"> <asp:TreeNode Text="News"> <asp:TreeNode Text="MSN" NavigateUrl="http://www.msn.com"/> <asp:TreeNode Text="MSNBC News" NavigateUrl="http://www.msnbc.msn.com"/> </asp:TreeNode> <asp:TreeNode Text="Technology"> <asp:TreeNode Text="Microsoft" NavigateUrl="http://www.microsoft.com"/> <asp:TreeNode Text="ASP.NET" NavigateUrl="http://www.asp.net"/> <asp:TreeNode Text="GotDotNet" NavigateUrl="http://www.gotdotnet.com"/> <asp:TreeNode Text="MSDN" NavigateUrl="http://msdn.microsoft.com"/> </asp:TreeNode> <asp:TreeNode Text="Shopping"> <asp:TreeNode Text="MSN Shopping" NavigateUrl="http://shopping.msn.com"/> <asp:TreeNode Text="MSN Autos" NavigateUrl="http://autos.msn.com"/> </asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="City Links"> <asp:TreeNode Text="MapPoint" NavigateUrl="http://www.mappoint.com"/> <asp:TreeNode Text="MSN City Guides" NavigateUrl="http://local.msn.com"/> </asp:TreeNode> <asp:TreeNode Text="Music Links"> <asp:TreeNode Text="MSN Music" NavigateUrl="http://music.msn.com"/> </asp:TreeNode> </Nodes> </asp:TreeView>Output screenshot as below:
Best regards
Cathy
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
None
0 Points
4 Posts
Re: Move Checkbox on ASPNET Treeview
Mar 23, 2017 06:24 PM|owtsgmi|LINK
Thanks, Cathy, very helpful. I am fairly new to JQuery and have been trying to make this generic so each image in the treeview would automatically be deleted and then moved after the checkbox. I have come up with what I think should work, but it doesn't. Any chance you could tweak this for me to get it to work? Thank you, thank you!
<script type="text/javascript">
if (typeof jQuery !== 'undefined') {
$(document).ready(function () {
$("input[type='image']").each(function () {
var val = $(this); //a copy of the image?
var checkbox = val.next().get(0); //the checkbox is the next element
val.insertAfter(checkbox);
$(this).remove(); //the original image?
});
});
}
</script>
Star
8640 Points
2882 Posts
Re: Move Checkbox on ASPNET Treeview
Mar 24, 2017 09:47 AM|Cathy Zou|LINK
Hi owtsgmi,
Your code seems have big problem,
<script type="text/javascript"> if (typeof jQuery !== 'undefined') { $(document).ready(function () { //1. input[type='image'] selector couldn't get node image, because there isn't a input element with type attribute equal to image. //For this point, you coudl use F12 devalop tools to check this。 $("input[type='image']").each(function () { //2.Yes, we could get a copy of the image var val = $(this); //a copy of the image? //3.However, in html document, checkbox isn't the next element of Image.they are located in different td element. //So, you could get it use the following code, you also coudl check this use F12 tools. var checkbox = val.next().get(0); //the checkbox is the next element val.insertAfter(checkbox); $(this).remove(); //the original image? }); }); } </script>Besides, I think that the code in my previous reply is a simple way, it works as well, why you don't want to use it?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { //First, remove image $("img[src*='book']").remove(); $("input[type='checkbox']").each(function () { //insert some image element. $("<img alt='' src='../Images/book.png'>").insertAfter($(this)); }); }) </script>Best regards
Cathy
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
None
0 Points
4 Posts
Re: Move Checkbox on ASPNET Treeview
Mar 24, 2017 06:22 PM|owtsgmi|LINK
Yes, I know that code has problems... thanks for bearing with me and explaining.
The problem with the earlier code is that it only works with one type of image. I have images of different
names and need to evaluate the image at the node level. This is what I got with your earlier routine that assumes all images are named book.png.
http://imgur.com/a/m3c2z (here is link to the image)
Thanks!