function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Mathew Andresen 5Mathew Andresen 5 

collapse horizontal portion of table

Hi,

Is it possible to hide and unhide (make collasable) a horizontal portion of a table?  For example say I had the following in a data table
time series data - forecast on time series data - percent growth on time series data

and I wanted to make it possible to hide an unhide sections.

Thanks,
Best Answer chosen by Mathew Andresen 5
Kyle BrandtKyle Brandt
Maybe you could use rendered attribute? set a boolean value to determine what shows on the page. 

If you use rendered you could make a button that sets the Bool value to true and that would hide what is rendered in your table
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_column.htm
 

All Answers

Kyle BrandtKyle Brandt
you can hide columns.

On your VF page add columns: 
<apex:pageBlockTable value="{!xxxx}" var="xx" columns="{!columnNo}">


use a commandbutton to toggle show more/less

in your Apex specify the variable for columnNo to the number of columns to show.

i.e.

showMore(){
columnNo = 3;
}

showLess(){
columnNo = 2;
}
Mathew Andresen 5Mathew Andresen 5
That wouldn't allow you to hide columns in the middle though would it?
Kyle BrandtKyle Brandt
no it wouldn't, you would need to strategically build your table to hide in the correct order, perhaps build multiple tables use styles and make it look as 1? i haven't tried hiding middle columns.
Kyle BrandtKyle Brandt
Maybe you could use rendered attribute? set a boolean value to determine what shows on the page. 

If you use rendered you could make a button that sets the Bool value to true and that would hide what is rendered in your table
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_column.htm
 
This was selected as the best answer
Mathew Andresen 5Mathew Andresen 5
I was thinking of doing a div and then setting display to false or true through java script.  But I'm having a hard time getting the Div's id or class.

I saw this post, but I don't think I understand how to use $component

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_best_practices_accessing_id.htm
 
Mathew Andresen 5Mathew Andresen 5
I think your idea of putting rendered is on the column is going to be the right one.  I'm going to mark this solved.  I will try and understand getting element id's later.

Thanks, for the help.
Kyle BrandtKyle Brandt
you could specify your column an id... example:  
<apex:column id="firstColumn">


and utilise javasript with a data toggle button peforming something like: 
if(document.getElementById("firstColumn").style.display == "none")