Board index JavaServer Faces General Problem with programmatic full functional datatable creation

Problem with programmatic full functional datatable creation

Components, Ajax Framework, Utilities and More.


Posts: 6
Hi,

first at all, I'm very impressed with Primefaces components.

And sorry for my English :)


My problem:

I want to create programmatically a dataTable from the backing Bean like BalusC do in his post http://balusc.blogspot.com/2006/06/usin ... cDatatable, but with the primefaces library. That is, instead HtmlInputText using InputText from primefaces, etc.

I want to use the primefaces library to use the in-cell editing and pagination facilities among others.

This is the code I use (not all code) to create de datatable from the backing bean (create the datatable programmatically):

The xhtml:
...
<h:form id="formulario1">
      <p:dataTable id="dataTable"
         binding="#{backingBean.dynamicDataTable}">
      </p:dataTable>
</h:form>
...


and the method getdynamicDataTable from the backingBean:
public DataTable getDynamicDataTable() {
         dynamicDataTable = new DataTable();
      //dynamicDataTable.setId("id_datatble");
      UIOutput cabec = new UIOutput();
      cabec.setValue("El Detalle");
      dynamicDataTable.getFacets().put("header", cabec);
        dynamicDataTable.setValueExpression("binding",
            createValueExpression("#{backingBeab.dynamicDataTable}", HtmlDataTable.class));
        dynamicDataTable.setValueExpression("value",
            createValueExpression("#{"BackingBean.resultList}", List.class));
        dynamicDataTable.setVar("dataItem");
       
        Class<?>[] parametros = new Class<?>[1] ;
        parametros[0] = RowEditEvent.class;
        dynamicDataTable.setRowEditListener(
           createActionExpression("#{"backingBean.editListener}", String.class, parametros));
        dynamicDataTable.setPaginator(true);       
        dynamicDataTable.setPaginatorPosition("bottom");
        dynamicDataTable.setRows(5);
        dynamicDataTable.setRowsPerPageTemplate("5,10,15,20,50,100");
        dynamicDataTable.setPaginatorTemplate("{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}");
        dynamicDataTable.setTransient(true);

        // Iterate over columns.   
        for (int i = 0; i < DBColumns.length; i++) {
        // Create <h:column>.
            Column column = new Column();
            column.setHeaderText(colAlias[i]);
            dynamicDataTable.getChildren().add(column);
            CellEditor cellEditor = new CellEditor();
            column.getChildren().add(cellEditor);
           

            ValueExpression valueExp = null;
 
            HtmlInputText input = new HtmlInputText();
            cellEditor.getFacets().put("input", input);
               String convClass = (resultList.get(0).getLista().get(i).getClass().getName());
               try {
               valueExp = createValueExpression("#{dataItem.lista["+i+"]}", Class.forName(convClass));
            } catch (ClassNotFoundException e) {            
               e.printStackTrace();
            }
               input.setValueExpression("value", valueExp);
               convClass = convClass.substring(convClass.lastIndexOf(".")+1);
               if (convClass.equals("Integer")){
            input.setConverter(integerC);   
            }else{
            input.setConverter(floatC);
            }
           
            HtmlOutputText output = new HtmlOutputText();
            cellEditor.getFacets().put("output", output);                    
            output.setValueExpression("value", valueExp);
       
        }
        //The editing column
        Column column2 = new Column();       
        column2.setHeaderText("Editar");
        column2.getChildren().add(new RowEditor());       
        dynamicDataTable.getChildren().add(column2);
}


When I use this solution, I see that the datatable is created perfectly and I can change the page without problem, but the problem comes when I edit a row:

I click on the pencil icon and it shows the input fields in this row, then I change one field value and click the V mark. But in this moment I see that the datatable sends the same AJAX request as columns is displaying. This could be because when I see the html code with firebug the rows of the table are created with the id, and I don't know why (the encodeAll method from UIComponentBase possibly??), and the javascript use the id of the row to send the AJAX requests. The other problem that comes it that the send value of the fields correspond with the value of the previous field, unless from the first that is the correct value.

May you know why happens this behauvior?

If I do it all from the xhtml the components works without problems. But I want to do it programmmatically beacause I don't know the number of columns it will to have, and I want to apply converters an valitadors dynamically.

Which is the difference from doing it from the backing bean (programmatically) and doing directly from the xhtml with tags?

Why do the datatable works when is created using tags and not when is creeated from the backing bean?

Somebody can help me with this issue?
Last edited by 4l3x on 26 Aug 2011, 15:37, edited 1 time in total.
Primefaces 2.2.1/ Migrating to 3.0M4
MyFaces 2.1.2
Tomcat 7.0.14

Oleg User avatar
Expert Member

Posts: 3715
Location: Russia, Siberia => Germany, Black Forest
But I want to do it programmmatically beacause I don't know the number of columns it will to have

There is a tag p:columns to create column dynamically. Unfortunately, it doesn't work smoothly with sorting / filtering and input / action source components inside. If you don't need editable components inside datatable and sorting / filtering, you can use p:columns.
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/


Posts: 6
Thanks for the answer Oleg, but I need editable components inside datatable.

I've also done some similar with this piece of code and works fine. I use core tags (xmlns:c="http://java.sun.com/jsp/jstl/core") from JSP to get it working.
<h:form id="formulario2">
      <p:dataTable value="#{cc.attrs.backingBean.resultList}" var="dataItem"
         id="tabla1" rowEditListener="#{cc.attrs.backingBean.editListener}"
         paginator="true" rows="10"
         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
         rowsPerPageTemplate="5,10,15" selectionMode="single"
         rowSelectListener="#{cc.attrs.backingBean.processDataItem}">
         <c:forEach items="#{cc.attrs.backingBean.colAlias}" var="Ncolumna"
            varStatus="colStatus">
            <p:column headerText="#{Ncolumna}" style="width:100px">
               <p:cellEditor>
                  <f:facet name="output">
                     <h:outputText value="#{dataItem.lista[colStatus.index]}" />
                  </f:facet>
                  <f:facet name="input">
                     <h:inputText value="#{dataItem.lista[colStatus.index]}"
                           style="width:100%">
                     <!-- <f:converter converterId="#{dataItem.lista[colStatus.index]}.class.name" />   -->
                           </h:inputText>
                        </f:facet>
               </p:cellEditor>
            </p:column>
         </c:forEach>
         <p:column headerText="Editar" style="width:50px">
            <p:rowEditor />
         </p:column>

      </p:dataTable>
   </h:form>


Using this solution all the options that I need (editable rows, pagination and selectable rows) are avaliable and working without problem. But I need to insert converters in a way that I don't know previously wich type of converter will need and I want to insert they from the backing bean. I want to insert converters dynamically.

Why can't I made components programmatically from the backing bean? (Somebody with deep knowledge of JSF)

What other solution can I take to insert converters dynamically?
Primefaces 2.2.1/ Migrating to 3.0M4
MyFaces 2.1.2
Tomcat 7.0.14


Return to General