Problem with programmatic full functional datatable creation

UI Components for JSF
Post Reply
4l3x
Posts: 6
Joined: 22 Aug 2011, 11:35

26 Aug 2011, 11:18

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:

Code: Select all

...
<h:form id="formulario1">
		<p:dataTable id="dataTable"
			binding="#{backingBean.dynamicDataTable}">
		</p:dataTable>
</h:form>
...
and the method getdynamicDataTable from the backingBean:

Code: Select all

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

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

26 Aug 2011, 12:18

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 Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

4l3x
Posts: 6
Joined: 22 Aug 2011, 11:35

26 Aug 2011, 15:34

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.

Code: Select all

<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

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 24 guests