Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Treeview with embedded CustomItem doesn't drag & drop

Treeview with embedded CustomItem doesn't drag & drop Options
Previous Topic · Next Topic
Salvador
Posted: Wednesday, June 15, 2011 10:40:47 AM
Rank: Newbie
Groups: Member

Joined: 1/27/2011
Posts: 4
This is my treeview:
<eo:TreeView ID="TreeView1" runat="server" AllowDragReordering="True" ControlSkinID="None"
Width="100%" Height="494px" OnItemMoved="TreeView1_ItemMoved" HideRoleDisabledItems="True"
AllowRoles="Production" DataSourceID="DataSourceTree" AutoSelectSource="ItemClick">
<LookNodes>
<eo:TreeNode DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:Gray;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;"
ItemID="_Default" NormalStyle-CssText="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: black; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none"
SelectedStyle-CssText="background-color:#316ac5;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:White;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;">
</eo:TreeNode>
</LookNodes>
<TopGroup Style-CssText="border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:black;cursor:hand;font-family:Tahoma;font-size:8pt;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;">
<TemplateItem>
<CustomItem>
<asp:Label ID="lblWeek" runat="server" Text='<%# Bind("Week") %>'></asp:Label>
</CustomItem>
<SubGroup>
<TemplateItem>
<CustomItem>
<asp:Label ID="lblWorkCenter" runat="server" Text="<%# Bind('WorkCenterDesc') %>">"></asp:Label>
</CustomItem>
<SubGroup>
<TemplateItem>
<CustomItem>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right">WO:</td>
<td>
<asp:Label ID="Label1" runat="server" Text="<%# Bind('WorkOrder') %>" Width="50px"></asp:Label></td>
<td align="right">
Bill:
</td>
<td>
<asp:Label ID="Label2" runat="server" Text="<%# Bind('Bill') %>" Width="70px"></asp:Label>
</td>
<td>
<asp:Label ID="Label3" runat="server" Text="<%# Bind('ItemBillDescription') %>" Width="180px"></asp:Label>
</td>
<td align="right">Qty:</td>
<td align="right">
<asp:Label ID="Label4" runat="server" Text="<%# Bind('Qty','{0:n0}') %>" Width="50px"></asp:Label>
</td>
</tr>
</table>
</CustomItem>
</TemplateItem>
</SubGroup>
</TemplateItem>
</SubGroup>
</TemplateItem>
</TopGroup>
</eo:TreeView>

I had to put some formatting to my third level in a table (to align some fields). Everything shows fantastic but I cannot drag and drop items.
Thank you in advance for your help.
Back to top
 
eo_support
Posted: Wednesday, June 15, 2011 2:22:49 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Please do the following:

1. Set the TreeView's AllowDragDrop to true. This is necessary to enable drag and drop in general. If you only wish to allow drap and drop reordering, you can handle the TreeView's ClientSideOnDragBegin, then check the argument to see if drag and drop is allowed in the current context. If it is not allowed, you would return false to cancel drag drop on that node. You may also need to handle ClientSideOnDragDrop;

2. Handle the TreeView's CustomItemCreated event. Inside the event handler you must set the newly created CustomItem object's CancelBubble to false:

Code: C# 
protected void TreeView1_CustomItemCreated(
    object sender, EO.Web.NavigationItemEventArgs e)
{
    //Allows the mouse event to bubble up to the TreeView
    e.CustomItem.CancelBubble = false;
}


This is needed to allow the mouse event to bubble up to the treeview. Otherwise the treeview will not see the mouse event thus will not start drag and drop;

3. Add the following CSS rules into your page:

Code: CSS 
.custom_item
{
    display: none;
}

.treeview table
{
    display: block;
}


4. Apply CSS class "treeview" to TreeView's top group:

Code: HTML/ASPX 
<eo:TreeView ....>
    ....
    <TopGroup Style-CssText="....." Style-CssClass="treeview">
    .....
    </TopGroup>
    ....
</eo:TreeView>


Note the new Style-CssClass added to TopGroup.

5. Apply CSS class "custom_item" to your table element in the custom item:

Code: HTML/ASPX 
<TemplateItem>
    <CustomItem>
        <table class="custom_item" .....>
        .....
        </table>
    </CustomItem>
</TemplateItem>


Step 1 and 2 are always necessary. Step 3, 4, 5 are needed due to a bug with custom item drag and drop. We will fix that bug in our next build so you won't need it in the future.

Hope this helps. Please let us know if it works for you.

Thanks!
Back to top
 
Salvador
Posted: Wednesday, June 15, 2011 3:01:50 PM
Rank: Newbie
Groups: Member

Joined: 1/27/2011
Posts: 4
It worked!... but is not firing the event ItemMoved... what should I do?
Back to top
 
eo_support
Posted: Wednesday, June 15, 2011 4:42:51 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

ItemMoved event is not fired immediately after you moved the node. It is fired after the page posts back. This is very similar to a TextBox's TextChanged event.

If you have moved multiple items before posting back the page, ItemMoved will be called multiple times.

Thanks
Back to top
 
Salvador
Posted: Wednesday, June 15, 2011 4:46:06 PM
Rank: Newbie
Groups: Member

Joined: 1/27/2011
Posts: 4
Thank you very much!! I'm very happy with your controls...
Back to top
 
eo_support
Posted: Wednesday, June 15, 2011 5:29:28 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Glad to hear that. Please feel free to let us know if you have any other questions.
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.