• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
  • Campbell Ritchie
  • Ron McLeod
  • Rob Spoor
  • Tim Cooke
  • Junilu Lacar
  • Henry Wong
  • Liutauras Vilda
  • Jeanne Boyarsky
Saloon Keepers:
  • Jesse Silverman
  • Tim Holloway
  • Stephan van Hulst
  • Tim Moores
  • Carey Brown
  • Al Hobbs
  • Mikalai Zaikin
  • Piet Souris

Hiding a column in a datatable

Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
Saloon Keeper
Posts: 24314
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
It would give a normal human mental abilities to rival mine. To think it is just a tiny ad:
Thread Boost feature
    Bookmark Topic Watch Topic
  • New Topic