Welcome Guest Search | Active Topics | Sign In | Register

menu horizontal Options
n88n
Posted: Monday, June 2, 2008 6:42:37 AM
Rank: Newbie
Groups: Member

Joined: 6/2/2008
Posts: 3
Hello,

I just downloaded the menu component and I think the graphical portion is great, but I am having a little trouble with it.

I set the orientation to "horizontal" but everything comes up under the "Home" option. Below is the code for the the object.


Quote:
<eo:Menu ID="Menu2" runat="server" ControlSkinID="None" Width="200px" DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="2">
<LookItems>
<eo:MenuItem Image-HoverUrl="00000306" Image-Mode="TextBackground"
Image-Url="00000300" ItemID="_TopLevelItem" LeftIcon-HoverUrl="00000304"
LeftIcon-Url="00000300" RightIcon-HoverUrl="00000305" RightIcon-Url="00000300">
<SubMenu OffsetX="0" OffsetY="-6" ShadowDepth="0"
Style-CssText="font-size: 12px; cursor: hand; font-family: arial; background-color: #f7f7f7;">
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Height="23"
HoverStyle-CssText="background-color:#dddddd;border-left-color:#dfdfdf;border-left-style:solid;border-left-width:1px;border-right-color:#dfdfdf;border-right-style:solid;border-right-width:1px;color:#C00000;"
ItemID="_Default"
NormalStyle-CssText="border-right: #dfdfdf 1px solid; border-left: #dfdfdf 1px solid; color: #333333"
Text-Padding-Left="7" Text-Padding-Right="20">
</eo:MenuItem>
<eo:MenuItem Image-Mode="TextBackground" Image-Url="00000314"
ItemID="separator" LeftIcon-Url="00000313" RightIcon-Url="00000315">
</eo:MenuItem>
<eo:MenuItem Image-Mode="TextBackground" Image-Url="00000312"
ItemID="submenu_bottom" LeftIcon-Url="00000310" RightIcon-Url="00000311">
</eo:MenuItem>
<eo:MenuItem Image-Mode="TextBackground" Image-Url="00000307"
ItemID="submenu_top" LeftIcon-Url="00000308" RightIcon-Url="00000309">
</eo:MenuItem>
</LookItems>
<TopGroup ItemSpacing="1"

Style-CssText="border-left-width: 1px; font-size: 12px; border-left-color: #e0e0e0; background-image: url(00000300); padding-bottom: 0px; cursor: hand; color: #555555; padding-top: 0px; font-family: arial"
Orientation="Horizontal">
</TopGroup>
</eo:Menu>




using the standard asp.net menu I was able to use the same sitemap file and the "DynamicHorizontalOffset="2"" command to achieve a horizontal menu.

Here is my sitemap info.

Quote:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="Home.aspx" title="Home" description="This is our site.">
<siteMapNode url="Map.aspx" title="Map" description="This is our site."/>
<siteMapNode url="~/Maint/Maint1.aspx" title="Maintanence" description="asdfd">
<siteMapNode url="~/Maint/Maint2.aspx" title="Maintanence2" description=""/>
<siteMapNode url="~/Maint/Maint3.aspx" title="Maintanence3" description=""/>
<siteMapNode url="~/Maint/Maint4.aspx" title="Maintanence4" description=""/>
</siteMapNode>
<siteMapNode url="~/Reports/Report1.aspx" title="Reports" description="">
<siteMapNode url="~/Reports/Report2.aspx" title="Report2" description=""/>
<siteMapNode url="~/Reports/Report3.aspx" title="Report3" description=""/>
<siteMapNode url="~/Reports/Report4.aspx" title="Report4" description=""/>
</siteMapNode>
</siteMapNode>
</siteMap>




any help would be greatly appreciated.



eo_support
Posted: Monday, June 2, 2008 8:18:06 AM
Rank: Administration
Groups: Administration

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

The equivalent of DynamicHorizontalOffset on our menu is this property:

http://www.essentialobjects.com/ViewDoc.aspx?t=EO.Web.MenuGroup.OffsetX.html

Note it is defined on MenuGroup object instead of Menu object. This allows you to fine tune the position of each Menu Group (a sub menu popup, which ASP.NET calls dynamic menu) independently.

The notion of Orientation is similar. While the Orientation exists on the Menu object, it only controls top level. So when Orientation is set to Vertical on the menu, the top level is vertical, when it is set to Horizontal on the menu, the top level is horizontal. All sub menus are still vertical in this case.

In order to set Orientation on the sub menu, use Orientation on the BaseMenuItemGroup (this is the base class for MenuGroup) object:

http://www.essentialobjects.com/ViewDoc.aspx?t=EO.Web.BaseMenuItemGroup.Orientation.html

We support this property on the Menu Group level so that each menu group's orientation can be set interpedently. For example, the first sub menu can be horizontal; the second can be vertical, etc.

When you populate the menu from a datasource, the sub menus do not exist at design time. So you can't set those properties at design time. You would need to set them at runtime instead. The easiest way is to handle ItemDataBound event. This event is called for each menu item after it is created from data source. Inside this event you can do:

Code: C#
protected void Menu1_ItemDataBound(
    object sender, EO.Web.NavigationItemEventArgs e)
{
    e.MenuItem.SubMenu.Orientation = EO.Web.Orientation.Horizontal;
}


This way it sets all sub menus’ Orientation to Horizontal. You can also apply complex business logic here, for example, you can do:

Code: C#
if (e.MenuItem.Level > 1)
    e.MenuItem.SubMenu.Orientation = EO.Web.Orientation.Horizontal;


This way you are only setting items that are level 2 and above to horizontal.

You can set OffsetX the same way.

Hope this helps. Please feel free to let us know if you have any more questions.

Thanks
n88n
Posted: Monday, June 2, 2008 11:32:36 AM
Rank: Newbie
Groups: Member

Joined: 6/2/2008
Posts: 3
thanks for responding to my question.

I am still having the same problem. I would like to have 4 options across the top as constant main choices. In the above sitemap file I am using for testing there are 4 top level options... "Home", "Map", "Maintenance" and "Reports". Right now I have 1 main option as "Home" and three choices under that with a third level of menu.

I would like the four main menu options and just one second level of options.

Sorry if I am over explaining but I thought I would clarify.

So I used the "OffsetX" option and changed the number to a 2 but nothing happened. My code now the following.

Quote:
<eo:Menu ID="Menu2" runat="server" ControlSkinID="None" Width="200px" DataSourceID="XmlDataSource1">
<LookItems>
<eo:MenuItem Image-HoverUrl="00000306" Image-Mode="TextBackground"
Image-Url="00000300" ItemID="_TopLevelItem" LeftIcon-HoverUrl="00000304"
LeftIcon-Url="00000300" RightIcon-HoverUrl="00000305" RightIcon-Url="00000300">
<SubMenu OffsetX="0" OffsetY="-6" ShadowDepth="0"
Style-CssText="font-size: 12px; cursor: hand; font-family: arial; background-color: #f7f7f7;">
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Height="23"
HoverStyle-CssText="background-color:#dddddd;border-left-color:#dfdfdf;border-left-style:solid;border-left-width:1px;border-right-color:#dfdfdf;border-right-style:solid;border-right-width:1px;color:#C00000;"
ItemID="_Default"
NormalStyle-CssText="border-right: #dfdfdf 1px solid; border-left: #dfdfdf 1px solid; color: #333333"
Text-Padding-Left="7" Text-Padding-Right="20">
</eo:MenuItem>
<eo:MenuItem Image-Mode="TextBackground" Image-Url="00000314"
ItemID="separator" LeftIcon-Url="00000313" RightIcon-Url="00000315">
</eo:MenuItem>
<eo:MenuItem Image-Mode="TextBackground" Image-Url="00000312"
ItemID="submenu_bottom" LeftIcon-Url="00000310" RightIcon-Url="00000311">
</eo:MenuItem>
<eo:MenuItem Image-Mode="TextBackground" Image-Url="00000307"
ItemID="submenu_top" LeftIcon-Url="00000308" RightIcon-Url="00000309">
</eo:MenuItem>
</LookItems>
<TopGroup ItemSpacing="1" OffsetX ="2"

Style-CssText="border-left-width: 1px; font-size: 12px; border-left-color: #e0e0e0; background-image: url(00000300); padding-bottom: 0px; cursor: hand; color: #555555; padding-top: 0px; font-family: arial"
Orientation="Horizontal">
</TopGroup>
</eo:Menu>



You mentioned that the offsetx had to be in the group section so I added it in the TopGroup tag as shown above.

Can you suggest a solution to this?

thanks again for your help.




eo_support
Posted: Monday, June 2, 2008 11:46:22 AM
Rank: Administration
Groups: Administration

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

For the first question, you will need to set your SiteMapDataSource's ShowStartingNode to "False".

As for the second question, you might still be confusing the concept of MenuGroup. Each menu has many "MenuGroups". In your case, you have these menu groups (assuming you have already set ShowStartingNode to false):

Group 1: Map, Maintaince, Report
Group 2: Maintaince 2, Maintaince 3, Maintaince 4
Group 3: Report 2, Report 3, Report 4

Setting OffsetX on Group 2 moves Group 2, setting OffsetX on Group 3 moves Group 3. Setting at one place only affect one group only. That's why you have to set it with code.

TopGroup is a very special menu group. In your case, Group 1 is your TopGroup. TopGroup can not be moved (it's position is determined by where you place the Menu in your form). So setting OffsetX on TopGroup has no effect.

Hope this clears up.

Thanks
n88n
Posted: Monday, June 2, 2008 1:17:06 PM
Rank: Newbie
Groups: Member

Joined: 6/2/2008
Posts: 3
you will need to set your SiteMapDataSource's ShowStartingNode to "False".

that did it.


thanks!


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.