Win a copy of The Java Performance Companion this week in the Performance forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Hiding a column in a datatable

 
Giuseppe Garibaldi
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 18214
53
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic