Treeview node drag/drop problem with node image

3 posts, 0 answers
  1. Sulman
    Sulman avatar
    9 posts
    Member since:
    Sep 2011

    Posted 13 Mar 2012 Link to this post

    Hi,
    I am working on treeview drag and drop node. In my tree structure i am displaying a gear image at each node with mouse move event. Problem is when we drag a node then a small portion of the image also display while dragging node (image 1) that does not look good.

    In image 2 i have show my node structure where i am having span with 80% width that is causing problem during drag and drop. If i change my span with to 100% then small portion of image does not display during drag and drop but gear icon drop down at mouse move as shown in image 3.

       <div style="width:100%; min-height:22px; overflow:hidden">

                                    <span style="float:left;font-family:Arial;font-weight:bold;font-size:13px; width: 80%">
                                    <%# DataBinder.Eval(Container, "Text") %>
                                    </span> 
                           
                                <img class="treeGear" src="../img/gearsgreybtn.png" alt="Options" width="38px" height="22px" />
      </div>


    Could any one please help?  Any help will be appriciated.
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 13 Mar 2012 Link to this post

    Hello Sulman,

    Why don't you just float the image to the right of the text, instead of floating the text itself. So something like this:

    <div style="width:100%; min-height:22px; overflow:hidden">
        <img class="treeGear" src="../img/gearsgreybtn.png" alt="Options" width="38px" height="22px"
                               style="float:right;" />
        <span style="font-family:Arial;font-weight:bold;font-size:13px;">
            <%# DataBinder.Eval(Container, "Text") %>
        </span>  
    </div>

    I don't know if that would make much of a difference, but maybe it will.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sulman
    Sulman avatar
    9 posts
    Member since:
    Sep 2011

    Posted 13 Mar 2012 Link to this post

    Kavin, thanks for reply,

    Yes by floating the image to right making a bit difference. It is showing full image rather then partial as shown in orgchart4.jpg. If text contain only few chars then gear menu is displaying bit blew but for larg text gear meny is displaying right end of text.

    Is it possible either image completely remove while node draging only or gear menu appear at right end for small and large text?
Back to Top