Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Displaying the context menu using CustomItem in a treeview

Displaying the context menu using CustomItem in a treeview Options
Previous Topic · Next Topic
Yoann
Posted: Monday, June 8, 2009 8:11:22 AM
Rank: Newbie
Groups: Member

Joined: 6/5/2009
Posts: 7
Hello,

I am still investigating the behaviour of your treeview and I am in front of a new challenge.

I was using binding tags in your tree view and this was displaying the contect menu without any problem. But thenm, I had to customize a bit things and therefore had to use the custom item tag.

It works fine in the tree view databinding occurs , etc... but I can't have access to my context menu anymore . Is there any instruction that I am missing?




please have a look on my code :


for the tree view :
Code: HTML/ASPX 
<eo:TreeView ID="C_EOTV_Category" runat="server" RaisesServerEvent="true" 
                    DataSource=<%# CatalogItems.ToHierarchicalEnumerable(cat => cat.ID, cat => cat.ParentId) %>
                    ClientSideOnContextMenu="ShowContextMenu" 
                    EnableViewState=true
                    >
                        <topgroup>
                        <Nodes>
                            <eo:TreeNode Text="test"></eo:TreeNode>
                        </Nodes>
                    <TemplateItem>
                        <CustomItem>                            
                            <img src="/Images/Dynamic/<%# ((CatalogItemProvider)Container.DataItem).Released %>.gif" />
                            <asp:LinkButton runat=server ID=C_Lbtn_Item CommandArgument="<%# ((CatalogItemProvider)Container.DataItem).ID %>" OnClick=Modify>
                            <%# ((CatalogItemProvider)Container.DataItem).Name %>
                            </asp:LinkButton>
                        </CustomItem>
                        <SubGroup>
                            <TemplateItem>
                                <CustomItem>
                                    <img src="/Images/Dynamic/<%# ((CatalogItemProvider)Container.DataItem).Released %>.gif" />
                                    <asp:LinkButton runat="server" ID="C_Lbtn_Item" CommandArgument="<%# ((CatalogItemProvider)Container.DataItem).ID %>"
                                        OnClick="Modify">
                                <%# ((CatalogItemProvider)Container.DataItem).Name %>
                                    </asp:LinkButton>
                                </CustomItem>
                            </TemplateItem>
                        </SubGroup>
                    </TemplateItem>
                  </topgroup>
                        <looknodes>
		                <eo:TreeNode ItemID="_Default" 
		                 HoverStyle-CssText="background-color:#cccccc;cursor:hand"
		                 SelectedStyle-CssText="background-color:#cccccc"
		                 ImageUrl="/dynamiq/images/system/folderClosed.gif"
		                 CollapsedImageUrl="/dynamiq/images/system/folderClosed.gif"
		                 ExpandedImageUrl="/dynamiq/images/system/folderOpen.gif" />
	                </looknodes>
                    </eo:TreeView>



and just after the context view associated with it:
Code: HTML/ASPX 
<eo:ContextMenu ID="C_EOCM_Category" Width="144px" runat="server" ControlSkinID="None"  >
                        <TopGroup Style-CssText="cursor:hand;font-family:Verdana;font-size:11px;">
                            <Items>
                                <eo:MenuItem Text-Html="(un)Release"  >
                                </eo:MenuItem>
                                <eo:MenuItem  Text-Html="Add Element">
                                </eo:MenuItem>
                                <eo:MenuItem Text-Html="Add Child Element">
                                </eo:MenuItem>
                                <eo:MenuItem Text-Html="Delete">
                                </eo:MenuItem>
                            </Items>
                        </TopGroup>
                        <LookItems>
                            <eo:MenuItem IsSeparator="True" ItemID="_Separator" NormalStyle-CssText="background-color:#E0E0E0;height:1px;width:1px;">
                            </eo:MenuItem>
                            <eo:MenuItem HoverStyle-CssText="color:#F7B00A;padding-left:5px;padding-right:5px;"
                                ItemID="_Default" NormalStyle-CssText="padding-left:5px;padding-right:5px;"
                                >
                                <SubMenu 
                                    ExpandEffect-Type="GlideTopToBottom" 
                                    Style-CssText="border-right: #e0e0e0 1px solid; padding-right: 3px; border-top: #e0e0e0 1px solid; padding-left: 3px; font-size: 12px; padding-bottom: 3px; border-left: #e0e0e0 1px solid; cursor: hand; color: #606060; padding-top: 3px; border-bottom: #e0e0e0 1px solid; font-family: arial; background-color: #f7f8f9"
                                    CollapseEffect-Type="GlideTopToBottom" OffsetX="3" ShadowDepth="0" OffsetY="-4"
                                    ItemSpacing="5">
                                </SubMenu>
                            </eo:MenuItem>
                        </LookItems>
                    </eo:ContextMenu>



Many thanks for helping me sorting this out,


Yoann


PS: By the way i am trying jsut now to use the drag and drop thing to reorder my tree view and I experiment the same kind of trouble..

I have added these to the decalration of my tree view:

Code: HTML/ASPX 
AutoSelectSource="ItemClick" AllowDragDrop="True" AllowDragReordering="True"
                    OnItemMoved=ReOrderItem
Back to top
 
eo_support
Posted: Monday, June 8, 2009 9:34:09 AM
Rank: Administration
Groups: Administration

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

For the context menu issue, you will need to handle the TreeView's CustomItemCreated event and then set the CustomItem's CancelBubble to false. It will be something like this:

Code: C# 
private void TreeView1_CustomItemCreated(
    object sender, EO.Web.NavigationItemEventArgs e)
{
    e.CustomItem.CancelBubble = false;
}


I do not think you can use drag drop and CustomItem together. That is not currently supported. We are working on this issue and see if we can add support for that. A workaround for this issue is to supply raw HTML to TreeNode.Text. In order to do this, you will need to handle the TreeView's ItemDataBound event. This event is called for each node. So you can do something like this in your handler:

Code: C# 
private void TreeView1_ItemDataBound(
    object sender, EO.Web.NavigationItemEventArgs e)
{
    //Get the data item object
    object dataItem = e.NavigationItem.DataItem;

    //Cast it to your type
    CatalogItemProvider itemProvider = (CatalogItemProvider)dataItem;

    //Create raw HTML based on your data. Note the first characther
    //in the string format should be &lt;, not &lt;. It has been 
    //incorrectly encoded by the syntax highlighting code
    string html = string.Format("&lt;img src='Images/Dynamic/{0}.gif' /&gt;", itemProvider.Release);

    //Set TreeNode text
    e.TreeNode.Text = html;
}


Note you can include any raw HTML in your TreeNode.Text. I do notice that you have a server side LinkButton in your TreeNode. That will cause problem with drag and drop as well because both events starts from mouse down. So generally they are not used together.

If you want to raises server event when user clicks a TreeNode, the easiest way is to set the TreeView's RaisesServerEvent to true.

Hope this helps.

Thanks!
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.