In Cell Editing for dynamic columns

[tosh]

Hi,

Im new to JSF(2.1.1-b04) & PrimeFaces (3.0.M1), so far Ive found it all very easy to use and highly recommend it.

Im having a bit of trouble creating an editable datatable with dynamic columns.

Basically Im creating an application that must render data from a database and allow users the ability to edit that data. I have implemented a p:datatable with dynamic colums. The user can choose from approx 100 tables to edit, and they all have different columns. I managed to dynamically create the datatable columns very easily and quickly.

The trouble Im having is enabling the editing facility on the p:columns - is it even possible? I can get it working very easily on a standard p:column tag - so Im not sure if my syntax is wrong or if its just not available.

I hope it is available as its an important part of my application.

My datatable code is like this :

<p:dataTable var="logData" value="#{logEditsBean.nmcsLogData}" >
<p:column headerText="Edit">
<p:rowEditor />
</p:column>
<p:columns value="#{logEditsBean.fieldInfo}"
var="column"
columnIndexVar="colIndex">
<f:facet name="header">
#{column.columnName}
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{logData.logFields[colIndex].value} " />
</f:facet>
<f:facet name="input">
<h:inputText value="#{logData.logFields[colIndex].value}" />
</f:facet>
</p:cellEditor>
</p:columns>
</p:dataTable>

Thanks for your time

[tosh]

Anyone come across this before, or is my question a stupid one that has been answered multiple times?

I have looked for the answer in the forums and google and found nothing other than posts with no replies.

Thanks

[tosh]

ok, I got around it by dynamically creating my columns in a loop. Here is my solution - just in case anyone else hits the same issues I had.

If the cell is editable then I render the p:cellEditor tag, otherwise a standard outputText tag

Code: Select all

			<c:forEach items="#{logEditsBean.fieldInfo}" var="column" varStatus="colLoopStatus">
				<p:column headerText="#{column.columnName}">
					<p:cellEditor rendered="#{column.editable}">
						<f:facet name="output">
							<h:outputText value="#{logData.logFields[colLoopStatus.index].value}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{logData.logFields[colLoopStatus.index].value}"
								style="width:100%" />
						</f:facet>
					</p:cellEditor>
					<h:outputText value="#{logData.logFields[colLoopStatus.index].value}" rendered="#{not column.editable}"/>					
				</p:column>
			</c:forEach>

Thanks

[alankstewart]

Would you please post the contents of your logEditsBean?
Thanks

[colm.mchugh]

Hi Tosh,

What JSF component libs are you using? I am facing a similar problem to you and tried to implement your suggesting using ui:repeat instead of c:foreach. But, the component does not show at all, which is step backwards for me. I'm not using jstl (c:) because I heard there's compatibility problems with PrimeFaces. I'm using html (h:), facelets (ui:), core (f:) and primefaces.

ok, I got around it by dynamically creating my columns in a loop. Here is my solution - just in case anyone else hits the same issues I had.

If the cell is editable then I render the p:cellEditor tag, otherwise a standard outputText tag

Code: Select all

			<c:forEach items="#{logEditsBean.fieldInfo}" var="column" varStatus="colLoopStatus">
				<p:column headerText="#{column.columnName}">
					<p:cellEditor rendered="#{column.editable}">
						<f:facet name="output">
							<h:outputText value="#{logData.logFields[colLoopStatus.index].value}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{logData.logFields[colLoopStatus.index].value}"
								style="width:100%" />
						</f:facet>
					</p:cellEditor>
					<h:outputText value="#{logData.logFields[colLoopStatus.index].value}" rendered="#{not column.editable}"/>					
				</p:column>
			</c:forEach>

Thanks

[lyubomyr.shaydariv]

A good question indeed. I've got a similar problem, and googling the solution led me to this topic too. I tried to make it work just right it's described here, but I couldn't achieve the same results. I'm not sure, but the p:dataTable seem not support the suggested iteration tags (or I could just do something wrong [can't provide my exact code right now 'cause I've reverted it])... I know, this assumption looks stupid, but could anyone confirm or refute that? That would be really appreciated.

A bit more by me on this at StackOverflow: JSF: Using PrimeFaces DataTable to implement a generic table viewer/editor based on the dynamic/repeated columns?

PF: primefaces-3.2.jar

[anasbenz]

Hi,
this is my first post.
To enable row editing with dynamic columns, i added this instruction styleClass="ui-editable-column" to <p:columns tag and it works

[irene_villa]

Please Tosh, help me I need to make this, the cell editable with dynamic columns...for you help Thanks

ok, I got around it by dynamically creating my columns in a loop. Here is my solution - just in case anyone else hits the same issues I had.

If the cell is editable then I render the p:cellEditor tag, otherwise a standard outputText tag

Code: Select all

			<c:forEach items="#{logEditsBean.fieldInfo}" var="column" varStatus="colLoopStatus">
				<p:column headerText="#{column.columnName}">
					<p:cellEditor rendered="#{column.editable}">
						<f:facet name="output">
							<h:outputText value="#{logData.logFields[colLoopStatus.index].value}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{logData.logFields[colLoopStatus.index].value}"
								style="width:100%" />
						</f:facet>
					</p:cellEditor>
					<h:outputText value="#{logData.logFields[colLoopStatus.index].value}" rendered="#{not column.editable}"/>					
				</p:column>
			</c:forEach>

Thanks

[irene_villa]

Hi, sorry find some solutions for this problem, help me thanks

A good question indeed. I've got a similar problem, and googling the solution led me to this topic too. I tried to make it work just right it's described here, but I couldn't achieve the same results. I'm not sure, but the p:dataTable seem not support the suggested iteration tags (or I could just do something wrong [can't provide my exact code right now 'cause I've reverted it])... I know, this assumption looks stupid, but could anyone confirm or refute that? That would be really appreciated.

A bit more by me on this at StackOverflow: JSF: Using PrimeFaces DataTable to implement a generic table viewer/editor based on the dynamic/repeated columns?

PF: primefaces-3.2.jar

[janguela]

Hi,
this is my first post.
To enable row editing with dynamic columns, i added this instruction styleClass="ui-editable-column" to <p:columns tag and it works

Hi anabenz,

I have the same requirements commented in this post (Cell Editing + Dynamic columns) and I have tried your solution but it didn't work for me.

I am using PF v3.5 and when I used the styleClass="ui-editable-column" it is true that it turned my table editable as you mention, BUT, when modifying its cells, it is only updating the first column cells.

This is the code that I am using :

Code: Select all

	<h:form id="form">

		<p:growl id="messages" showDetail="true" />

		<p:contextMenu for="concepts" widgetVar="cMenu">
			<p:menuitem value="Edit Cell" icon="ui-icon-search" onclick="conceptsTable.showCellEditor();return false;" />
			<p:menuitem value="Hide Menu" icon="ui-icon-close" onclick="cMenu.hide()" />
		</p:contextMenu>

		<h:panelGrid id="grid" columns="3" style="margin-bottom:10px">
			<h:outputLabel for="template" value="Template:" style="font-weight:bold" />
			<p:inputText id="template" value="#{quotation.columnTemplate}" size="50" />
			<p:commandButton id="btn" update="concepts" actionListener="#{quotation.updateColumns}" value="Update" process="@parent" />
		</h:panelGrid>

		<p:dataTable id="concepts" var="concept" value="#{quotation.concepts}" filteredValue="#{quotation.filteredConcepts}" editable="true" editMode="cell" widgetVar="conceptsTable">

			<p:ajax event="cellEdit" listener="#{quotation.onCellEdit}" update=":form:messages" />

			<p:columns value="#{quotation.columns}" var="column" sortBy="#{concept[column.property]}" filterBy="#{concept[column.property]}" styleClass="ui-editable-column">
				<f:facet name="header">  
	                #{column.header}  
	            </f:facet>

				<p:cellEditor>
					<f:facet name="output">
						<h:outputText value="#{concept[column.property]}" />
					</f:facet>
					<f:facet name="input">
						<p:inputText value="#{concept[column.property]}" style="width:96%" label="#{column.header}"/>
					</f:facet>
				</p:cellEditor>

			</p:columns>

		</p:dataTable>

	</h:form>

I am also concerned regarding what it is said in the User Guide v3.5 : DataTable -> Dynamic Columns (page 139)

Features like sortBy and filterBy are supported however advanced features like editing is not.

I would greatly appreciate a clarification on this subject.
Thanks,
Jordi