Unable to update p:datatable cell after ajax call on another cell's cellEdit event

Question

In my cell edit event in my backing bean, if the cell value is changed I want to update the value of another column as well of the datatable. The value is getting correctly set in my list object but is not getting reflected in my datatable. I tried updating using the datatable using RequestContext as well, but still the list is not getting refreshed. What am I doing wrong? Should I call any row event for this change?

Code snippet :

Bean

@Named("editView")
@ViewScoped

public class EditTableView implements Serializable {


    private List<Cars> carList;
    private List<String> brands;

    @PostConstruct
    public void init() {

        brands = new ArrayList<String>();
        brands.add("BMW");
        brands.add( "Mercedes");
        brands.add("Volvo");
        brands.add("Audi");
        brands.add("Renault");
        brands.add("Fiat");
        brands.add("Volkswagen");
        brands.add("Honda");
        brands.add("Jaguar");
        brands.add( "Ford");
        brands.add("Maruti Suzuki");

        carList = new ArrayList<Cars>();
        modifiedList = new ArrayList<Cars>();
        Cars car =new Cars();
        car.setCarId(1);
        car.setBrand("BMW");
        car.setColor("Grey");
        car.setModelNumber("2323");
        car.setSelfDriven("Y");
        car.setYear("1980");
        car.setStatus("");

        carList.add(car);               
    }




    public void onCellEdit(CellEditEvent event) {

        int rowIndex = event.getRowIndex();
        Cars car = null;
        LOGGER.info("Car Edited"+rowIndex);

        Object oldValue = event.getOldValue();
        Object newValue = event.getNewValue();

        DataTable carTable = (DataTable)   event.getSource();
        String index = carTable.getClientId(FacesContext.getCurrentInstance());
        LOGGER.info(index);

        if(newValue != null && !newValue.equals(oldValue)) {
            LOGGER.info("Cell Changed Old: " + oldValue + ", New:" + newValue);
            car=carList.get(rowIndex);    
            carList.get(event.getRowIndex()).setStatus("Changed");      
            modifiedList.add(car);
        }
    }    
}

xhtml

<h:form id="cellEditForm">

    <p:dataTable id="cars" var="car" value="#{editView.carList}"
        editable="true" editMode="cell" widgetVar="cellCars">
        <f:facet name="header">Cell Editing</f:facet>

        <p:ajax event="cellEdit" listener="#{editView.onCellEdit}"
            update=":cellEditForm:cars" />

        <p:column headerText="Id">
            #{car.carId}
        </p:column>

        <p:column headerText="Model Name" style="background-color:yellow">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.modelNumber}" />
                </f:facet>
                <f:facet name="input">
                    <p:inputText id="modelInput" value="#{car.modelNumber}"
                        style="width:96%" />
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Year" style="background-color:yellow">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.year}" />
                </f:facet>
                <f:facet name="input">
                    <p:inputText value="#{car.year}" style="width:96%" label="Year" />
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Brand" style="background-color:yellow">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.brand}" />
                </f:facet>
                <f:facet name="input">
                    <h:selectOneMenu value="#{car.brand}" style="width:100%">
                        <f:selectItems value="#{editView.brands}" var="man"
                            itemLabel="#{man}" itemValue="#{man}" />
                    </h:selectOneMenu>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Self Driven" style="background-color:yellow">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.selfDriven}" />
                </f:facet>
                <f:facet name="input">
                    <p:inplace>
                        <p:inputText value="#{car.selfDriven}" />
                    </p:inplace>
                </f:facet>
            </p:cellEditor>
        </p:column>

        <p:column headerText="Color" style="background-color:yellow">
            <p:cellEditor>
                <f:facet name="output">
                    <h:outputText value="#{car.color}" />
                </f:facet>
                <f:facet name="input">
                    <p:inputText value="#{car.color}" style="width:96%" label="Color" />
                </f:facet>
            </p:cellEditor>
        </p:column>


        <p:column>
            <h:outputText value="#{car.status}" id="statusLabel"></h:outputText>

        </p:column>
    </p:dataTable>

</h:form>

Answer 1

I used jquery eventually. Got the index of the updated row and called jquery function from my bean.

RequestContext requestContext = RequestContext.getCurrentInstance();
String call = "updateCell(" + event.getRowIndex() + ")";
requestContext.execute(call);

Jquery code

function updateCell(i) {
   var index =  "cellEditForm:cars:"+i+":statusLabel";  
   document.getElementById(index).innerHTML="Changed";
}

Answer 2

OmniFaces has a great util for this, called 'Ajax'

A StackOverflow post about this shows how to use it: How to use OmniFaces Ajax.updateColumn() or Ajax.updateRow() via p:ajax

Answer 3

Update form not table or put table in panel and update panel.

to be safe

<h:form id="cellEditForm">
<p:panel id="something" styleclass="pero">
   <p:dataTable id="cars

update="@(.pero)"

be sure to put id on panel because class update will search for that id and use it. This solution is because i don't know rest of the code and it is one that will work on any code.