'PrimeFaces dataTable - Difference between PF.showCellEditor and cellEditor click
I am trying to work with a p:dataTable that maintains focus in a particular way, which I created following this question I asked earlier. However, I've encountered something which I think is outside the scope of the original question.
For completeness, here is my setup:
A p:dataTable with some variables and a remoteCommand in a form named "addForm":
<h:inputHidden id="focus" value="#{rackView.focus}"/>
<p:remoteCommand name="onCellEdit" update="rackDT" oncomplete="loadFocus();"/>
<p:dataTable id="myDT" widgetVar="myDT" var="myObj" value="#{myView.objList}"
editable="true" editMode="cell">
<p:ajax event="cellEdit" listener="#{myView.onCellEdit}" oncomplete="onCellEdit()"/>
<p:column headerText="X">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{myObj.x}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{myObj.x}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Y">
<h:outputText value="#{myObj.y}" />
</p:column>
</p:dataTable>
A listener in the myView:
public void onCellEdit(CellEditEvent edit) {
if(edit.getNewValue() != null) {
MyObj myObj = this.objList.get(edit.getRowIndex());
/// Do some stuff to the dataTable object...
this.workOrders.set(index, workOrder);
}
}
And some JavaScript:
function loadFocus() {
var activeElementRow = -1;
try {
activeElementRow = parseInt(document.activeElement.parentElement.parentElement.id.split(':')[2]);
} catch(e) {}
if((activeElementRow == -1 || activeElementRow != document.getElementById('addForm:focus').value) && document.getElementById('addForm:focus').value != -1) {
var index = document.getElementById('addForm:focus').value;
PF('myDT').widget.showCellEditor($('[role="gridcell"].ui-editable-column:eq(' + index + ')'));
document.getElementById('addForm:focus').value = -1;
}
}
$(document).keydown(function(e) {
var active = document.activeElement;
function enterKey(){
if (e.which === 13 && active.id.includes('j_idt')) {
try {
var strArr = active.id.split(':');
document.getElementById('addForm:focus').value = parseInt(strArr[2]) + (e.shiftKey ? -1 : 1);
} catch (e) {
document.getElementById('addForm:focus').value = -1;
}
return false;
}
}
if (e.shiftKey) { enterKey() } else { enterKey() }
});
The problem I am facing is when I use enter to move between editable cells. After moving through any number of cells with enter, the cellEditor does not close until I have clicked a different page element twice. Normally, the cellEditor is closed when clicking any other element on the page. Further, trying to click another editable cell after using enter to navigate to a cell will cause the cellEditor for the clicked cell to briefly open, then immediately close, and this keeps occurring any time the cell is clicked until I click a different, non-cellEditor element.
I believe this culprit here is PF.widget.showCellEditor. Is there some operation PrimeFaces performs when clicking an editable cell that calling PF.widget.showCellEditor alone does not?
Edit: I have found that clicking a cell after a widget.showCellEditor is called causes a cellEdit event on the table header of the cell clicked. Not sure why.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
