This is a migrated thread and some comments may be shown as answers.

Treeview node drag/drop problem with node image

2 Answers 66 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Sulman
Top achievements
Rank 1
Sulman asked on 13 Mar 2012, 11:41 AM
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 Answers, 1 is accepted

Sort by
0
Kevin
Top achievements
Rank 2
answered on 13 Mar 2012, 01:11 PM
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.
0
Sulman
Top achievements
Rank 1
answered on 13 Mar 2012, 01:43 PM
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?
Tags
TreeView
Asked by
Sulman
Top achievements
Rank 1
Answers by
Kevin
Top achievements
Rank 2
Sulman
Top achievements
Rank 1
Share this question
or