Primefaces dataTable sort after rowEdit

Question

I'm a bit stuck in PrimeFaces dataTable part. I created a table with rowEditor and sortBy built-in methods, but when I modify a row in the table order of entries are not updated.

In theory, it should work: update=":form:fruits". But it doesn't update the modified row. So I tried to update the whole form: update=":form". But in this case I loose all data from the table except the updated one without any desing.

ScreenShot01 ScreenShot02

Here is a very short sample code to reproduce the problem.

Fruit.java:

public class Fruit {

    private Integer id;
    private String name;

    public Fruit(Integer id, String name) {
        super();
        this.id = id;
        this.name = name;
    }

    @Override
    public boolean equals(Object o) {
        if (!(o instanceof Fruit)) {
            return false;
        }
        return id == ((Fruit) o).getId();
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

Fruits.java:

@ManagedBean(name = "fruits")
@ViewScoped
public class Fruits implements Serializable {

    private static final long serialVersionUID = 1L;

    private ArrayList<Fruit> list = new ArrayList<Fruit>() {
        {
            add(new Fruit(1, "apple"));
            add(new Fruit(2, "orange"));
            add(new Fruit(3, "banana"));
            add(new Fruit(4, "pineapple"));
            add(new Fruit(5, "cocoa"));
        }
    };

    public void onRowEdit(RowEditEvent event) {
        Fruit fruit = (Fruit) event.getObject();
        list.set(list.indexOf(fruit), fruit);
    }

    public ArrayList<Fruit> getList() {
        return list;
    }

    public void setList(ArrayList<Fruit> list) {
        this.list = list;
    }
}

fruits.xhtml:

<h:head />

<h:body>
    <h:form id="form">
        <p:dataTable id="fruits" value="#{fruits.list}" var="fruit"
            editable="true" sortBy="#{fruit.name}">
            <p:ajax event="rowEdit" listener="#{fruits.onRowEdit}" update=":form"></p:ajax>
            <p:column headerText="Name" sortBy="#{fruit.name}">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{fruit.name}" />
                    </f:facet>
                    <f:facet name="input">
                        <h:inputText value="#{fruit.name}" />
                    </f:facet>
                </p:cellEditor>
            </p:column>
            <p:column>
                <p:rowEditor />
            </p:column>
        </p:dataTable>
    </h:form>
</h:body>
</html>

Any ideas how I could fix the problem?

gregor gregor · Accepted Answer · 2017-01-23T19:45:38

Today I had the same problem and found a workaround: Create a remoteCommand which updates the table and call this remoteCommand as oncomplete action after the cellEdit ajax event.

Snippet:

<h:form id="form">
    <p:remoteCommand name="remoteCmd" update="table" />

    <p:dataTable id="table" ...>

        <p:ajax event="cellEdit" listener="#{anyClass.onCellEdit}"
            oncomplete="remoteCmd();" />

        <p:column headerText="header">
            values
        </p:column>
    </p:dataTable>
</h:form>

Primefaces dataTable sort after rowEdit

4 Answers