Context Menu on Left Click

[DaveLClarkI]

I've created a context menu which displays in a grid on right-click. However, for newbies, I'd also like to put a gear icon in each grid row (e.g., with tooltip of "Actions") and on left click of that gear display the same context menu with would normally display on right-click. How would I accomplish that? Thanks.

[David]

I'm not sure there is a simple way to do this, unfortunately.

I think the problem with this, is that the event to hide the menu when you click elsewhere on the page is not assigned until the menu is shown for the first time. So if you simply set the visibility property on the menu from the button onclick, it may not hide reliably when you click elsewhere. Also, you could run into issues with trying to calculate a position for it, due to how the menu is rendered on the page.

You could try something like this:

Code: Select all

// Using 'event' in event property requires at least version 4.7.1:
var top = event.pageY;
var left = event.pageX;
applyProperty("YourMenuId", "visibility", "visible");
applyProperty("YourMenuId", "top", top + "px");
applyProperty("YourMenuId", "left", left + "px");

One idea, is that you could add your own event handler to try to hide it, but this gets a bit complicated in Profound UI, as the page never reloads, so your event handler would 'stick around' unless you do something about it. I think the positioning would also be off if the grid were in a layout container.

We are currently working on some changes to the menu rendering which would fix any positioning issues. Perhaps while we do that, we can also give this situation some thought and see about smarter handling of the menu hide event, as well.

[Scott Klement]

What David says is true... basically, if you wanted to "just show" the context menu, you'd have to write your own version of the code that we have in Grid.js that's designed to deal with the context menu...

However, I was wondering if another approach might be to simulate a right-click in code? i.e. tell the browser to send a right-click event to the widget, this way you could run the same code that we use to display the context menu. I haven't tried this, though... it's just an idea that _might_ work.

Here's a discussion on how to simulate a right-click:
http://stackoverflow.com/questions/7914 ... javascript

[Scott Klement]

Here's another (maybe better?) link:
http://stackoverflow.com/questions/1579 ... rs/1580660

[DaveLClarkI]

OK, what I tried was to install jQuery. On my first attempt I tried the following in the onclick event:

Code: Select all

$('#imgActions.'+row)
  .trigger(
    {
      type:'mousedown',
      which:3
    })
  .trigger(
    {
      type:'mouseup',
      which:3
    });

I also tried substituting "which:3" with "button:2" but neither form seemed to accomplish what I wanted.

So, next I tried splitting this up and placing it in the onmousedown event:

Code: Select all

$('#imgActions.'+row)
  .trigger(
    {
      type:'mousedown',
      which:3
    });

and in the onmouseup event with the same alternate substitution using the "button:2" form.

Code: Select all

$('#imgActions.'+row)
  .trigger(
    {
      type:'mouseup',
      which:3
    });

However, this also did not seem to accomplish what I wanted. Note that I say "seem" but in both cases, at least, no context menu appeared. ;-)

Any hints as to what I may need to do differently?

[Scott Klement]

Sorry, this idea isn't going to work. Trouble is, you are trying to click on a widget id, which is not what you need, you need to click on the cell itself, which is not one of the widgets you can assign an id to.

So, this won't work. Like I said when I posted it, I haven't tried it before, so I might've been completely wrong -- and, it appears, I was. Sorry about that.

[DaveLClarkI]

Trouble is, you are trying to click on a widget id, which is not what you need, you need to click on the cell itself...

I don't see why you think that is a problem. If I right-click on the widget (not the cell) the context menu for the row appears (because of bubble-up). So, why should I not be able to left-click, turn it into a right-click, and get the same context menu?

[David]

Even if that would work (I'm not sure), you would need to be able to locate the cell. You could hunt through the DOM to find it, but I think this is not very good, as your script would then break if we changed the way the grid was rendered for some reason.

We were considering to add a built-in interface or API for doing this.

[DaveLClarkI]

We were considering to add a built-in interface or API for doing this.

Yes, I would very much like a showContextMenu() function to accomplish this. ;-)

[DaveLClarkI]

You could try something like this:

Code: Select all

// Using 'event' in event property requires at least version 4.7.1:
var top = event.pageY;
var left = event.pageX;
applyProperty("YourMenuId", "visibility", "visible");
applyProperty("YourMenuId", "top", top + "px");
applyProperty("YourMenuId", "left", left + "px");

OK, I've started down this path -- as it is seemingly my only choice at this point. So, the problem I have right now is that the menu is appearing in the wrong position. Also, it appears at different positions depending upon what browser I test it in. How can I resolve this?

The following is what I have at the moment (and we are at version 4.7.2 as of last night):

Code: Select all

/*	================================================================================
	showContextMenu()	positions a menu widget at the current mouse position and
						makes the menu visible.
*/
wob.showContextMenu = function(menuId, event)
{
	applyProperty(menuId, "top", (event.screenY - 5) + "px");
	applyProperty(menuId, "left", (event.screenX - 5) + "px");
	applyProperty(menuId, "z index", 100);
	applyProperty(menuId, "visibility", "visible");
}