Use tab, click or double click on PrimeFaces navigation available for editing. Datatable
Basically, I would like to enable the keyboard key and click on a PrimeFaces 4.0 data cell.
The issue has been reported as PrimeFaces issue 6310 , however the solution provided via demo labs appears to be no longer demo labs
<p:remoteCommand name="newRow" update="Tbl" id="rmC"/>
<p:dataTable value="${emps}" widgetVar="wTblempl"
var="emp" id="Tbl" filterEvent="keydown"
editable="true" editMode="cell" rowIndexVar="rowIndex"
scrollHeight="120" scrollable="true">
<p:ajax event="cellEdit" listener="${Controller.addRow}"
oncomplete="newRow()"/>
<p:column headerText="Last Name">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="${emp.lastname}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="${emp.lastname}" tabindex="1"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Department">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="${emp.firstname}" />
</f:facet>
<f:facet name="input">
<p:inputText value="${emp.firstname}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Gender">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="${emp.gender}"/>
</f:facet>
<f:facet name="input">
<p:selectOneMenu value="${emp.gender}" >
<f:selectItem itemLabel="Male" itemValue="M" />
<f:selectItem itemLabel="Female" itemValue="F" />
</p:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Status">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="${emp.status}"/>
</f:facet>
<f:facet name="input">
<p:selectOneMenu value="${emp.status}" editable="true">
<f:selectItem itemLabel="active" itemValue="active" />
<f:selectItem itemLabel="Suspended" itemValue="Suspended"/>
<f:selectItem itemLabel="Leave" itemValue="Leave" />
</p:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
Update:
I need to add a line that works, but when I enter it loses focus ...
public void addRow(CellEditEvent event) {
log.info("1 add");
int r = event.getRowIndex();
RequestContext context = RequestContextHolder.getRequestContext();
List<Employee> list = (List<Employee>) context.getConversationScope().get("emp");
if (list.size() == 1 || (r + 1) == list.size()) {
((List<Employee>) context.getConversationScope().get("emp")).add(new Employee());
}
log.info("added");
}
Update 2:
I need to click on the first cell of a row, type (work), then move to the next cell (working), but immediately lose focus at once with all subsequent clicks or tabs if I don't refresh (F5) the page
source to share
It seems like it would be easier to solve this client-side problem with JavaScript.
You can intercept almost all mouse and keyboard (input) events with JavaScript, see w3schools JavaScript HTML DOM Events .
By intercepting the onmousedown, onmouseup, and onclick events, you can prevent them from firing the datatable update / refresh code. Most likely this update code is killing your focus. Also, with JS, you can just re-focus after running the refresh code, but this can lead to an issue where you cannot re-focus before refreshing the page.
source to share