Link to home
Start Free TrialLog in
Avatar of Boopathy S
Boopathy SFlag for India

asked on

Right Click or left click options comes near to the clicking row

For the product, the mouse click options are wrote for action gear icon only. So if we left click on Task button(action icon), it will show options near to that icon.

User generated image

and corresponding inspect html file is here:

<tr id="ember25477" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
<script id="metamorph-4508-start" type="text/x-placeholder">
</script>
<script id="metamorph-4531-start" type="text/x-placeholder">
</script>
<td id="ember25657" class="ember-view content-data item-number item-number-view container-view item-number-view-core_component_data-view-mixin container-view-core_component_data-view-mixin itemNumber">
<div id="ember25660" class="ember-view view">
<div>
</div>
</div>
</td>
<td id="ember25666" class="ember-view container-view">
<rs-icon id="ember25669" class="ember-view action-menu auto-actions-menu-button icon clickable-icon" style="width: 1em; height: 1em; font-size: 20px">
<icon glyph="action" class="action" style="font-size: 20px;">
</icon>
</rs-icon>
<span id="ember25672" class="ember-view view">
<td id="ember25678" class="ember-view content-data view view-core_component_data-view-mixin description">
<div class="container">
<div class="content">
<div class="aria-hidden">Empty cell</div>
</div>
</div>
</td>
</tr>

Open in new window


But Now the new requirement is options have have to wherever click (both on right click and left click) on that corresponding row. So I have tried the below code:

click: function (event) {
			var eventResult = this.get('tableView').clickRow(event, this.get('object'));
			if (eventResult !== false) {
				this.get('element').focus();
				$('.content-row').bind('contextmenu', function(e) {
					e.preventDefault();
				    var rowParentId = $(this).closest('tr').prop('id');
				    $('#'+rowParentId).find( ".action-menu" ).click();
				});
			}
			return eventResult;
		},

Open in new window


When I'm using the above code, right click option is working fine at the corresponding row. But the options are coming near to the gear icon only.  I need the options needs to come near to wherever I click on that row.

Please provide me any other suggestion for this. Your help will be appreciate. Thanks in advance.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

We would need to see your context menu markup and styling.

You would need to set the top and left styles on the context menu container to the event X and Y co-ordinates.
Avatar of Boopathy S

ASKER

Hi Julian,

Thanks for your reply, here is the css code for contect menu,

.context-menu {
  background: transparent url("/core-cms/images/icons/ui/action.png") 0 50% no-repeat;
}

.managed-object .context-menu {
  width: 24px;
  height: 2em;
  float: left;
  overflow: hidden;
  text-indent: 100%;
  background: transparent url("/core-cms/images/icons/ui/action.png") 0 50% no-repeat;
  cursor: pointer;
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks Julian. Its working fine. Awesome.
You are welcome.