Row Expansion using JSF datatable

[Varshini Priya]

Hi All,

I have a requirement, where there is a datatable with some rows.. Each row will have a '[+]' link. On click of that link, I need to display some details concerning that row. The details of that row should again be displayed in a Datatable. Can you please let me know how to implement the same.

I have the below requirement.

Before expansion, the below data should be displayed.

XX Col1Head Col2Head Col3Head Col4Head
------------------------------------------------------------------
[+] Row1Val1 Row1Val2 Row1Val3 Row1Val4

[+] Row2Val1 Row2Val2 Row2Val3 Row2Val4

After expanding (by clicking the [+] link) the table should look like this

XX Col1Head Col2Head Col3Head Col4Head
------------------------------------------------------------------
[+] Row1Val1 Row1Val2 Row1Val3 Row1Val4

[-] Row2Val1 Row2Val2 Row2Val3 Row2Val4

SubCol1Head SubCol2Head SubCol3Head

SubRow1Val1 SubRow1Val2 SubRow1Val3

[+] Row3Val1 Row3Val2 Row3Val3 Row3Val4


I need to acheive the above using only JSF.Please Help.

Thanks

[Tim Holloway]

You can embed a dataTable in a row of an outer dataTable with no problem. The DataModels for the inner table would simply be a property of the row object of the outer table.

For display-only purposes, that's all it takes.

It gets stickier if you want to be able to sense selection of a row in an inner table, however. The current JSF DataModel implementation doesn't handle that, so you have to kludge it.

[Varshini Priya]

Thanks Tim for the response.

I have tried this. I.e I have tried to embed a datatable in a row of an outer datatable. But the inner datatable does not seem to get rendered on the screen. Please find the code below

<h:dataTable id="multicars" var="car" value="#{tableBean.Model}" rows="5" 
	selection="#{tableBean.selectedCars}" style="width:90%; margin-top:30px" styleClass="review-table"
	headerClass="review-table-header" rowClasses="review-table-odd-row,review-table-even-row" >
	<h:column>
	<f:facet name="header">
	<h:outputText value="Select All" />
	</f:facet>
	<h:selectBooleanCheckbox id="checkbox"  value="#{car.selected}"/>
	</h:column>
	<h:column >
	<f:facet name="header">
	<h:outputText value=" Location"/>
	</f:facet>
	<!-- <a href="JavaScript:doMenu('subdiv');" id="xsubdiv">[+]</a> -->
	<h:outputText value=" #{car.Location}"/>
	</h:column>
	<h:column>
	<f:facet name="header" >
	<h:outputText value="Date"/>
	</f:facet>
	<h:outputText value=" #{car.year}"></h:outputText>
	</h:column>
	<h:column>
	<f:facet name="header">
	<h:outputText value="Code"/>
	</f:facet>
	<h:outputText value="#{car.Code}"></h:outputText>
	</h:column>
	<h:column>
	<f:facet name="header">
	<h:outputText value="Days"/>
	</f:facet>
	<h:inputText id="search" value="#{car.color}" style="width:80%"></h:inputText>
	</h:column>
	<div id="subdiv" > 
         // Child data table inserted after the row  
	<h:dataTable id="subtable" value="#{tableBean.Model}" var="car1" rows="2" selection="#{tableBean.selectedCars}" 
	style="width:90%; margin-top:30px" styleClass="review-table"
	headerClass="review-table-header" rowClasses="review-table-odd-row,review-table-even-row" >
	<h:column>
	<f:facet name="header">
	<h:outputText value="Location"> </h:outputText>
	</f:facet>
	<h:outputText value=" #{car.Location}"/>
	</h:column>
	<h:column>
	<f:facet name="header">
	<h:outputText value="ProductID"> </h:outputText>
	</f:facet>
	<h:outputText value=" #{car.year}"/>
	</h:column>
	<h:column>
	<f:facet name="header">
	<h:outputText value="Description"> </h:outputText>
	</f:facet>
	<h:outputText value=" #{car.year}"/>
	</h:column>
	</h:dataTable>
	 </div> 	
</h:dataTable>

When I try to run the above code, I get the below warning message in the console.

May 9, 2012 6:09:23 PM com.sun.faces.renderkit.html_basic.OutcomeTargetRenderer getNavigationCase
WARNING: JSF1090: Navigation case not resolved for component j_idt71.

Please assist, Thanks

[Tim Holloway]

Where did you get this "selection=" attribute from? It's not a documented feature in JSF.

It would help if you indented your XML so that the structure would be more obvious. One thing I did notice that I don't recommend is that you used a raw HTML "div" tag. Avoid using raw HTML when possible.

Beyond that, put "id=" attributes on all input and output controls (including buttons and links). That way you'll get a more meaningful indication on your error message.

[Varshini Priya]

Hi Tim,

Thanks for the response. As you specified there is no selection attribute in JSF. That was a Typo. Please find the below code that I have written to get the subtable details. I have addressed your comments in the below code. But still the subtable does not seem to get rendered.

<!--Parent Data table-->
	<h:dataTable id="parenttable"   value="#{order.orderList}" var="o"
    		styleClass="order-table"
    		headerClass="order-table-header"
    		rowClasses="order-table-odd-row,order-table-even-row">
    		<h:column id="col1">
    				<f:facet name="header">SelectAll</f:facet>
    				<h:commandButton id="button1"  value="Edit" action="#{o.outcome}" actionListener="#{o.printIt}"></h:commandButton>
    				<!-- <h:selectBooleanCheckbox id="checked" binding="#{o.checked}" ></h:selectBooleanCheckbox> -->  
    		</h:column>
    		<h:column id="col2">
    				<!-- column header -->
    				<f:facet name="header">Order No</f:facet>
    				<!-- row record -->
    				#{o.orderNo}
    		</h:column>
    		<h:column id="col3">
    				<f:facet name="header">Product Name</f:facet>
    				#{o.productName}
    		</h:column>
    		<h:column id="col4">
    				<f:facet name="header">Quantity</f:facet>
    				#{o.qty}
    		</h:column>
    		<!--child datatable-->
		<h:dataTable id="childtable"   value="#{order.orderList}" var="o"
    			styleClass="order-table"
    			headerClass="order-table-header"
    			rowClasses="order-table-odd-row,order-table-even-row">
    		<h:column id="cola">
    				<f:facet name="header">SelectAll</f:facet>
    				<h:commandButton id="button1"  value="Edit" action="#{o.outcome}" actionListener="#{o.printIt}"></h:commandButton>
    				<!-- <h:selectBooleanCheckbox id="checked" binding="#{o.checked}" ></h:selectBooleanCheckbox> -->  
    		</h:column>
    		<h:column id="colb">
    				<!-- column header -->
    				<f:facet name="header">Order No</f:facet>
    				<!-- row record -->
    				#{o.orderNo}
    		</h:column>
    		<h:column id="colc">
    				<f:facet name="header">Product Name</f:facet>
    				#{o.productName}
    		</h:column>
    		<h:column id="cold">
    				<f:facet name="header">Quantity</f:facet>
    				#{o.qty}
    		</h:column>
		</h:dataTable>
	</h:dataTable>

Only the parent table seems to render. The subtable does not seem to render. Am I missing something?? Please help.

Thanks

[Tim Holloway]

Your child dataTable isn't defined inside a cell (column) of the parent dataTable. That means there's no physical location defined to put it, so it doesn't get put anywhere.

[Varshini Priya]

Hi Tim,

Thanks for the response. As I specified in my initial posts, the requirement I have is a row expansion.. For your reference, have mentioned it again below

After expanding (by clicking the [+] link) the table should look like this

XX Col1Head Col2Head Col3Head Col4Head
------------------------------------------------------------------
[+] Row1Val1 Row1Val2 Row1Val3 Row1Val4

[-] Row2Val1 Row2Val2 Row2Val3 Row2Val4

SubCol1Head SubCol2Head SubCol3Head

SubRow1Val1 SubRow1Val2 SubRow1Val3

[+] Row3Val1 Row3Val2 Row3Val3 Row3Val4


When I put the datatable inside the cell(column) of the parent table, it results in column expansion. Which is not my requirement. I wanted the child datatable to appear after the first row. Please assist.

Thanks

[David samueal]

Varshini Priya wrote:Hi Tim,

Thanks for the response. As I specified in my initial posts, the requirement I have is a row expansion.. For your reference, have mentioned it again below

After expanding (by clicking the [+] link) the table should look like this

XX Col1Head Col2Head Col3Head Col4Head
------------------------------------------------------------------
[+] Row1Val1 Row1Val2 Row1Val3 Row1Val4

[-] Row2Val1 Row2Val2 Row2Val3 Row2Val4

SubCol1Head SubCol2Head SubCol3Head

SubRow1Val1 SubRow1Val2 SubRow1Val3

[+] Row3Val1 Row3Val2 Row3Val3 Row3Val4


When I put the data table inside the cell(column) of the parent table, it results in column expansion. Which is not my requirement. I wanted the child data table to appear after the first row. Please assist.

Thanks

Hello,

You can easily achieve the above requirement through JavaScript. I haven't gone through your code fully, but you can do this with having a single data table itself. Render the plus image in your column on the condition of header/sub header, and hide the rest of the rows through JavaScript. When click on the Plus image call a function by passing the ID, and you can iterate through the rows until you get the next image like Plus or Minus, so you can expand/hide in this fashion.

Thanks,
David

[Tim Holloway]

It looks like you want a 3-column subtable to appear as an extension to selected rows of a 4-column parent table.

That's pretty sticky, especially since (as numerous disgusted people have noted), JSF dataTables don't support rowspan or colspan constructs.

There are 2 possibilities I can think of offhand.

1. Use an extension tagset that allows this kind of thing. I think one of the RichFaces extended datatables might be employable for that use.

2. Construct your own. You might want to make a Facelets component object (custom tag) out of this. At a rough guess, I'd say use a ui:repeat to render the outer table as a set of 4-colum table slices each optionally followed by a 3-column subtable. Despite all the ranting I do about ui:repeat, there are times when it's a very useful thing to have. Just not as often as some people think.

Here's a rough sketch of an option #2 solution:

<ui:repeat var="outerRow" value="#{myBean.outerRows}">
   <h:panelGrid id="orow" columns="4" columnClasses="c1,c2,c3,c4>
       <h:outputText value="#{outerRow.col1value}"/>
       <h:outputText value="#{outerRow.col2value}"/>
       <h:outputText value="#{outerRow.col3value}"/>
       <h:outputText value="#{outerRow.col4value}"/>
   </h:panelgrid>
   <h:dataTable id="innertable" var="row" value=#{outerRow.innerTableModel}">
     <h:column>
        ...
     </h:column>
       ...
   </h:dataTable>
</ui:repeat>

[Varshini Priya]

Hi Tim,

Thanks for the response. As you specified I was trying to create the datatable using the Option2 that you have specified. The code that I have written for this is below. I have also included a Javascript function to display the child datatable on click of the image.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Expandable Rows Datatable</title>
<style type="text/css">
.review-table{
	border-style:groove;
	}
.review-table-header{
	text-align:center;
	background-color:#85C2FF;
	border-bottom:1px solid;
	padding:12px;
	}
.review-table-odd-row{
	text-align:center;
	background-color:#E6F9FF;
	border-top:1px solid;
	}
.review-table-even-row{
	text-align:center;
	background-color:#E6F9FF;
	border-top:1px solid;
	}
.rowHighlighted{
       background-color:#8C92C6; //This is just an example color
    }
</style>
<script type="text/javascript">
var imagePath=["../images/plusfinal.jpg","../images/minusfinal.jpg"];
function doMenu(btn, divtableid)
{
	var obj = document.getElementById(divtableid);
	if(obj.style.display=="none")
	{
		obj.style.display="block";
		btn.src= "../images/minusfinal.jpg";		
	}
	else
	{
		obj.style.display="none";
		btn.src = "../images/plusfinal.jpg";
	}
}
s</script>
</h:head>
<h:body>
<h:form id="orderdetails" style="width:100%">
<h:panelGroup id="panel1">
<table id="reviewtableID" border="1" >
     	<tr>
     		<th>
     			<input type="checkbox" name="Select All" value=""/>
     		</th>
     		<th>
     			Product Details
     		</th>
     		<th>
     			Product Description
     		</th>
     		<th>
     			Product Quantity
     		</th>
		</tr>
		<ui:repeat var="item" value="#{orderBean.allOrderInfo}">
		<tr>
		<td >
			<input type="checkbox"  name="select" />
		</td>
		<td>
		<!-- <h:commandButton id="subrowid" image="../images/plusfinal.jpg"  onclick="doMenu(this,'showTable')"/> -->
		<img id="subrowid"  />
		<h:outputText value="#{item.details}"></h:outputText>
		</td>
		<td>
		<h:outputText value="#{item.description}"></h:outputText>
		</td>
		<td>
		<h:outputText value="#{item.quantity}"></h:outputText>
		</td>
		</tr>
		<div id="showTable" style="display:none;">
		<tr>
           <!-- Child Data Table--->
		<h:dataTable id="itemdetails" binding="#{orderBean.reviewTable}"  value="#{orderBean.allOrderInfo}"  var="item"
		style="width:90%; margin-top:30px"  styleClass="review-table"
		headerClass="review-table-header"  rowClasses="review-table-odd-row,review-table-even-row">
		<h:column>
		<f:facet name="header">
			<h:outputText value="Source Location"/>
		</f:facet>
		<h:outputText value="#{item.details}"></h:outputText>
		</h:column>
		<h:column>
		<f:facet name="header">
		<h:outputText value="Product ID"/>
		</f:facet>
		<h:outputText value="#{item.details}"></h:outputText>
		</h:column>
		<h:column>
		<f:facet name="header">
		<h:outputText value="UOM"/>
		</f:facet>
		<h:outputText value="#{item.details}"></h:outputText>
		</h:column>
		<h:column>
		<f:facet name="header">
		<h:outputText value="Accept"/>
		</f:facet>
		<h:selectOneRadio id="acceptID"  value="Text">
		</h:selectOneRadio>
		</h:column>
		</h:dataTable>
		</tr>
		</div>
		</ui:repeat>
</table>
</h:panelGroup>
</h:form>
</h:body>
</html>

The child table is appearing fine. However only on the first row. I.e For Eg: Consider the parent table has 4 Rows of data. As per the logic that I have written, Onclick of the image in the first row only im able to get the child datatable. When I click on the images in the other rows, the rowexpansion is not happening. The child table seems to appear only in the first row. I have included the child table with the ui:repeat. but still it does not seem to render. Please Assist.

Thanks

[Tim Holloway]

There are 2 reasons why it's a good idea to distill your examples down to the bare minimum of code/XML.

1. It helps you solve your own problems. The less code there is, the fewer places things can go wrong.

2. I don't get paid for this, so I can't afford to spend much time in in-depth analysis on problems people present on the JavaRanch. So my evaluations are fairly superficial. Long examples require a lot of reading to sort the important stuff from the unimportant stuff and I can't spare that much time.

Superfically speaking, however, my suspicion is that you're expecting your menu-handling JavaScript to be able to interact with the server, and since there's no AJAX code I can see there, that isn't going to happen. You cannot update the number of ui:repeat elements using client-side code. For the ui:repeat and h:dataTable elements to update, you need to do an AJAX request to the server that updates the datamodel and returns the updated model information back the the AJAX view manager, which would then update (re-render) the affected parts of the page using the updated data.,

[Varshini Priya]

Thanks a lot for the Inputs Tim. Really Appreciate your help. As specified by you, I have limited the lines of code and was identify the issue. Now its resolved. The Subtable is appearing in all the rows of the datatable.

[Cedric Bosch]

Hey, I'm trying to implement the same thing.

I've a question with the original question you posted § post number 3) : What does the selection attribute of dataTable do ?

I don't find it in the doc :: https://docs.oracle.com/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/docs/pdldocs/facelets/

[Tim Holloway]

If you'll keep reading down the thread, you'll discover that it doesn't do anything.

It was a mistyped attribute. In JSF, selection is determined on the server side by querying the DataModel that wraps the row values.

[Cedric Bosch]

Thanks I implemented my own expanding Table.

In case anyone need it :

		<table class="fullWidth">
			<tr>
				<th></th>
				<th>Data</th>
				<th>Overview</th>
				<th>Type</th>
			</tr>
			<ui:repeat value="#{adminArea.flagPostTable.data}" var="flagged">
			<tr>
				<td>
					<!-- expander -->
					<span style="font-weight:bold;font-size : 2rem; cursor:pointer;" data-onclick="classToggler" data-tg-target="#sibling,parent-parent-next" data-toggleClass="hide">+</span>
				</td>
				<td>
					#{flagged.date}
				</td>
				<td>
					<h:outputText value="#{adminArea.subStr12(flagged.post.content)}" />
				</td>
				<td>
					#{flagged.flagType}
				</td>
			</tr>
			<!-- expanding row -->
			<tr class="hide">
				<td colspan="4">
					Content expanding
				</td>
			</tr>
			</ui:repeat>
		</table>

To show the table just use javascript or the lil framework I did on top of jsf that allows it to run without script:

https://github.com/eevitcA/NoInlineJsf

the project on github is not totally up to date, I'll update it if people are interested in it. (I've the updated version on my computer but since I've multiple github accounts I've some problems with eclipse when uploading, so I'd rather stay as long as possible on the current account I'm using.)

[Tim Holloway]

Three things that trigger alarm bells when I see them in JSF are:

1. Use of looping/logic constructs (such as ui:repeat).

2. Use of complex expressions (especially functions with arguments) in EL.

3. Use of raw HTML instead of JSF tags.

Also, shouldn't that SPAN be a DIV if you're going to make it resize-on-click?

The native JSF equivalent to this would be a dataTable with a 1x1 panelGrid in the expandable cell (use the javascript to modify its generated DIV size).

Or, for something more polished, there are third-party JSF taglibraries that feature stuff like this all neatly integrated.