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
Hello sandy_joggy ,
I’m not quite sure I fully understand your scenario.
Would it be possible to provide an isolated sample that represents your issue? Alternatively could you share the post that you’ve used for adding/removing items from the client side?
In the meantime try getting the width with:
menu.get_menuGroupSettings().get_width()
Also make sure that you’ve set a width for the GroupSettings for the parent group. For example:
<GroupSettings Width="500px" Orientation="Horizontal" />
I’m looking forward to your reply.
Best Regards,
Maya Kirova
Developer Support Engineer
Infragistics, Inc.
http://es.infragistics.com/support
I am referring the following article to show/hide items on client side:
http://codecorner.galanter.net/2011/02/24/infragistics-webdatamenu-csom-additemremoveitem-workaround/#more-1168
So now if I set the width of GroupSettings to some fixed value like 500px, then I wont have any need to figure out the exact width in client side. I want to retirieve the exact width of menu when I add/remove menu items.
Thanks.
You can get the width of the whole menu element with:
menu.get_element().clientWidth;
Based on that you can calculate what coordinates to pass to the showAt method.
I’m attaching a very simple sample with 2 buttons. One adds new items to the Menu based on the approach suggested in your link. The other moves the menu to the right-most points of the document without showing a scrollbar. Please refer to the attached sample and let me know if this is the dynamic client width you need for your scenario.
Hi Maya,
Thanks a lot for the sample code. It gives the width correctly.
But I have created another sample page illustrating the issue. When you right-click the image on the page, it will alert the item's width and then show the menu. On each click, one additional item will be inserted in the menu. So for the first time if you right-click, it shows width correctly and then shows the menu. Then you click on the page anywhere. Again right-click on the menu, it shows width as 0.
So I guess width is returned correctly when menu is showing but not when menu is not showing. But in order to position correctly we will have to get the width before calling showAt? Please let me know what I may be missing here.
Please findattached the sample code illustrating the issue.
Thanks a lot.
Please let me know if you have any updates on the above issue.
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.
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.
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.
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.