How to get jsf datatable row index on mouse click without using checkbox or radio button

Question

I have used JSF hx:datatableEx datatable component to display document list. Values for the table fetched from the database.

Now I want to add an event such that when user does "right click with mouse" on any row I have to display context menu for that particular row.

My question is how to get the index of the clicked row?.

Please help me to find solution.

Code written to display document List, I listed only few columns:

<hx:dataTableEx headerClass="headerClass" footerClass="footerClass" columnClasses="columnClass1, columnClass2" rowClasses="rowClass1,rowClass2" scrollSize="175px" styleClass="dataTableEx" value="#{pc_DocumentSearch.allDocumentsList}" var="varallDocumentsList" binding="#{pc_DocumentSearch.allDocList}" rows="25">
<hx:columnEx id="column1" align="left" width="10%">
    <h:outputText id="text6" styleClass="outputText" value={pc_DocumentSearch.allDocList.rowIndex+1}"></h:outputText>
    <f:facet name="header">
        <h:outputText id="text2" styleClass="outputText" value="#{prop.SL_No}" </h:outputText>
    </f:facet>
</hx:columnEx>

<hx:columnEx id="column2" width="38%" align="left">
    <f:facet name="header">
    <h:outputText id="text5" styleClass="outputText" value="#{prop.Document_Name}">   </h:outputText>
     </f:facet>
<hx:outputLinkEx id="link1" styleClass="a" onmouseover="popup('ViewAttribute documentId=#{varallDocumentsList.DOCUMENT_ID}','#{sessionScope.attrCtrlOption}');" onmouseout="popupClose()" onmousedown="view_document(' {varallDocumentsList.DOCUMENT_ID}');">
<h:outputText id="text9" styleClass="outputText" value="#  {varallDocumentsList.DOCUMENT_NAME}"></h:outputText>
</hx:outputLinkEx>
</hx:columnEx>
                        
<hx:columnEx id="column3" width="12%" align="left">
<h:outputText id="text49" styleClass="outputText" value="  {varallDocumentsList.VERSION_NO}"></h:outputText>
<f:facet name="header">
    <h:outputText id="text48" styleClass="outputText" value="#{prop.Version_No}"> </h:outputText>
 </f:facet>
 </hx:columnEx>

<hx:columnEx id="column4" align="left" width="20%">
<h:outputText id="text8" styleClass="outputText" value="#{varallDocumentsList.CREATION_DATE}">
<hx:convertDateTime />
 </h:outputText>
<f:facet name="header">
    <h:outputText id="text4" styleClass="outputText" value="#{prop.Date}"></h:outputText>
</f:facet>
</hx:columnEx>

<hx:columnEx id="column5" width="10%">
<hx:outputLinkEx id="viewCommentLink" styleClass="a" onmousedown="view_doccomment('#{varallDocumentsList.DOCUMENT_ID}','#{varallDocumentsList.FOLDER_ID}');">
<h:outputText id="viewComment" styleClass="outputText" value="#{prop.View}">   </h:outputText>
</hx:outputLinkEx>
<f:facet name="header">
<h:outputText id="text43" styleClass="outputText" value="#{prop.Comments}">  </h:outputText>
</f:facet>
</hx:columnEx>

<hx:columnEx id="attributeColumn6" rendered="false">
<h:outputText id="attributeText1" styleClass="outputText" value="#{varallDocumentsList.INDEX_VALUES}"></h:outputText>
<f:facet name="header">
<h:outputText id="attributeHeader1" styleClass="outputText" value="Attribute Details"></h:outputText>
</f:facet>
</hx:columnEx>

</hx:dataTableEx>

Answer 1

Posting solution I used to solve the problem:

First create context menu with desired options as follows:

<div id="cntnr">
<ul id="items">
    <li><a onclick="load()">Indexes</a></li>
    <li onclick="load()"><a>Delete</a></li>
    <li onclick="load()"><a>Forward</a></li>
    <li onclick="load()"><a>Share</a></li>
    <li onclick="load()"><a>Comments</a></li>
</ul>
</div>

To get the clicked row Id write the following code: For more Information on this subject you should refer this Link:

$(document).ready(function() {
    var trs = document.getElementById('tableId').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i++) {
        trs[i].oncontextmenu = new Function("highlightAndSelectRow(this)");
    }
});
var docId=0;
var trAttri=0;
var Id=0;
function highlightAndSelectRow(tr) {
    var trs = document.getElementById('tableId').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i++) {
        if (trs[i] == tr) {
            Id=tr.getAttribute('class');
            } else {
            trs[i].style.bgColor = '#ffffff';
            }
    }
}

To clean up the context menu:

function startFocusOut() {
    $jq(document).on("click", function () {
      $jq("#cntnr").hide(5);
      $jq(document).off("click");           
    });
}

To bind the context menu:

$jq(document).ready(function()  {
    $jq("#tableIdDiv").bind("contextmenu", function (e)  {
        if(Id) {
          e.preventDefault();
          $jq("#cntnr").css("left", e.pageX);
          $jq("#cntnr").css("top", e.pageY);
          $jq("#cntnr").fadeIn(5, startFocusOut());
          Id=null;
        }
    });
});