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

+3


source to share


1 answer


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.

0


source







All Articles