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 pagevar items = mm.getItems(); // Get the Menu itemsvar i2 = items.getItem(2); // get the 3rd item on the menui2.set_enabled(true); // Enable iti2.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.3VS 2010CLR 4
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
Hi Lubomir,
That didn't work for me but I now have a yet more confusing but related issue which needs to be resolved first. I have (in response to another IG thread) discovered that I had Internet Exporer 8 set to Compatibility mode. I have switched to IE8 "native" mode and now my JavaScript has stopped working as expected. The statement:
var mm = $IG.WebDataMenu.find(mmName);
returns an object but it is not a WebDataMenu object. It seems to have the same characteristics were I to call document.getElementByID(mmName). I have tried the following:
var mmObj = document.getElementById(mmName); var mm = $IG.WebDataMenu.from(mmObj);
but the same pertains. This causes the next statement:
var theItems = mm.getItems();
to fail because the mm object does not support any of the WebDataMenu methods or properties.
What I am trying to do is simple enough. I need, on the client side, to get a reference to the WebDataMenu such that I can enable/disable specific root-level menu items. I need this to work in IE8 in both native and compatibility mode - our customers could be using either.
I have spent a great deal of time on this, struggling to get to grips with undocumented features. I would be grateful for a quick and succinct response that has been tested and proven. I simply don't have any more time to spend on this and my credibility as a developer is fast going down the tubes.
I do have priority support currently active.