Independent submenu colors

6 posts, 0 answers
  1. KevinMc
    KevinMc avatar
    47 posts
    Member since:
    Dec 2006

    Posted 28 Jan 2008 Link to this post

    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> 
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 29 Jan 2008 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 10 Feb 2010 Link to this post

    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
  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 12 Feb 2010 Link to this post

    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.
  6. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 15 Feb 2010 Link to this post

    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

  7. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 16 Feb 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017