Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Menu - Custom look for each Menu control?

Menu - Custom look for each Menu control? Options
Previous Topic · Next Topic
Posted: Friday, August 10, 2007 8:09:16 AM
Rank: Member
Groups: Member

Joined: 8/8/2007
Posts: 23
I hope I can describe this clearly:

How can I dynamically set a different look (i.e. css) for each menu item, if pulled from a datasource.
I think it might help to show you some of my code (obviously I can change, add, delete whatever I need here).

Here is the XML file (ModTransformXSLTFile.xml) I'm pulling from: I put an ItemID here thinking I could assign a different style based on that ItemID, which you'll notice from my next example.
Code: XML 

<MenuItems>
	<MenuItem title="myExecution" description="" url="" ItemID="_Custom" Image_Url="Images/Menu/my_execution.gif" Image_Mode="ImageOnly" Norm_CSS="padding-left: 16px; text-align: left;" />
	<MenuItem title="Restaurant Data" description="Daily Sales" ItemID="_Normal" url="~/mydata_dailysales.aspx" />
	<MenuItem title="Accounting" description="Accounting Home" ItemID="_Normal" url="~/myacct_home.aspx" />
	<MenuItem title="Store Contacts" description="Contacts Home" ItemID="_Normal" url="~/mycontacts_home.aspx" />
	<MenuItem title="myPeople" description="" ItemID="_Custom" url="" Image_Url="Images/Menu/my_people.gif" Image_Mode="ImageOnly" Norm_CSS="padding-left: 0px; text-align: left;" />
	<MenuItem title="HR Home" description="HR Home" ItemID="_Normal" url="~/myhr_home.aspx" />
	<MenuItem title="My Forums" description="My Forums Home" ItemID="_Normal" url="~/myforum_home.aspx" />
	<MenuItem title="The Rock" description="The Rock Home" ItemID="_Normal" url="~/therock_home.aspx" />
	<MenuItem title="All American" description="All American Home" ItemID="_Normal" url="~/allamerican_home.aspx" />
</MenuItems>


Here is my .aspx page with the menu:
Code: HTML/ASPX 
<eo:Menu ID="Menu2" runat="server" DataSourceID="XmlDataSource2" Width="184">
    <TopGroup Style-CssClass="topGroup" Style-CssText="padding: 10px 0px 0px 0px; padding-left: 2px"
        Orientation="Vertical">
        <Bindings>
            <eo:DataBinding Property="ItemID" DataField="@ItemID"></eo:DataBinding>
            <eo:DataBinding Property="NormalStyle_CssText" DataField="@Norm_CSS"></eo:DataBinding>
            <eo:DataBinding Property="Image-Url" DataField="@Image_Url"></eo:DataBinding>
            <eo:DataBinding Property="Image-Mode" DataField="@Image_Mode"></eo:DataBinding>
        </Bindings>
    </TopGroup>
    <LookItems>
        <eo:MenuItem ItemID="_TopGroup">
            <SubMenu Style-CssClass="subMenu">
            </SubMenu>
        </eo:MenuItem>
        <eo:MenuItem Height="18" HoverStyle-CssText="color:black;" ItemID="_Normal" NormalStyle-CssText="color:white;"
            Image-Url="Images/Menu/item_bg.gif" Image-Mode="TextBackground" Image-BackgroundRepeat="None">
        </eo:MenuItem>
    </LookItems>
</eo:Menu>
<asp:XmlDataSource ID="XmlDataSource2" runat="server" XPath="MenuItems/MenuItem"
    DataFile="~/ModTransformXSLTFile.xml"></asp:XmlDataSource>



As You'll notice in this link, you guys were able to hard code this menu, and it looks great. However, what I need is this done dynamically. I've gotten close but there are still some issues, mainly with my lack of understanding of this product.

From the .aspx page above, if I take this part out, I'm able to see my menu, but without the images with the lines. I've poured over the help documentation looking for how to solve this. I thought it had to do with the ItemID property. My thought is, I can assign the below code a particular itemID which I would set in the xml. I'm finding this is not the case.

Code: HTML/ASPX 
<eo:MenuItem Height="18" HoverStyle-CssText="color:black;" ItemID="_Normal" NormalStyle-CssText="color:white;"
    Image-Url="Images/Menu/item_bg.gif" Image-Mode="TextBackground" Image-BackgroundRepeat="None">
</eo:MenuItem>


Your help would be much appreciated, as this is the only real thing holding us back from purchasing the product.

Thank you in advance!
Back to top
 
eo_support
Posted: Friday, August 10, 2007 8:27:32 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,093
Hi Wade,

You seem to have some confusion over LookID and ItemID. You can find a much detailed explaination about "looks" at here:

http://www.essentialobjects.com/ViewDoc.aspx?t=MenuCommon%2fLookSkinAndTheme%2flooks.html

I'll try to give you a brief summary here:
1. There are two type of items, regular menu item and look items. Look items are held in Menu.LookItems collection. Regular items are what you see from Menu.Items collection;
2. At runtime, a regular item A would automatically searchs for a "look item" B and copy appearance settings from B. The look item it uses is a look item whose ItemID matches the A's LookID;
3. There are special "LookID" values. If you see an item's LookID is "Auto", then it will pick up one of the built-in look items, "_TopGroup", "_Default", etc. The doc link I gave you above explained all the built-in look items in detail;

Also, you don't want to set the first item as an image only item. In our hardcoded version, we use HTML text with an img tag instead of image only item. The reason is there is no way for you to "shift" the image out of it's ordinary position with an image only item. Where as in your case, the first item is actually a few pixels lower than it's normal position so that it can overlap to the second item.

Thanks





Back to top
 
Posted: Friday, August 10, 2007 9:48:11 AM
Rank: Member
Groups: Member

Joined: 8/8/2007
Posts: 23
Your awesome, that fixed it. Thanks for the quick response yet again!
Back to top
 
Posted: Friday, August 10, 2007 9:59:40 AM
Rank: Member
Groups: Member

Joined: 8/8/2007
Posts: 23
I do have another question though, there's always another question. :)

I've done as you say and assigned my lookItem.ItemID to equal the value that's pulled from the DB. It works great. the only thing now is, I can't seem to make my background image pad-left. Infact it seems that Image-Padding-Left, doesn't do anything no matter what value I assign it.

Code: HTML/ASPX 
<eo:MenuItem Height="18" Text-Padding-Left="18" ItemID="Normal" HoverStyle-CssText="color:black;" NormalStyle-CssText="color:white;"
    Image-Url="Images/Menu/item_bg.gif" Image-Mode="TextBackground" Image-BackgroundRepeat="none" Image-Padding-Left="20" Image-Width="100" >
</eo:MenuItem>


I can send you an image of what I'm talking about if you'd like.
But basically my question is, am I doing something wrong that the Image-Padding-Left isn't doing anything?
Back to top
 
Posted: Friday, August 10, 2007 11:42:27 AM
Rank: Member
Groups: Member

Joined: 8/8/2007
Posts: 23
Nevermind, I got it. I had some padding values incorrectly set.
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.