How do I use large images and different <ItemTemplate> in RadMenu?

[Randall]

Hello,

RadControls 2009.1.527.20

I have a RadMenu populated from an XML file:

Default.aspx:

<telerik:RadMenu
    ID="RadMenu_LeftNav"
    runat="server"
    CssClass="RadMenu_LeftNav"
    Flow="Vertical"
    Height="650px"
    Width="138px"
    />

Default.aspx.cs:

protected void Page_Load(object sender, EventArgs e)
{
    RadMenu_LeftNav.LoadContentFile("~/App_Data/Menus/RadMenu_LeftNav.xml");
}

<?xml version="1.0" encoding="utf-8"?>
<Menu>
  <Group>
    <Item Text="Contacts" ImageUrl="/Images/64x64/Contacts_01.png">
      <Group>
        <Item Text="Create Contact"          NavigateUrl="CreateContact.ascx" />
        <Item Text="Delete Contact"          NavigateUrl="DeleteContact.ascx" />
        <Item Text="Manage Contacts"        NavigateUrl="Manage Contacts" />
        <Item Text="Upgrade To Mailbox" NavigateUrl="UpgradeContact.ascx" />
      </Group>
    </Item>
...
...
  </Group>
</Menu>

The image in the ImageUrl attribute is 96x96 pixels.  The image display outside of the hover highlight.  See the attached screenshot.

I have a few questions:

• Does the RadMenu support images of various sizes?  If so, how do I implement that?

 

• Is it possible to have one <ItemTemplate> definition for the root menu item and a different <ItemTemplate> for the child menu items?  If so, how do I implement that, and is it possible to do this when loading the RadMenu from an XML file?

 

• Where can I find a "complete" definition for the XML file to populate a RadMenu?  I have found various formats on the web for this XML file definition which all work, some are very basic (i.e., just <Items><Item>...</Item></Items> nodes), and some more detailed (i.e., <Menu><Group><Item>...</Item></Group></Menu> nodes).

Thanks,

Randall Price

[Yana]

Hi Randall,

Straight to your questions:

1. Most of RadMenu skins (except Simple skin) use background images with fixed height, that's why they don't support images with various sizes - the skin should be edited to achieve this. You can tell us which skin exactly you need and the images' size and we'll modify the skin for you.

2. You should add the templates dynamically in this case as demonstrated here  - create one template class for root items and one for child items.

3. You can create your menu declaratively and then use GetXML() method to get the exact syntax of the xml file.

Hope this helps.

Regards,
Yana
the Telerik team

[Randall]

Hello Yana,

(Sorry if this reply is a duplicate post -- I posted a reply several hours ago and it has not shown up on this thread yet).

Thanks for you response to my questions.  In response to your comments I have a few additional questions:

1.  My images in the root menu items are 64x64 pixels.  I would like to provide all available skins as I am using the RadSkinManager SkinChooser.  I realize that the skins need to be customized for the 64x64 image size.  What if I want to use another image size (i.e., 32x32 pixels).
Will this require an additional customized skin (i.e., one for each image size)?

2.  I have tried your suggested link here but this example is only for setting a template for the root menu item but not the child menu items.  I have already created a second class based on ITemplate for the child items (similar to the one I created for the root menu item) but I don't know how to implement it.  I also noticed some strange behavior with the menu create in the sample demonstration link you sent.  It does not behave like a menu in that the menu items do not seem to be links to the submenu.  When I compare the resulting HTML code from the sample using the template and a regular RadMenu, the menu items in the sample are not properly wrapped in the <a> tag.
Do you have a code example showing dynamic templates for both root and child menu items?

3.  Thanks for the info on GetXML() -- I saw that before but forgot about it.  These attributes seem to map to the RadMenu properties.  If I add more attributes (i.e., ClickedImageUrl, DisabledImageUrl, etc.) these attributes are sent back in the response from GetXML().
Does GetXML() return ALL possible tags and attributes or just the ones specified in my XML definition?  If not, how do I get a complete list of all possible tags and attributes (i.e., like a DTD file)?

Here is a snippet from my XML definition:

<Menu>
  <Group>
    <Item Text="Contacts" ImageUrl="/Images/64x64/Contact_01_Normal.png">
      <Group>
        <Item Text="Create Contact"
            ImageUrl="~/Images/16/CreateContact.png"
            NavigateUrl="Contacts/CreateContact.ascx"
            ToolTip="Create A Contact" />
        <Item Text="Delete Contact"
            ImageUrl="~/Images/16/DeleteContact.png"
            NavigateUrl=""
            ToolTip="Delete A Contact" />
        <Item Text="Manage Contacts"
            ImageUrl="~/Images/16/ManageContact.png"
            NavigateUrl=""
            ToolTip="Manage Contacts" />
        <Item Text="Upgrade To Mailbox"
            ImageUrl="~/Images/16/UpgradeContact.png"
            NavigateUrl=""
            ToolTip="Convert Contact To Exchange Mailbox" />
      </Group>
    </Item>

GetXML() returns the following for my RadMenu:

<Menu Flow="Vertical"
    EnableScreenBoundaryDetection="False"
    EnableAjaxSkinRendering="False"
    CssClass="RadMenu_LeftNav"
    Width="90px">
  <Group OffsetX="10" OffsetY="10">
    <Item Text="Contacts"
       Value="Contacts"
       ImageUrl="~/Images/64x64/Contact_01_Normal.png"
       HoveredImageUrl="~/Images/64x64/Contact_01_Hover.png"
       ExpandedImageUrl="~/Images/64x64/Contact_01_Hover.png"
       CssClass="root"
       Width="80px">
      <Group>
        <Item Text="Create Contact"
            NavigateUrl="Contacts/CreateContact.ascx"
            ImageUrl="~/Images/16/CreateContact.png"
            ToolTip="Add Contact" />
        <Item Text="Delete Contact"
            NavigateUrl="Contacts/DeleteContact.ascx"
            ImageUrl="~/Images/16/DeleteContact.png"
            ToolTip="Delete Contact" />
        <Item Text="Manage Contacts"
            NavigateUrl="Contacts/ManageContact.ascx"
            ImageUrl="~/Images/16/ManageContact.png"
            ToolTip="Manage Contacts" />
        <Item Text="Upgrade To Mailbox"
            NavigateUrl="Contacts/UpgradeContact.ascx"
            ImageUrl="~/Images/16/UpgradeContact.png"
            ToolTip="Upgrade Contact To Mailbox" />
      </Group>
    </Item>

Any help you can provide is greatly appreciated!

Thanks,

Randall Price

[Yana]

Hello Randall,

Thank you for getting back to us.

1. The reason for the need of fixed height is the rounded corners of hovered/selected state of the items. You can change the skins not to use rounded corners and then images with different height can be used. What do you think of the approach?

2.  You can set different templates like this:

RootTemplate template1 = new RootTemplate();
ChildTemplate template2 = new ChildTemplate();
foreach (RadMenuItem item in RadMenu1.GetAllItems())
{
    if (item.Level == 0)
        template1.InstantiateIn(item);
    else
        template2.InstantiateIn(item);
}
RadMenu1.DataBind();

3. I meant to create the needed menu declaratively in the aspx page:

  <telerik:RadMenu ID="menu1" runat="server" Skin="Vista" EnableAutoScroll="true" Width="100%" EnableRootItemScroll="true">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1" Enabled="false" DisabledImageUrl=ab.aspx>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                            <Items>
                                <telerik:RadMenuItem Text="item1" />
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 4">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 5">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 6">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
...

and then use GetXML() to get the exact xml definition.


Kind regards,
Yana
the Telerik team

[Randall]

Hello Yana,

1.  I am using RadControls for ASP.NET AJAX 2009.1.527.20 -- I am not sure rounded corners is available in this version.  Maybe I am wrong.  I remember seeing them mentioned in other posts on your site but I believe they were in a 2010 version.  Upgrading my version is not an option here.  I have been experimenting with modifying an existing skin to handle a 64x64 pixel image but have not completed this yet.  If this work, I may just modify each of the menu skins sprites (rmSprite.png) to handle the larger image.  I may also look into removing the background image for the root item and just use a background color instead.
My question is:  If I go this route, what classes do I need to modify in the Menu.<skinname>.css file to remove the image and just use a background color?

2.  Using the ItemLevel to determine root versus child menu items makes sense.
My question is:  What event do I put this code in (i.e., Page_Load(), etc.) -- do you have a code example for this?

3.  I have done both declaring the menu in the .aspx page and loading from an XML file and then using GetXML() to get the specs.
My questions is:  Does GetXML() return all possible attributes and elements or just the ones specifically declared (whether from the .ASPX page or from an XML file)?

Thanks,

Randall Price

[Yana]

Hi Randall,

1. In Q1 2009 release the menu also has rounded corners for hover/selected/focused state.  Please try this css styles to change the background for  Default skin:

div.RadMenu_Default .rmGroup .rmLink:hover,
div.RadMenu_Default .rmGroup .rmSelected,
div.RadMenu_Default .rmGroup .rmExpanded,
div.RadMenu_Default .rmGroup .rmExpanded:hover { background: #ccc; }

div.RadMenu_Default .rmGroup .rmLink:hover .rmText,
div.RadMenu_Default .rmGroup .rmSelected .rmText,
div.RadMenu_Default .rmGroup .rmExpanded .rmText,
div.RadMenu_Default .rmGroup .rmExpanded:hover .rmText { background: none; }

2. It's demonstrated in the help article which I sent earlier - the second approach to set templates at run time.

3. GetXML()  returns only the specifically declared attributes of the items.

All the best,
Yana
the Telerik team