Issue with resetting datagrid in primefaces - jsf

Question

I am new to JSF and I am working on an application where a group of parameters placed in a datagrid can be either added or removed. Below is the initial level of screenshot:
When I click on RemoveInvoice of any of the existing list, the list present after that box should automatically take the position of the removed list. But in my case, a blank section is getting displayed as per the below screenshot:
My jsf code looks like:
<div class="listing_Table">
<p:dataGrid columns="3" layout="grid" id="addInvoicePanel"
value="#{hrOrganizationPaymentDetailBean.invoiceDetailTOList}"
var="invoiceDetail">
<p:panelGrid rendered="#{!invoiceDetail.delete}">
<div class="Table">
<div class="Row">
<div class="Cell">
<p:outputLabel>
<span class="redColor">*</span>InvoiceType:</p:outputLabel>
</div>
<div class="Cell">
<p:selectOneMenu value="#{invoiceDetail.invoiceTypeID}"
filter="true" filterMatchMode="contains" required="true"
requiredMessage="InvoiceType is required">
<f:selectItems
value="#{hrOrganizationPaymentDetailBean.newInvoiceTypeList}"
var="list" itemValue="#{list.typeId}"
itemLabel="#{list.type}" />
</p:selectOneMenu>
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel>
<span class="redColor">*</span>InvoiceNumber:</p:outputLabel>
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.invoiceNumber}"
required="true" requiredMessage="InvoiceNumber is required" />
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel>
<span class="redColor">*</span>InvoiceAmount:</p:outputLabel>
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.invoiceAmount}"
required="true" requiredMessage="InvoiceAmount is required">
<f:convertNumber pattern="#0.00" />
</p:inputText>
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel>InvoicePath:</p:outputLabel>
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.invoicePath}" />
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel>
<span class="redColor">*</span>InvoiceDate:</p:outputLabel>
</div>
<div class="Cell">
<p:calendar id="invoiceDate"
value="#{invoiceDetail.invoiceDate}" showOn="button"
readonlyInput="true" timeZone="IST" pattern="dd-MMM-yyyy"
required="true" requiredMessage="InvoiceDate is required" />
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel value="ServiceTax:" />
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.serviceTax}">
<f:convertNumber pattern="#0.00" />
</p:inputText>
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel value="TDS:" />
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.tDS}">
<f:convertNumber pattern="#0.00" />
</p:inputText>
</div>
</div>
<div class="Row">
<div class="Cell"></div>
<div class="Cell">
<p:commandButton styleClass="Submit_button"
value="Remove Invoice"
action="#{hrOrganizationPaymentDetailController.removeInvoiceDetail(invoiceDetail)}"
update=":EditOrganizationPaymentDetailForm:addInvoicePanel" />
</div>
</div>
</div>
</p:panelGrid>
</p:dataGrid>
</div>
And my backend java code is:
public void removeInvoiceDetail(InvoiceDetailTO invoiceDetailTO)
{
List<InvoiceDetailTO> invoiceDetailTOList = null;
List<Long> deletedInvoiceDetail = null;
try {
invoiceDetailTOList = hrOrganizationPaymentDetailBean.getInvoiceDetailTOList();
deletedInvoiceDetail = hrOrganizationPaymentDetailBean.getDeletedInvoiceDetailID();
if (deletedInvoiceDetail != null && !deletedInvoiceDetail.isEmpty()) {
} else {
deletedInvoiceDetail = new ArrayList<Long>();
}
for (InvoiceDetailTO detailTO : invoiceDetailTOList) {
if ((detailTO.getInvoiceDetailID() != null && detailTO.getInvoiceDetailID().equals(invoiceDetailTO.getInvoiceDetailID()))
|| (detailTO.getUniqueID() != null && detailTO.getUniqueID().equals(invoiceDetailTO.getUniqueID()))) {
detailTO.setDelete(true);
if (invoiceDetailTO.getInvoiceDetailID() != null) {
deletedInvoiceDetail.add(invoiceDetailTO.getInvoiceDetailID());
}
}
}
hrOrganizationPaymentDetailBean.setInvoiceDetailTOList(invoiceDetailTOList);
hrOrganizationPaymentDetailBean.setDeletedInvoiceDetailID(deletedInvoiceDetail);
} catch (Exception e) {
LOGGER_.error("", e);
}
}
Please advise where I am making a mistake?

Answer 1

The problem is in <p:panelGrid rendered="#{!invoiceDetail.delete}">. Even with rendered="false" cell won't be removed from html page after rendering. If you open debugger in your browser (press F12 for Mozilla or Chrome) you can find empty cell there <td class="ui-datagrid-column"></td>. So you need to remove deleted item from your #{hrOrganizationPaymentDetailBean.invoiceDetailTOList} and update dataGrid.