Primefaces cellEditor passing the entire datatable in ajax submit [duplicate] - jsf

Question

This question already has an answer here:
How to decrease request payload of p:ajax during e.g. p:dataTable pagination
(1 answer)
Closed 7 years ago.
I have a datatable in which each row has 24 hour input fields in it. At one point of time there are more than 1000 editable input fields. I noticed that while using p:cellEditor during ajax calls primefaces is submitting the entire datatable. How can I avoid that?
Please find below the code that I have, and also find the comments on each important parts in them.
<!-- Fires the cellEdit event to trigger the validations to happen as user tabs out of the input box -->
<p:ajax event="cellEdit" listener="#{renderValidator.onCellEdit}" update=":#{p:component('globalMessages')}" process="#this" />
<p:column id="hour1" styleClass="col-right col-90">
<f:facet name="header">
<h:outputText value="1" escape="false"/>
</f:facet>
<p:cellEditor >
<f:facet name="output">
<h:outputText value="#{row.amount[0]}" escape="false">
<f:convertNumber maxFractionDigits="3" minFractionDigits="3" maxIntegerDigits="5" />
</h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText id="hour1Input" value="#{row.amount[0]}" maxlength="10" size="10" readonly="#{row.readOnly}" onchange='PowerMeter.setPowerMeterChange()'
styleClass="col-right" valueChangeListener="#{row.setDirtyFlag(true)}" >
<!-- formats data the way its displayed -->
<f:convertNumber maxFractionDigits="3" minFractionDigits="3" maxIntegerDigits="5" />
<!-- validates the input value w.r.t a custom validator -->
<f:validator validatorId="hourlyValueValidator" for="hour1Input" />
<!-- javascript restricting user to input alpha numeric characters -->
<pe:keyFilter testFunction="return PowerMeter.isValidMWH(this, c);" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>

Answer 1

On Ajax requests, JSF sends the data for all input components in the form by default. Even if only one out of 100 components is executed in the partial lifecycle. With PrimeFaces you can alter this behavior by setting partialSubmit to true like this:
<p:ajax partialSubmit="true" event="cellEdit" process="#this"
listener="#{renderValidator.onCellEdit}"
update=":#{p:component('globalMessages')}"/>

Answer 2

Primefaces uses the PrimeFaces.ajax.AjaxUtils.send function to build Ajax requests. To determine what data need to be send to the server it uses jQuery find function and then serializeArray which is used to build a POST requests.
componentPostParams = jqProcess.find(':input').serializeArray();
Unfortunately when the liveScroll attribute is enabled for the <p:DataTable> and there is already a huge amount of data fetched it will process all input controls no matter if <p:cellEditor> have only one input facet visible.
To change this functionality I overrode PrimeFaces.ajax.AjaxUtils.send function in the below form
var pFacesSend = PrimeFaces.ajax.AjaxUtils.send;
PrimeFaces.ajax.AjaxUtils.send = function(cfg) {
if (myCase) {
// Custom send
} else {
pFacesSend(cfg);
}
};
And in myCase I changed additionally serialization from this:
componentPostParams = jqProcess.find(':input').serializeArray();
Into this:
if (!customSerializationCondition) {
componentPostParams = jqProcess.find(':input').serializeArray();
} else {
componentPostParams = jqProcess.find(':input').filter(function() {
return $(this).parent().css('display') !== 'none';
}).serializeArray();
}
This solution builds a POST request that only includes visible input fields and because of my editMode set to cell I have only one <input> visible.
It works for Primefaces v4.0 and should work whenever the input parent tag uses css display attribute to hide input facet in the editor.