aspose file tools*
The moose likes JSF and the fly likes Row Expansion using JSF datatable Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "Row Expansion using JSF datatable" Watch "Row Expansion using JSF datatable" New topic
Author

Row Expansion using JSF datatable

Varshini Priya
Ranch Hand

Joined: Feb 17, 2008
Posts: 93

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
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16145
    
  21

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.


Customer surveys are for companies who didn't pay proper attention to begin with.
Varshini Priya
Ranch Hand

Joined: Feb 17, 2008
Posts: 93

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




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
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16145
    
  21

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
Ranch Hand

Joined: Feb 17, 2008
Posts: 93

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.




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

Thanks
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16145
    
  21

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
Ranch Hand

Joined: Feb 17, 2008
Posts: 93

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
Greenhorn

Joined: Aug 03, 2011
Posts: 19
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
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16145
    
  21

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:
Varshini Priya
Ranch Hand

Joined: Feb 17, 2008
Posts: 93

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.


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
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16145
    
  21

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
Ranch Hand

Joined: Feb 17, 2008
Posts: 93

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.

 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Row Expansion using JSF datatable