File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes JSF and the fly likes Hiding a column in a datatable Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Java » JSF
Bookmark "Hiding a column in a datatable" Watch "Hiding a column in a datatable" New topic

Hiding a column in a datatable

Giuseppe Garibaldi

Joined: Sep 24, 2010
Posts: 1
Hello forum members,

I have a datatable which contains 12 columns, however only 8 columns can easily fit on the page. My clients wants the first 8 columns displayed, and an arrow image next to the table on the right. When the user clicks that arrow, the rightmost 4 columns will disappear and the other 4 which were not on the screen will appear in their places (and the arrow will change from pointing right to pointing left), then if the user clicks the arrow again the grid will return to its initial view. So, the leftmost 4 columns always stay the same, the right 4 change when the user clicks the image.

This is easily done with an html table and javascript (just put an id attribute on the td of the columns I want to hide, then call a js function to hide those id's), however I am new to JSF and can't figure out how to make this work with a datatable. When I put id attributes in the h:column tags, then run the ap and look at the html source, the id tag isn't there. I don't know whether the render attribute of the h:column can be used, since I want the columns to render when the user clicks the arrow, not based on some value in the database? I also considered using multiple datatables and have each one inside an html table and hide the whole datatable, but then the user could not sort by column (since the user wants to sort the whole grid when he clicks on a column header, which won't be the case if the grid is split into multiple datatables).

If anyone can point me in the right direction I would be most appreciative.
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 17410

Welcome to the Javaranch Guiseppe!

You can do this in JSF the same way that you would for an ordinary HTML table, by altering the "td" elements using JavaScript, although you might have to do a little manual navigation of the DOM.

An alternative that's potentially less work would be to use a third-party extension tagset that does the same thing. For example, the RichFaces extendedDataTable control. It doesn't have scroll arrows for the columns, but you can drag-resize them like you would in Excel and there's a horizontal scroll bar. Plus, you get the benefits of being able to sort and search the displayed table if you want.

An IDE is no substitute for an Intelligent Developer.
I agree. Here's the link:
subject: Hiding a column in a datatable
jQuery in Action, 3rd edition