Setting menu item css style onclientitempopulated event

4 posts, 1 answers
  1. James
    James avatar
    35 posts
    Member since:
    Apr 2010

    Posted 15 Jun 2010 Link to this post

    I'm sure I'm missing something simple here...

    I have menu where the root nodes are loaded in the code behind and the child menu items are loaded on demand via a web service.  I need to apply a different css style to child menu items of a specific root item.  I thought I could do this on the OnClientItemPopulated event with the following code:

                function itemPopulated(sender, eventArgs)  
                {  
                    var item = eventArgs.get_item();  
                    if (item && item.get_value() == "myValue")  
                    {  
                        for (var i=0; i < item.get_items().get_count(); i++)  
                        {  
                            item.get_items().getItem(i).set_cssClass("myCssClass");  
                        }  
                    }  
                } 

    However, I noticed that the style for the items, as the menu is expanding and when it is open, is the default style and that my applied style only takes effect as the menu is closing.  What am I missing?

  2.
  3. James
    James avatar
    35 posts
    Member since:
    Apr 2010

    Posted 17 Jun 2010 Link to this post

    Still waiting...

    If it helps here is the css:
    .RadMenu_Black a.myCssClass .rmText {color:Yellow !important;} 

  5. Answer
    Yana
    Admin
    Yana avatar
    5044 posts

    Posted 21 Jun 2010 Link to this post

    Hi James,

    The style is applied after the menu item is expanded. Please change your code like this:

    1. subscribe to OnClientItemPopulating instead and in its handler:

    function itemPopulating(sender, eventArgs) {
         var item = eventArgs.get_item();
         if (item && item.get_value() == "132") {
             item.get_element().className += " myCssClass";
         }
    }

    2. change the css selector like this:

    .RadMenu li.myCssClass .rmGroup .rmText {color:Yellow !important;}

    Greetings,
    Yana
    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
  7. James
    James avatar
    35 posts
    Member since:
    Apr 2010

    Posted 21 Jun 2010 Link to this post

    Thanks Yana, I can confirm this works.

    I should have thought of trying it this way.  At one point I was trying the itempopulating method but was trying to set the style on the child items - which at that point, didn't exist yet.


  8.
Back to Top