Datatable with Rowexpansion Editable not Update - Primefaces

Asked

Viewed 611 times

1

I have a DataTable which expands the line into a DataTable editable, in the expansion it is possible to add items, by the button "+ Item", everything is working correctly, but I cannot update the table, making it as soon as an item is added, it is already available for editing inside the RowExpansion.

The way it is the user has to click the amount of times he wants in "+ Item", save, reload and then the items appear to be edited.

Another little problem you have is that one of the expansion columns is a SelectOneMenu, and it’s not visible, only when I click on the cell to edit does it appear.

Bean

@SuppressWarnings("serial")
@ManagedBean
@ViewScoped
public class ProcessamentoBean implements Serializable{

    private OrdemDeServico selectedODS;
    private Item item;
    private List<Produto> produtos;
    private List<OrdemDeServico> listaODS;
    private List<Item> listaItens;


    public OrdemDeServico getSelectedODS() {
        return selectedODS;
    }
    public void setSelectedODS(OrdemDeServico selectedODS) {
        this.selectedODS = selectedODS;
    }
    public Item getItem() {
        return item;
    }
    public void setItem(Item item) {
        this.item = item;
    }
    public List<Produto> getProdutos() {
        return produtos;
    }
    public void setProdutos(List<Produto> produtos) {
        this.produtos = produtos;
    }
    public List<OrdemDeServico> getListaODS() {
        return listaODS;
    }
    public void setListaODS(List<OrdemDeServico> listaODS) {
        this.listaODS = listaODS;
    }
    public List<Item> getListaItens() {
        return listaItens;
    }
    public void setListaItens(List<Item> listaItens) {
        this.listaItens = listaItens;
    }

    @PostConstruct
    public void listar(){
        try {
            OrdemDeServicoDAO odsDAO = new OrdemDeServicoDAO();
            listaODS = odsDAO.buscarProcessamneto();

        }catch (RuntimeException erro){
            Messages.addGlobalError("Ocorreu um erro ao listar as Ordens de Serviço");
            erro.printStackTrace();
        }
    }

    public void onRowToggle(ToggleEvent event) {

        selectedODS = (OrdemDeServico) event.getData();
        listaItens = new ArrayList<Item>();

        ItemDAO itemDAO = new ItemDAO();
        listaItens = itemDAO.buscarPorODS(selectedODS.getCodigo());        

        ProdutoDAO produtoDAO = new ProdutoDAO();
        produtos = produtoDAO.buscarPorODS(selectedODS.getCliente());              
    }

    public void maisItem() {
        try{
            item = new Item();
            item.setOdsID(selectedODS);
            item.setItemNum(listaItens.size()+1);
            item.setMultiplicador(1);
            item.setProdutoID(produtos.get(0));
            if (item.getProdutoID().getImpresso()){
                item.setImpresso('N');
            } else{
                item.setImpresso('-');              
            }
            if (item.getProdutoID().getEnvelopado()){
                item.setEnvelopado('N');
            } else{
                item.setEnvelopado('-');                
            }
            if (item.getProdutoID().getGrampeado()){
                item.setGrampeado('N');;
            } else{
                item.setGrampeado('-');             
            }       

            listaItens.add(item);           
        }catch (RuntimeException erro){
            Messages.addGlobalError("Selecione uma ordem de serviço.");
            erro.printStackTrace();
        }           
    }   

    public void menosItem() {
        try{    
            listaItens.remove(listaItens.lastIndexOf(item));            
        }catch (RuntimeException erro){
            Messages.addGlobalError("Não há itens para serem removidos.");
            erro.printStackTrace();
        }
    }       

    public void itemSalvar() {
        try{
            ItemDAO itemDAO = new ItemDAO();

            for (Item i:listaItens){
                itemDAO.merge(i);               
            }

            listaItens = new ArrayList<Item>();

            Messages.addGlobalInfo("Itens salvos com sucesso!");
        }catch (RuntimeException erro){
            Messages.addGlobalError("Ocorreu um erro ao salvar os itens.");
            erro.printStackTrace();
        }
    }   
}

xhtml

<ui:define name="conteudo">
    <h:form id="formODS">
        <p:growl id="msgs" showDetail="true" />
        <p:dataTable id="tabela" emptyMessage="Não há nada para ser processado."
            value="#{processamentoBean.listaODS}" var="ods" 
            rowKey="#{ods.codigo}" rowExpandMode="single" widgetVar="processamento">

            <p:ajax event="rowToggle" listener="#{processamentoBean.onRowToggle}" update="formODS:tabela"/>

            <f:facet name="header">
                <p:commandButton value="+ Item" actionListener="#{processamentoBean.maisItem()}"
                    update=":mensagem formODS:tabela:expanded"/>

                <p:commandButton value="- Item" actionListener="#{processamentoBean.menosItem}"
                    update=":mensagem :formODS:tabela">
                </p:commandButton>

                <p:commandButton value="Salvar" actionListener="#{processamentoBean.itemSalvar}"
                update=":mensagem :formODS:tabela">
                </p:commandButton>
            </f:facet>

            <p:column width="2">
                <p:rowToggler/>
            </p:column>

            <p:column headerText="OS Nº" width="10" style="text-align:center">
                <h:outputText value="#{ods.codigo}" />
            </p:column>

            <p:column headerText="Entrada" width="15" style="text-align:center">
                <h:outputText value="#{ods.dataEntradaFormatada}" />
            </p:column>

            <p:column headerText="Cliente" width="30" style="text-align:center">
                <h:outputText value="#{ods.cliente.nomeInterno}" />
            </p:column>

            <p:column headerText="Produto" width="20" style="text-align:center">
                <h:outputText value="#{ods.produto}" />
            </p:column>

            <p:column headerText="Quantidade" width="20" style="text-align:center">
                <h:outputText value="#{ods.quantidadeFormatada}" />
            </p:column>

            <p:column headerText="Multiplicador" width="20" style="text-align:center">
                <h:outputText value="" />
            </p:column>             

            <p:column headerText="Observações" width="100">
                <h:outputText value="#{ods.observacao}" />
            </p:column>

            <p:rowExpansion>
                <p:dataTable id="expanded" emptyMessage="Clique em + Item para adicionar itens" editable="true" editMode="cell" 
                    value="#{processamentoBean.listaItens}" var="item" styleClass="processamentoExpanded" >

                    <p:column width="30" style="text-align:center">
                        <h:outputText value="#{item.itemFormatado}" />
                    </p:column>

                    <p:column headerText="Produto" width="20" style="text-align:center">
                       <p:cellEditor>
                           <f:facet name="output">
                                <h:outputText value="#{processamentoBean.item.produtoID.nomeProduto}"
                                converter="omnifaces.SelectItemsConverter" />
                           </f:facet>
                           <f:facet name="input">   
                                <h:selectOneMenu value="#{processamentoBean.item.produtoID.nomeProduto}" 
                                converter="omnifaces.SelectItemsConverter">
                                   <f:selectItems value="#{processamentoBean.produtos}" var="produto" 
                                   itemLabel="#{produto.nomeProduto}" itemValue="#{produto}" />
                               </h:selectOneMenu>
                           </f:facet>
                       </p:cellEditor>              
                    </p:column>

                    <p:column width="20" style="text-align:center">
                        <p:cellEditor>
                            <f:facet name="output"> <h:outputText value="#{item.quantidade}" /> </f:facet>
                            <f:facet name="input"> <p:inputText value="#{item.quantidade}" style="width:30%" /> </f:facet>
                        </p:cellEditor>
                    </p:column>

                    <p:column width="20" style="text-align:center">
                        <p:cellEditor>
                            <f:facet name="output"> <h:outputText value="#{item.multiplicador}" /> </f:facet>
                            <f:facet name="input"> <p:inputText value="#{item.multiplicador}" style="width:30%" /> </f:facet>
                        </p:cellEditor>
                    </p:column>
                </p:dataTable>              
            </p:rowExpansion>
        </p:dataTable>
    </h:form>

    <script type="text/javascript">
            $(document).ready(function() {
            rowExpansion(PF('processamento'));
         });

         function rowExpansion(dataTable) {
               var $this = dataTable;
               $this.tbody.children('tr').css('cursor', 'pointer')
               $this.tbody.off('dblclick.datatable-expansion', '> tr')
                  .on('dblclick.datatable-expansion', '> tr', null, function() {
                     $this.collapseAllRows();
                     $this.toggleExpansion($(this).find('div.ui-row-toggler'));
                   });
        }
    </script>   

</ui:define>

Someone can help me??

  • Try updating the Expansion table on the save button.. <p:commandButton value="Save" actionListener="#{processingBean.itemSalvar}" update=":message :formODS:table formODS:table:Expanded" />

  • First of all, thank you for your attention. So I put it there and save it keeps working the same way, I add x items and they are not listed on time, when I click save it saves the new items from the database and updates the table by collapsing the line that was expanded. I expand it again and the items are now there to edit normally. But the idea was the "+ Item" and the "- Item" to be dynamic, that the guy can put what he needs, edit and save already ready in DB.

1 answer

1

Problems solved. I will leave the solution if someone comes to have the same doubt.

To update the datatable inside a rowExpansion inside another datatable I did the following: Buttons:

    <f:facet name="header"> 
        <p:commandButton value="+ Item" actionListener="#{processamentoBean.maisItem}" oncomplete="rc()"/>
        <p:commandButton value="- Item" actionListener="#{processamentoBean.menosItem}" oncomplete="rc()"/>
        <p:commandButton value="Salvar" actionListener="#{processamentoBean.itemSalvar}" update="formODS"/>     
    </f:facet>

And inside the rowExpansion I put the following:

<p:remoteCommand name="rc" update="expanded"/>

As for the problem of selectOneMenu the code that worked this way:

<p:column width="20" style="text-align:center">
    <h:selectOneMenu id="produtoMenu" value="#{item.produtoID}" converter="omnifaces.SelectItemsConverter">
        <f:selectItems value="#{processamentoBean.produtos}" var="produto" itemLabel="#{produto.nomeProduto}" itemValue="#{produto}" />
    </h:selectOneMenu>      
</p:column>
  • It worked!!! But, and where is the javascript function that is called on each button? Since remoteCommand calls a js function..

Browser other questions tagged

You are not signed in. Login or sign up in order to post.