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
salesforcedev.ax840salesforcedev.ax840 

hide and show using a button

Hi 

I have a table display on screen and a button below it.this table data is disabled so no one can make changes.

i want to hide this table when button is pressed and show table when button pressed ..

need to change button name too while it happen...

i did in html and javascript... so anyone can help in visual force pages...

 

 

 

<apex:outputPanel id="summary" >

<apex:pageBlock >

<apex:form >

 

 

                               table shown as summary

 

 

</apex:form>

 

</apex:pageBlock>

</apex:outputPanel>

 

 

 

<apex:form >
<apex:commandButton value="Hide Summary"  reRender="summary" />
</apex:form>

 

<apex:form ><apex:commandButton value="Hide Summary"  reRender="summary" /></apex:form>

 

 

any ideas... appreciated...thank you

mikefmikef

You don't need two form tags and I would recommend never using more then one form tag per-visualforce page.

 

Try this example.

 

<apex:outputPanel layout="block" id="myTable" >
  <apex:dataTable var="t" value="{!listOfRecords}" rendered="{!viewTable}" >
  </apex:dataTable>
  <apex:commandButton value="{!buttonName}" action="{!showHideTable}" rerender="myTable" />
</apex:outputPanel>

 

public class MyController{
  private Boolean viewTable;
  private String buttonName;

  public Boolean getViewTable(){return this.viewTable;}
  public String getButtonName(){return this.buttonName;}

  public MyController(){
    viewTable = true;
    buttonName = 'Hide Table':
  }

  public void showHideTable(){
    if(viewTable){
       viewTable = false;
       buttonName = 'Show Table';
    }else{
       viewTable = true;
       buttonName = 'Hide Table';
    }

}


}

 

 

Please keep in mind this is just an example and I didn't test this code. You will want to test this and update it to your own coding standards.
salesforcedev.ax840salesforcedev.ax840

what is listOfRecords .is it the table value ? 

mikefmikef

Yes it's the list of records you want to display in the table. If you have a static table then you would add an outputPanel to show and hide it.

 

 

<apex:outputPanel layout="block" rendered="{!showTable}">
 <table>
<!-- all my static table code -->
 </table>
</apex:outputPanel>

 

 
salesforcedev.ax840salesforcedev.ax840

my problem is it is not table.it is like summary of data. so i need to show orginal values and changed values in summary so i wrote code in

pageblocktable and put these pageblock tables in panelgrid so i can display in two columns in panelgrid ....

may be this is wierd coding....i am new into it...so still learning... any idea you can give to change my design...

 

thanks for your quick replies...
mikefmikef

"my problem is it is not table.it is like summary of data"

 

I am not sure what you are asking now. Your original issue was you needed a button to hide or show a table in Visualforce, and I showed you how to do that. Now you are asking a "summary of data" question which I have no I ideal what you mean.

 

Do you still need help with the hide and show part?

Can you get data to show up on the page?

What is the use case you are trying to solve? What do your users want?
salesforcedev.ax840salesforcedev.ax840

i am not able to send you the code as it says only 200000 characters allowed.

 

this is how the format of code is bye removing apex:column and apex:facet

 

 

<apex:form >
<apex:outputPanel layout="block" id="myTable" >
<apex:pageBlock >
<apex:panelGrid frame="none"  id="tblTotalSummary" columns="2" width="100%"   columnClasses="colstyle" >
<apex:pageBlock >
<apex:pageblockTable   >
</apex:pageblockTable>
<apex:pageblockTable >
  
</apex:pageblockTable>
</apex:pageBlock>
<apex:pageBlock >
<apex:pageblockTable/>
<apex:pageblockTable />
</apex:pageBlock>
</apex:panelGrid>
</apex:pageBlock>
<div align="center">
<apex:commandButton value="Hide Summary"  reRender="summary" />
</div>
</apex:outputPanel>
</apex:form>

 Thank you