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.
I think you are not retrieving properly the WebDataMenu control instance. Could you show me how do you get mmName?
Why don't you try this $find("<%= ServerSideMenuControlInstance.ClientID %>"); or
$get("<%= ServerSideMenuControlInstance.ClientID %>"); Having the proper menu instance will solve your problems.
I have tried $find (does not work, object remains undefined) and $get.The latter works but returns an object that does not have any of the required WebDataMenu methods or properties. I am using the .ClientID syntax that you recommend and have been doing this from the start.
I had to ship the application with server-side updates and this gives an annoying screen refresh so I need to fix this quickly. Here is the same problem but for a WebDataGrid. This is the complete function which gets a value from a hidden field and uses it to select a row in the grid:
tg is set to be an object. I can see from properties such as the InnerHTML and the Style that it is the grid that I want to access - just none of the WebDataGrid functions or properties are available so the function fails on the line:
var tgridRow = tg.get_rows().get_row(tIndex);
The only thingI can think of that might be causing the problem is that this is on a child page of a master page. Just a thought. Other than that, I am stumped.
it looks like some configuration issue, either you are missing some script. I could not infer this from the code. Could you also check whether you have installed the correct MS Ajax version on the machine you are running this.
var menu = $find("<%= ContextMenu.ClientID %>"); this definitely works, you just have some config issue.
Could you attach a sample web site in the forum or if the code is proprietary, contact developer support to create a support case for you and give them the sample - they'll route it to me.
Thanks for this.
I don't know how to check the MS Ajax configuration. I have just downloaded and installed the latest Ajax Control Toolkit for .NET 4 but this has not made any difference.
I have been forced to set
EnableAjax="false" EnableAjaxViewState="false"
on the grid to avoid DeSerialization errors.
What should I do next?