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>
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 ::
$(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;
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.