locked
Move Checkbox on ASPNET Treeview RRS feed

  • Question

  • User-1334885740 posted

    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!

    Wednesday, March 22, 2017 12:43 AM

All replies

  • User-707554951 posted

    Hi owtsgmi,

    Would you please show me some code about how you display your treeview?

    Best regards

    Cathy

    Wednesday, March 22, 2017 9:23 AM
  • User-1334885740 posted

    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!

    Wednesday, March 22, 2017 4:48 PM
  • User-707554951 posted

    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

    Thursday, March 23, 2017 3:29 AM
  • User-1334885740 posted

    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>

    Thursday, March 23, 2017 6:24 PM
  • User-707554951 posted

    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

    Friday, March 24, 2017 9:47 AM
  • User-1334885740 posted

    Yes, I know that code has problems... thanks for bearing with me and explaining. Laughing  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.

    Treeview

    http://imgur.com/a/m3c2z  (here is link to the image)

    Thanks!

    Friday, March 24, 2017 6:22 PM