Independent submenu colors

[KevinMc]

Can the submenu colors be set to different colors based on the parent menu item selected. In the example below we would like to be able to have a blue background color for the submenu of the 1st menu item, a red background for the submenu of the 2nd item, etc... We are using a slightly modified version of the default 2006 skin. It would be nice if there was a groupsettings-cssclass property.

 <telerik:radmenu id="RadMenu1" runat="server" flow="Vertical" skin="AdisseoBiz"
                            onclientitempopulating="itemPopulating" borderwidth="0px" borderstyle="None"
                            backcolor="#A5001E" width="200px" enableembeddedskins="false">
                        <WebServiceSettings Path="getProducts.asmx" Method="GetMenuCategories" />
                        <DefaultGroupSettings Flow="Vertical" ExpandDirection="Right" />
                        <Items>
                            <telerik:RadMenuItem ImageUrl="~/images/v3_main_04.gif" />
                            <telerik:RadMenuItem ImageUrl="~/images/v3_btn_Microvit.gif" HoveredImageUrl="~/images/v3_btn_MicrovitOver.gif"
                                Value="1" ExpandMode="WebService" runat="server" ToolTip="Microvit">
                                    <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem ImageUrl="~/images/v3_btn_Rhodimet.gif" HoveredImageUrl="~/images/v3_btn_RhodimetOver.gif"
                                Value="2" ExpandMode="WebService" runat="server" ToolTip="Rhodimet" >
                                    <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem ImageUrl="~/images/v3_btn_Rovabio.gif" HoveredImageUrl="~/images/v3_btn_RovabioOver.gif"
                                Value="3" ExpandMode="WebService" runat="server" ToolTip="Rovabio">
                                    <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem ImageUrl="~/images/v3_btn_Smart.gif" HoveredImageUrl="~/images/v3_btn_SmartOver.gif"
                                Value="4" ExpandMode="WebService" runat="server" ToolTip="Smartamine">
                                    <GroupSettings ExpandDirection="Auto" Flow="Vertical" />
                            </telerik:RadMenuItem>
                        </Items>
                        <CollapseAnimation Duration="200" Type="OutQuint" />
                        <ExpandAnimation Type="OutQuart" />
                    </telerik:radmenu>

[T. Tsonev]

Hello Kevin,

You can set the CSS class of the menu item from the web service or on the client depending on its parent or other rules. I will give you an example of setting it from the web service.

There is a bug in the current version that does not allow you to directly set the CSS class name for the item. We will work around it by using an attribute:

[WebMethod]
public RadMenuItemData[] GetMenuCategories(RadMenuItemData item, object context)
{
    // ...

    itemData.Attributes["class"] = "test";

    // ...
}

On the client we will read this attribute and set the item's class to it:

<script type="text/javascript">
    function itemPopulated(sender, eventArgs)
    {
        var item = eventArgs.get_item();
        item.set_cssClass(item.get_attributes().getAttribute("class"));
    }
</script>

<telerik:RadMenu ... OnClientItemPopulated="itemPopulated">
</telerik:RadMenu>

You can move all or some of the formatting logic on the client. For example, you can flag the appointments with predefined attribute values and choose a corresponding css class in the client-side code. This way the web service will not need to know about the visual appearance details.

Regards,
Tsvetomir Tsonev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Fit2Page]

Hi,

I want to give the submenu's different colours. I would rather do this from the server-side code. It possible to give different css classes to the submenu's?

Regards,
Marc

[Peter]

Hello Marc,

It is even easier to do this server side. Try the following code:

protected void Page_Load(object sender, EventArgs e)
    {
        foreach (RadMenuItem menuItem in RadMenu1.GetAllItems())
        {
            if (menuItem.Level == 1)
            {
                RadMenuItem parentItem = (RadMenuItem)menuItem.Owner;
                menuItem.CssClass = "Group" + parentItem.Index.ToString() + "Css";
            }
        }
    }

Kind regards,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Fit2Page]

Hi Peter,

This code is working when I put it in the ItemDataBound event.

On Page_Load it is not working. I work with an XML datasource:

Private Sub Page_Load(sender As Object, e As EventArgs) Handles MyBase.Load


RadMenu1.MaxDataBindDepth = 3 'nodig om het hoofdmenu item actief te houden
SiteMapDataSource.SiteMapProvider = "SiteMapProvider" & Session.Item("Taal")
SitePath.SiteMapProvider = "SiteMapProvider" & Session.Item("Taal")




    For Each menuItem As RadMenuItem In RadMenu1.GetAllItems()

        If menuItem.Level = 1 Then
            Dim parentItem As RadMenuItem = DirectCast(menuItem.Owner, RadMenuItem)
            menuItem.CssClass = "Group" & parentItem.Index.ToString() & "Css"
        End If
    Next




End Sub 'Page_Load


Protected Sub RadMenu1_ItemDataBound(ByVal sender As Object, _
                               ByVal e As RadMenuEventArgs) _
                               Handles RadMenu1.ItemDataBound

For Each menuItem As RadMenuItem In RadMenu1.GetAllItems()

        If menuItem.Level = 1 Then
            Dim parentItem As RadMenuItem = DirectCast(menuItem.Owner, RadMenuItem)
            menuItem.CssClass = "Group" & parentItem.Index.ToString() & "Css"
        End If
    Next

End Sub

Can you investigate?

Thanks,
Marc

[Peter]

Hello,

ItemDataBound is quite fine too. I gave you a more generic approach that handles menu defined inline as well. If your menu is databound you should simply move the code from page load to RadMenu's DataBound event handler. The reason why the code fails in Page_Load is because this event occurs too early for databound menus and the value of the Level property is not yet finalized.


Greetings,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.