Nested fieldsets not maintaining toggle state

UI Components for JSF
Post Reply
jfiallo
Posts: 11
Joined: 02 Aug 2013, 22:06

02 Aug 2013, 22:42

Hello all and thanks in advance for your time,

I'm having an issue when nesting a fieldset control inside a datagrid.

When I don't set the collapsed property the state of the control it's not being maintained after a postback. Below is my code for this scenario:

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:p="http://primefaces.org/ui">
<h:body>
<ui:composition>
<div style="overflow: auto;">
<p:dataGrid var="primary" value="#{dw.primary}" columns="1" paginator="false" rowIndexVar="rowNumber" style="border: none;">
	<table>
		<tr>
			<td style="vertical-align: top;">
				<p:commandButton rendered="#{dw.selectable}" value="" icon="ui-icon-arrowreturnthick-1-e" action="#{container.dwRowSelected(dw)}" style="font-size: 10px; width: 29px; height: 27px;" ajax="false">
					<f:setPropertyActionListener target="#{dw.currentRow}" value="#{rowNumber}"/>
				</p:commandButton> 
				<p:spacer rendered="#{dw.selectable}" width="10px"/>
			</td>
			<td>
				<table>
					<tr>
						<td style="vertical-align: bottom;">
							<p:outputLabel value="#{primary['LOCATION'].value}"/>
						</td>
						<td style="vertical-align: bottom;">
							<p:outputLabel value="#{primary['LOCATION_DESCRIPTION'].value}"/>
						</td>
					</tr>
				</table>
				<table>
					<tr>
						<td style="vertical-align: bottom;">
							<p:fieldset legend="Site(s)" toggleable="true" style="border: none;">
								<div style="overflow: auto;">
									<p:dataGrid var="dw_wo_tree_test_site" value="#{primary['dw_wo_tree_test_site'].dataWindow.primary}" columns="1" paginator="false" rowIndexVar="rowNumberSite">
										<table>
											<tr>
												<td style="vertical-align: top;">
													<p:commandButton  rendered="#{primary['dw_wo_tree_test_site'].dataWindow.selectable}" value="" icon="ui-icon-arrowreturnthick-1-e" action="#{container.dwRowSelected(primary['dw_wo_tree_test_site'].dataWindow)}" style="font-size: 10px; width: 29px; height: 27px;" ajax="false">
														<f:setPropertyActionListener target="#{primary['dw_wo_tree_test_site'].dataWindow.currentRow}" value="#{rowNumberSite}"/>
													</p:commandButton> 
													<p:spacer rendered="#{primary['dw_wo_tree_test_site'].dataWindow.selectable}" width="10px"/>
												</td>
												<td>
													<table>
														<tr>
															<td style="vertical-align: bottom;">
																<p:outputLabel value="#{dw_wo_tree_test_site['SITE'].value}"/>
															</td>
															<td style="vertical-align: bottom;">
																<p:outputLabel value="#{dw_wo_tree_test_site['SITE_DESCRIPTION'].value}"/>
															</td>
														</tr>
													</table>
													<table>
														<tr>
															<td style="vertical-align: bottom;">
																<p:fieldset legend="WO(s)" toggleable="true" style="border: none;">
																	<div style="overflow: auto;">
																		<p:dataGrid var="dw_wo_tree_test_wo" value="#{dw_wo_tree_test_site['dw_wo_tree_test_wo'].dataWindow.primary}" columns="1" paginator="false" rowIndexVar="rowNumberWo">
																			<table>
																				<tr>
																					<td style="vertical-align: top;">
																						<p:commandButton rendered="#{dw_wo_tree_test_site['dw_wo_tree_test_wo'].dataWindow.selectable}" value="" icon="ui-icon-arrowreturnthick-1-e" action="#{container.dwRowSelected(dw_wo_tree_test_site['dw_wo_tree_test_wo'].dataWindow)}" style="font-size: 10px; width: 29px; height: 27px;" ajax="false">
																							<f:setPropertyActionListener target="#{dw_wo_tree_test_site['dw_wo_tree_test_wo'].dataWindow.currentRow}" value="#{rowNumberWo}"/>
																						</p:commandButton> 
																						<p:spacer rendered="#{dw_wo_tree_test_site['dw_wo_tree_test_wo'].dataWindow.selectable}" width="10px"/>
																					</td>
																					<td>
																						<table>
																							<tr>
																								<td style="vertical-align: bottom;">
																									<p:outputLabel value="#{dw_wo_tree_test_wo['WO'].value}"/>
																								</td>
																								<td style="vertical-align: bottom;">
																									<p:outputLabel value="#{dw_wo_tree_test_wo['WO_DESCRIPTION'].value}"/>
																								</td>
																								<td style="vertical-align: bottom;">
																									<p:outputLabel value="A/C: "/>
																									<p:outputLabel value="#{dw_wo_tree_test_wo['AC'].value}"/>
																								</td>
																							</tr>
																						</table>
																					</td>
																				</tr>
																			</table>
																		</p:dataGrid>
																	</div>
																</p:fieldset>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</table>
									</p:dataGrid>
								</div>
							</p:fieldset>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</p:dataGrid>
</div>
</ui:composition>
</h:body>
</html>
This was my first go at it, after running into this issue I tried setting the collapsed from the backing bean containing my data for the datagrid and subsequent nested fieldsets (it's fairlly complex), I also added an ajax event handler to update the collapsed property on the backing data on toggle of each fieldset. This didn't work either and placing a debug breakpoint in the getter function for the collapsed property showed that it gets called the first time the page is loaded but not after subsequent postbacks, so even though the collapsed property is update properly on the backing data (I checkd this), the control doesn't updated his based on this value after post back. Below is my modified code:

html

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:p="http://primefaces.org/ui">
<h:body>
<ui:composition>
<div style="overflow: auto;">
<p:dataGrid var="primary" value="#{dw.primary}" columns="1" paginator="false" rowIndexVar="rowNumber" style="border: none;">
	<table>
		<tr>
			<td style="vertical-align: top;">
				<p:commandButton rendered="#{dw.selectable}" value="" icon="ui-icon-arrowreturnthick-1-e" action="#{container.dwRowSelected(dw)}" style="font-size: 10px; width: 29px; height: 27px;" ajax="false">
					<f:setPropertyActionListener target="#{dw.currentRow}" value="#{rowNumber}"/>
				</p:commandButton> 
				<p:spacer rendered="#{dw.selectable}" width="10px"/>
			</td>
			<td>
				<table>
					<tr>
						<td style="vertical-align: bottom;">
							<p:outputLabel value="#{primary['LOCATION'].value}"/>
						</td>
						<td style="vertical-align: bottom;">
							<p:outputLabel value="#{primary['LOCATION_DESCRIPTION'].value}"/>
						</td>
					</tr>
				</table>
				<table>
					<tr>
						<td style="vertical-align: bottom;">
							<p:fieldset legend="Site(s)" toggleable="true" collapsed="#{primary['dw_wo_tree_test_site'].dataWindow.collapsed}" style="border: none;">
								<p:ajax event="toggle" listener="#{primary['dw_wo_tree_test_site'].dataWindow.toggle}" process="@this"/> 
								<div style="overflow: auto;">
									<p:dataGrid var="dw_wo_tree_test_site" value="#{primary['dw_wo_tree_test_site'].dataWindow.primary}" columns="1" paginator="false" rowIndexVar="rowNumberSite">
										<table>
											<tr>
												<td style="vertical-align: top;">
													<p:commandButton  rendered="#{primary['dw_wo_tree_test_site'].dataWindow.selectable}" value="" icon="ui-icon-arrowreturnthick-1-e" action="#{container.dwRowSelected(primary['dw_wo_tree_test_site'].dataWindow)}" style="font-size: 10px; width: 29px; height: 27px;" ajax="false">
														<f:setPropertyActionListener target="#{primary['dw_wo_tree_test_site'].dataWindow.currentRow}" value="#{rowNumberSite}"/>
													</p:commandButton> 
													<p:spacer rendered="#{primary['dw_wo_tree_test_site'].dataWindow.selectable}" width="10px"/>
												</td>
												<td>
													<table>
														<tr>
															<td style="vertical-align: bottom;">
																<p:outputLabel value="#{dw_wo_tree_test_site['SITE'].value}"/>
															</td>
															<td style="vertical-align: bottom;">
																<p:outputLabel value="#{dw_wo_tree_test_site['SITE_DESCRIPTION'].value}"/>
															</td>
														</tr>
													</table>
													<table>
														<tr>
															<td style="vertical-align: bottom;">
																<p:fieldset legend="WO(s)" toggleable="true" collapsed="#{dw_wo_tree_test_site['dw_wo_tree_test_wo'].dataWindow.collapsed}" style="border: none;">
																	<p:ajax event="toggle" listener="#{dw_wo_tree_test_site['dw_wo_tree_test_wo'].dataWindow.toggle}" process="@this"/>
																	<div style="overflow: auto;">
																		<p:dataGrid var="dw_wo_tree_test_wo" value="#{dw_wo_tree_test_site['dw_wo_tree_test_wo'].dataWindow.primary}" columns="1" paginator="false" rowIndexVar="rowNumberWo">
																			<table>
																				<tr>
																					<td style="vertical-align: top;">
																						<p:commandButton rendered="#{dw_wo_tree_test_site['dw_wo_tree_test_wo'].dataWindow.selectable}" value="" icon="ui-icon-arrowreturnthick-1-e" action="#{container.dwRowSelected(dw_wo_tree_test_site['dw_wo_tree_test_wo'].dataWindow)}" style="font-size: 10px; width: 29px; height: 27px;" ajax="false">
																							<f:setPropertyActionListener target="#{dw_wo_tree_test_site['dw_wo_tree_test_wo'].dataWindow.currentRow}" value="#{rowNumberWo}"/>
																						</p:commandButton> 
																						<p:spacer rendered="#{dw_wo_tree_test_site['dw_wo_tree_test_wo'].dataWindow.selectable}" width="10px"/>
																					</td>
																					<td>
																						<table>
																							<tr>
																								<td style="vertical-align: bottom;">
																									<p:outputLabel value="#{dw_wo_tree_test_wo['WO'].value}"/>
																								</td>
																								<td style="vertical-align: bottom;">
																									<p:outputLabel value="#{dw_wo_tree_test_wo['WO_DESCRIPTION'].value}"/>
																								</td>
																								<td style="vertical-align: bottom;">
																									<p:outputLabel value="A/C: "/>
																									<p:outputLabel value="#{dw_wo_tree_test_wo['AC'].value}"/>
																								</td>
																							</tr>
																						</table>
																					</td>
																				</tr>
																			</table>
																		</p:dataGrid>
																	</div>
																</p:fieldset>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</table>
									</p:dataGrid>
								</div>
							</p:fieldset>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</p:dataGrid>
</div>
</ui:composition>
</h:body>
</html>
java portion with the property and the toggle function

Code: Select all

private boolean collapsed = true;

public boolean isCollapsed() {
		return collapsed;
	}

public void setCollapsed(boolean collapsed) {
		this.collapsed = collapsed;
	}

public void toggle() {
		collapsed = !collapsed;
	}
Primefaces 5.0
JSF 2.2
Glassfish 4
Top
jfiallo
Posts: 11
Joined: 02 Aug 2013, 22:06

08 Aug 2013, 20:11

Found a workaround using panels and the 2nd mechanism from my op, it would be nice to have it working with the fieldsets though.
Primefaces 5.0
JSF 2.2
Glassfish 4
Top
Post Reply

Return to “PrimeFaces”

  • Information

  • Who is online

    Users browsing this forum: No registered users and 18 guests