Welcome Guest Search | Active Topics | Sign In | Register

Data binding in a context menu Options
Yoann
Posted: Friday, June 5, 2009 6:09:20 AM
Rank: Newbie
Groups: Member

Joined: 6/5/2009
Posts: 7


Hello all,

I am quite new to this set of objects and I am quite lost .... I have a TreeView wich is generated via code behind using a Hierarchical datasource. I want to add to each of the node of this tree view a context menu with the items :

(Un)Release
Add Element
Add Child Element
Delete

It works fine for simple display. But I would be interested to get some asp.net controls within the <eo:MenuItem > so that I could databind them . This is where my problem arises. I have tried different things until now, but it seems strange to me that the Container.DataItem tha tyou can see below is null. Am I missing some important point?

Thanks in advance,

Yoann

Code: HTML/ASPX
<eo:TreeView ID="C_EOTV_Category" runat="server" OnItemClick="Modify" RaisesServerEvent="true" 
                    ClientSideOnContextMenu="ShowContextMenu"
                    >
                        <topgroup>
                    <Bindings>
                        <eo:DataBinding Property="Text-Html" DataField="Name" />
                        <eo:DataBinding Property="Value" DataField="ID" />                        
                    </Bindings> 
                  </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>
                    <eo:ContextMenu ID="C_EOCM_Category" Width="144px" runat="server" ControlSkinID="None" OnCustomItemCreated=Test>
                        <TopGroup Style-CssText="cursor:hand;font-family:Verdana;font-size:11px;">
                            <Items>
                                <eo:MenuItem  >
                                    <CustomItem>
                                         <asp:LinkButton runat=server  >(Un)Release '<%# Container.DataItem %>'</asp:LinkButton>
                                    </CustomItem>
                                </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>
eo_support
Posted: Friday, June 5, 2009 8:46:23 AM
Rank: Administration
Groups: Administration

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

That is normal. Container.DataItem is only valid when you are data binding the control. In your case, because you are data binding the TreeView, not the ContextMenu, so TreeView has Container.DataItem but the ContextMenu does not.

In order for you to create data driven ContextMenu, you need to:

1. Populate the data into the TreeView first. You are populating the TreeView, not ContextMenu. So whatever data you want to have, you must store it into the TreeView first. Usually you would store such data into each TreeNode's Value property. I see that you already store ID into TreeNode.Value. So if you wish to store additional data into Value, you will want to concatenate them together. For example, if you wish to store both ID and "ItemName" into Value, you will need to do something like this:

Code: SQL
SELECT ID + '|' + ItemName AS ItemData .....

Then instead of mapping ID to TreeNode.Value, you would map ItemData to TreeNode.Value;

2. Handle the TreeNode's ClientSideOnContextMenu and displays the context menu. Before you display the context menu, you would call the TreeView's client side interface to get the Value property, extract whatever data you stored there, and then call the context menu's client side interface to update the menu. You can find an example on how to do this at here:

http://demo.essentialobjects.com/Default.aspx?path=TreeView\_i1\_i9

3. Displays the updated context menu;

You may also want to go over this topic if you are not familiar with our client side JavaScript API yet:

http://doc.essentialobjects.com/library/1/clientapi_howto.aspx

Hope this helps.

Thanks!
Yoann
Posted: Friday, June 5, 2009 9:03:07 AM
Rank: Newbie
Groups: Member

Joined: 6/5/2009
Posts: 7
Many thanks for your quick reply.

One thing I do not understant clearly is this: I have a treeview with items in it. Each item owns an id and a name. On every item, it is possible to get a contextmenu. But is this context menu generated on client side?

What I would like to do , is to retrieve when databinding occurs on my context menu on server side, a reference to the item my context menu is illustrating. Is it possible or is only on the client that this action is performed?

yours truly,

Yoann
eo_support
Posted: Friday, June 5, 2009 9:43:29 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
What you have confused is: It is not that each TreeNode get a context menu. You will never have a separate context menu for each TreeNode. The whole TreeView shares a single context menu control.

So you must reuse the same context menu for all the TreeNodes. And that requires you to modify the context menu with JavaScript. That's the only way to do it.

Thanks
Yoann
Posted: Friday, June 5, 2009 9:47:53 AM
Rank: Newbie
Groups: Member

Joined: 6/5/2009
Posts: 7
Ok perfect! Everything becomes clear now! And I know what to do! :)

10/10 for the support!


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.