Boopathy S
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.
and corresponding inspect html file is here:
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:
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.
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>
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;
},
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.
ASKER
Hi Julian,
Thanks for your reply, here is the css code for contect menu,
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;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks Julian. Its working fine. Awesome.
You are welcome.
You would need to set the top and left styles on the context menu container to the event X and Y co-ordinates.