Right Click and left click options needs 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(F12) 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>
<script id="metamorph-4593-start" type="text/x-placeholder">
</script>1<script id="metamorph-4593-end" type="text/x-placeholder">
</script>
</div>
</div>
</td>
<script id="metamorph-4531-end" type="text/x-placeholder">
</script>
<script id="metamorph-4508-end" type="text/x-placeholder">
</script>
<script id="metamorph-4509-start" type="text/x-placeholder">
</script>
<script id="metamorph-4532-start" type="text/x-placeholder">
</script>
<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">
<script id="metamorph-4550-start" type="text/x-placeholder">
</script>CopyEditor<script id="metamorph-4550-end" type="text/x-placeholder">
</script>
</span>
</td>
<script id="metamorph-4532-end" type="text/x-placeholder">
</script>
<script id="metamorph-4533-start" type="text/x-placeholder">
</script>
<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>
<script id="metamorph-4533-end" type="text/x-placeholder">
</script>
<script id="metamorph-4509-end" type="text/x-placeholder">
</script>
<script id="metamorph-4510-start" type="text/x-placeholder">
</script>
<script id="metamorph-4510-end" type="text/x-placeholder">
</script>
</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.