Setting menu item css style onclientitempopulated event

[James]

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?

[James]

Still waiting...

If it helps here is the css:

.RadMenu_Black a.myCssClass .rmText {color:Yellow !important;}

[Yana]

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

[James]

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.