Hi,
I am using Web context menu to show some items. The menu is shown just before the right corner of the screen. So some part of menu text is not visible. This is because the menu is always shown to the right of mouse pointer. Can we have the context menu to display on the left side of the pointer when there is not enough space on the right side.
Please let me know how to resolve this.
Thanks in advance.
Alternatively, can I get the total width of my menu on client side. I dynamically add/remove items in my menu.
Hello ,
Thank you for posting in Infragistics forums.
You can use width property of the MenuGroup
http://help.infragistics.com/NetAdvantage/ASPNET/2011.2?page=WebDataMenu~Infragistics.Web.UI.DataMenuGroupSettings_members.html
You can also use the showAt method
http://help.infragistics.com/NetAdvantage/ASPNET/2011.2?page=WebDataMenu~Infragistics.Web.UI.WebDataMenu~showAt.html
Please let me know if you need further assistance
Hi Tsvetelina,
Thanks for the quick reply. But I am already using the showAt method. I want to know how can I show my menu to the left of my pointer when there is not enough space to show menu on right.
I have tried both these methods:
oMenu.showAt(null, null, event); oMenu.showAt(event.pageX, event.pageY, null);
Both variations do not show menu on left when no space on right side of screen. When there is no space, IE's horizontal scrollbar appears to fully view the menu. I dont want this - the window should not be resized and menu should appear on left.
And the width property I could find was: oMenu._menuGroupSettings._element.offsetWidth. This gives correct value the first time menu is shown. But when I add/remove items on client side, then it returns value of 0. Similar is the case with oMenuItem.get_element().offsetWidth.
I add/remove items on client side using idea from another post where I initialize menu with 20 items, then set the display attribute to 'block' or 'none' of individual menu items as required. Then just before calling showAt method, I try to get the width. But it returns correct value the first time, then it always returns 0.
Thanks a lot.
Hello Maya,
Thanks for the reply.
Unfortunately I can't use additem/removeitem as they make AJAX calls and so response will be slower than pure client side. And setting fixed width will make certain items wrap or have too much gap for smaller text items.
So I am still trying how to go about this.
Hello sandy_joggy,
Let me know if i can further assist you in any way.
Best Regards,
Maya Kirova
Developer Support Engineer
Infragistics, Inc.
http://ko.infragistics.com/support
It seems that with this approach changing the width once it gets set is not an option. If you use the methods removeItem and addItem resizing issues do not occur.
I can only suggest that you wrap the text and set a width for the menu items so that the longer text won’t change the width.
For example set the CssClass of the ItemSettings to the following css class:
.ItemClass
{
width: 100px !important;
overflow: visible;
white-space: normal;
}
You can also further modify the menu item setting by setting :
oMenu._element.runtimeStyle.textAlign = "right";
So that the text will be displayed on the right side (since you mentioned that in your scenario the menu will open on the left side of the pointer).
Refer to the attached sample and let me know if this would be an acceptable solution for your scenario. If not I’d advise you to use the functions that were meant for adding and deleting items.
Let me know if I can be of further assistance.
Hi Maya,
Thanks a lot for the reply!. It sure moves the issue forward.
So now we are saving the menu width the first time and using it to show menu right or left of the mouse pointer. It works very well except in one case. Initially suppose menu had 2 items and one item was very lengthy. Now later that lenthy item is removed(hidden). Now menu has just the one short item, but menu is shown to far left from the pointer - because it is using the initial menu width. I am always right-clicking at the right end of screen.
So the issue is that since we are storing the initial width, when menu shrinks in size, menu will be shown to far left from the pointer using the initial stored width.
Please find attached sample page having a "Remove" button to illustrate the issue.
Hello sandy_joggy ,
I apologize about the late reply.
It seems that this is connected to the IsContextMenu property which hides the menu. What I’ve notice however is that once the Menu shows the first time it’s width doesn’t seem to change.
Note the sample I’ve attached. Click on add say 4 times to have 4 items in the menu and right click on the image. It will show the four items horizontally aligned. Now click on add four more times to add 4 more item and notice that when you open the menu the items are 4x4 vertically aligned. So in this case I think you might need only the initial width to calculate where on the page you should display the context menu. Please refer to the attached sample and let me know if this solution would be applicable in your scenario.