Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » setting menu text with client-side javascript

setting menu text with client-side javascript Options
Previous Topic · Next Topic
Hugh J. Hitchcock
Posted: Friday, April 4, 2008 2:09:46 PM
Rank: Member
Groups: Member

Joined: 3/31/2008
Posts: 13
Hello, I need a little assistance with the following issue. I have implemented a web menu as a sort of a drop-down extender, it works perfectly. What I need to do is change the text of the menu item programmatically, which I have been able to do using the following approach:

var menu = eo_GetObject("<%=menuphones.ClientID%>");
var topGroup = menu.getTopGroup();
var topMenu = topGroup.getItemByIndex(0);
var subGroup = topMenu.getSubGroup();
var selected_item = subGroup.getItemByIndex(idx);
selected_item.setText(value);

this works just fine. However, once the new text is set, it does not have the same alignment as the other menu entries that were set server-side. This menu uses the MSDN skin, which I really like. Somehow, by using the above code, it throws off the layout as illustrated. (I'm using code blocks so you can see the pre-formatted layout I'm trying to describe):

before:

Code: C# 
Item 1 unchanged
    Item 2 unchanged
    Item 3 unchanged
    Item 4 unchanged
    Item 5 unchanged


after:

Code: C# 
Item 1 unchanged
    Item 2 unchanged
Item 3 changed
    Item 4 unchanged
    Item 5 unchanged


could you please explain how I retain the same formatting as previously? Since I'm using the MSDN skin I really don't know what the paddings are or any of that, and the objects seem simply too complex to wade through all the properties and set them all on the client side. What can be done?

thanks in advance :)

Hugh J. Hitchcock
Back to top
 
eo_support
Posted: Friday, April 4, 2008 2:23:13 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

First try to copy menu definition from the sample project -> Demos -> Menu -> Designs -> MSDN -> Demo.ascx. That will give you the full MSDN skin definition and allow you to modify it.

Once you have that, you can play with these two properties:

1. The parent group's LeftIconCellWidth. That's the amount of space to be reserved on the left side of each item;
2. Each style property's Padding.Left property. This would include NormalStyle, HoeverStyle, etc. It can also be used to adjust left paddings;

Those should give you the desired result.

Thanks
Back to top
 
Hugh J. Hitchcock
Posted: Friday, April 4, 2008 10:21:13 PM
Rank: Member
Groups: Member

Joined: 3/31/2008
Posts: 13
Hmmmm.... well I've been working on this and I haven't been able to solve the problem yet. I did see the CSS info in the MSDN demo and it says the menugroup has LeftIconCellWidth=12. I am trying to set this property programmatically but it still comes up in non-aligned menu item when I successfully set the text of the menu item. Perhaps you can review my code and see where I am going wrong:

Code: JavaScript 
var menu = eo_GetObject("menuphones");
    var topGroup = menu.getTopGroup();
    //alert(topGroup.getItemCount());
    var topMenu = topGroup.getItemByIndex(0);
    
    //alert(topMenu.getText());
    
   var subGroup = topMenu.getSubGroup();
    
    //if(! subGroup)
      //alert("is nothing");
    //else
      //alert(subGroup.getItemCount());
      
    var selected_item = subGroup.getItemByIndex(idx);
    
    // this works perfectly and sets my text just the way I want
    selected_item.setText(value);

    // only problem is the new menu item is not aligned with the old ones so...
    //selected_item.LeftIconCellWidth = 12; // nope, MenuItems do not have this property

    subGroup.LeftIconCellWidth = 12; // sp try putting it on the menu subGroup which does
   
    // my custom function
    selected_item.OnClickScript = "setPhoneSelection(" + idx + ",'" + value + "', 'type');";
    
   // just for kicks try the "fully qualified" object reference
    eo_GetObject("menuphones").getTopGroup().getItemByIndex(0).getSubGroup().LeftIconCellWidth = 12;
   // neither one of these lines that reference the LeftIconCellWidth property
   // has any effect on the menu whatsoever, even though I have 
   // correctly set the text with the setText() method.


that's basically it. It's a pretty simple menu with one top group item which opens up one submenu with five sub menu items which I intend to programmatically manipulate. Is there some other function I need to call to make sure the LeftIconCellWidth property gets set? Or perhaps I am calling this on the wrong object? stumped

thanks,
Hugh
Back to top
 
eo_support
Posted: Saturday, April 5, 2008 1:24:08 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi Hugh,

We have confirmed that this is a bug. We will be fixing it and hopefully can provide an update build to you next week. Sorry about the problem!

Thanks
Back to top
 
Hugh J. Hitchcock
Posted: Saturday, April 5, 2008 1:32:24 PM
Rank: Member
Groups: Member

Joined: 3/31/2008
Posts: 13
thank you!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.