Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1360
WDM - Menu Item Style not updating when cssClass set clientside
posted

I am attempting to change the style (cssClass) of menu items via JavaScript. I can get a particular menu item and enable/disable it successfully. However to higlight the fact that a menu item has become enabled i wish to change the cssClass so that the background and font style changes. Here is my client code:

var mm = $IG.WebDataMenu.find(mmName);  // Get the MainMenu on the master page
var items = mm.getItems();   // Get the Menu items
var i2 = items.getItem(2);   // get the 3rd item on the menu
i2.set_enabled(true);        // Enable it
i2.cssClass = "menuNAV";     // re-style it

However the change of style does not appear. This type of operation used to work OK with UltraWebMenu items.

The change does take place if I perform a PostBack to the server and overwrite the style in C# but then I get screen flicker etc.

What am I doing wrong?

(Ancillary question: I'm not familiar with AJAX and can find no detailed (or simple for that matter) explanation of how the IG controls use it. How difficult is it to perform an AJAX-style postback from JavaScript to the server that does not repaint the entire display? I'm thinking that I might be able to solve this issue by doing an Ajax-postback to the server and get it to update the menu that way.)

Kind regards

Paul

IG ASP.NET 10.3
VS 2010
CLR 4

  • 3726
    Suggested Answer
    posted

    Hi Paul,

    the CssClass property is only available on the server side. In order to change the class of some menu item for example to add a class. You have to  get reference to the underlying DOM object and apply the class. You can do the following:

    $util.addCompoundClass(i2.get_element(), "menuNAV"); this will add the css class menuNAV to the element.

    You can also use $util.removeCompoundClass(elem, 'class'); $util.toggleCompoundClass(elem, 'class');

    Hope this helps.

    Thanks,

    Lubomir