Currently I am facing a datatable rendering issue.
I have a datatable with order details with row expansion. When I click on the expansion arrow it shows line item details in another datatable. Also have a + button to add new order and one more button inside line item table to add more line items.
[![enter image description here][1]][1]
When I click on row edit under the line item table (This is under row expansion) the row open it edit mode,but when I click on tick icon the same lineitem updated but one duplicate lineitem is shown with parent table(order) and existing parrent linetable disappeard.But when I refresh the page this duplicate row is removed.
[![enter image description here][2]][2]
[![enter image description here][3]][3]
[![enter image description here][4]][4]
After clicking the arrow it appears like this
[![enter image description here][5]][5]
Is this a know issue in primefaces 11.Is the row expansion is only for view purpose?
XHTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>PrimeFaces Test</title>
<h:outputScript name="test.js"/>
<h:outputStylesheet name="test.css"/>
</h:head>
<h:body>
<h1>#{testView.string}</h1>
<h:form id="form">
<div class="card">
<h5>Row Editing</h5>
<p:dataTable id="order" var="order" value="#{mainBean.orderVOs}"
editable="true" style="margin-bottom:20px" styleClass="myclass"
rowKey="#{order.orderNo}" rowIndexVar="orderIndex" showGridlines="true">
<p:ajax event="rowEdit" listener="#{mainBean.onRowEdit(order)}"
update=":form:order"/>
<p:ajax event="rowEditCancel"
listener="#{mainBean.onRowCancel(order)}" update=":form:order"/>
<p:column style="width:2rem">
<p:rowToggler/>
</p:column>
<p:column style="width:6rem">
<f:facet name="header">
<p:commandButton value="+"
styleClass="rounded-button ui-button-plus"
actionListener="#{mainBean.addOrder()}" update="order"
oncomplete="editLastDatatableRow();"/>
</f:facet>
<p:rowEditor editTitle="Edit Row" cancelTitle="Cancel Edit"
saveTitle="Save Row"/>
</p:column>
<p:column headerText="OrderNo">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{order.orderNo}"/>
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput" value="#{order.orderNo}"
style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="AddressLine1">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{order.addressLine1}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{order.addressLine1}" style="width:100%"
label="Name"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="GrandTotal">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{order.totalAmt}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{order.totalAmt}" style="width:100%"
label="Name"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:rowExpansion>
<div class="card">
<h5>Row Editing</h5>
<p:dataTable id="lineItem" var="line" value="#{order.lineItems}"
editable="true" style="margin-bottom:20px"
rowKey="#{ineItem.productDescription}" rowIndexVar="lineIndex"
styleClass="myClass${orderIndex}" size="small" showGridlines="true">
<p:ajax event="rowEdit"
listener="#{mainBean.onRowEditLine(order,line)}"
update="form:order:${orderIndex}:lineItem form:order"/>
<p:ajax event="rowEditCancel"
listener="#{mainBean.onRowCancelLine(order,line)}"
update="form:order:${orderIndex}:lineItem"/>
<p:column style="width:6rem">
<f:facet name="header">
<p:commandButton value="+"
styleClass="rounded-button ui-button-plus"
actionListener="#{mainBean.addLine(order)}"
update="form:order:${orderIndex}:lineItem"
oncomplete="editLastDatatableRowLine(${orderIndex});"/>
</f:facet>
<p:rowEditor editTitle="Edit Row" cancelTitle="Cancel Edit"
saveTitle="Save Row"/>
</p:column>
<p:column headerText="productDescription">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{line.productDescription}"/>
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput"
value="#{line.productDescription}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="quantity">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{line.quantity}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{line.quantity}" style="width:100%"
label="Name"/>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</div>
</p:rowExpansion>
</p:dataTable>
</div>
<script type="text/javascript">
function editLastDatatableRow() {
jQuery('.myclass .ui-datatable-data tr').first().find(
'span.ui-icon-pencil').each(function() {
jQuery(this).click()
});
}
function editLastDatatableRowLine(index) {
jQuery('.myClass'+index+" "+ '.ui-datatable-data tr').first().find(
'span.ui-icon-pencil').each(function() {
jQuery(this).click()
});
}
</script>
</h:form>
</h:body>
</html>
Bean
package org.primefaces.test;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
@Named
@ViewScoped
public class MainBean implements Serializable {
/**
*
*/
private static final long serialVersionUID = 7536893702695858952L;
List<OrderVO> orderVOs;
private List<LineVO> lineItems;
@PostConstruct
public void init() {
orderVOs = new ArrayList<OrderVO>();
lineItems = new ArrayList<LineVO>();
LineVO l1 = new LineVO("desc1", "d", "s", "s", "d");
lineItems.add(l1);
OrderVO orderVO = new OrderVO();
orderVO.setOrderNo("10000");
orderVO.setAddressLine1("address1");
orderVO.setLineItems(lineItems);
orderVOs.add(orderVO);
}
public List<LineVO> getLineItems() {
return lineItems;
}
public void setLineItems(List<LineVO> lineItems) {
this.lineItems = lineItems;
}
public List<OrderVO> getOrderVOs() {
return orderVOs;
}
public void setOrderVOs(List<OrderVO> orderVOs) {
this.orderVOs = orderVOs;
}
public void onRowEdit(OrderVO orderVO) {
}
public void onRowCancel(OrderVO orderVO, LineVO lineVO) {
}
public void onRowEditLine(OrderVO orderVO, LineVO lineVO) {
}
public void onRowCancelLine(OrderVO orderVO, LineVO lineVO) {
}
public void addOrder() {
OrderVO orderVO = new OrderVO();
orderVOs.add(0, orderVO);
}
public void addLine(OrderVO orderVO) {
LineVO lineVO = new LineVO("dd", "jjj", "kk", "ooo", "iiiii");
if (orderVO.getLineItems() == null) {
orderVO.setLineItems(new ArrayList<LineVO>());
}
orderVO.getLineItems().add(0, lineVO);
}
}
Reproucable code present here .github.com/akhiltm20/primefaces-rowExpansion_innerTableIssue [1]: https://i.stack.imgur.com/LaiIw.png [2]: https://i.stack.imgur.com/GsK5J.png [3]: https://i.stack.imgur.com/YYrcM.png [4]: https://i.stack.imgur.com/9IvTZ.png [5]: https://i.stack.imgur.com/BwA81.png
