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
sanjeev342sanjeev342 

How do I hide a dataTable by default?

I have a requirement where a datatable of clients must be hidden by default (i.e. on page load). The table appears and populates only when a certain command link is clicked. How do I go about achieving this?

 

This is the datatable I have so far:

 

<apex:dataTable id="clientDataTable" value="{!clientList}"
            				var="clientRecord" width="100%">
                <apex:column headerValue="Client Name" width="30%">
                    <apex:outputText value="{!clientRecord.Client_Name__c}"/>
                </apex:column>
                <apex:column headerValue="Description of Fund Raising Activities" width="30%">
                    <apex:outputField value="{!clientRecord.Description__c}"/>
                </apex:column>
                <apex:column headerValue="Start Date" width="20%">
                    <apex:outputText value="{!clientRecord.Start_Date__c}"/>
                </apex:column>
                <apex:column headerValue="End Date" width="20%" >
                    <apex:outputText value="{!clientRecord.End_Date__c}"/>
                </apex:column>
                <apex:column headerValue="Pro-Bono" width="10%">
                    <apex:outputText value="{!IF(clientRecord.Pro_Bono__c, 'Yes', 'No')}"/>
                </apex:column>
            </apex:dataTable>

 


Thanks,

Sanjeev

Best Answer chosen by Admin (Salesforce Developers) 
Shiv ShankarShiv Shankar

One more ulternate i sees.

declare one Boolean varialbe in class.

 

Chang in class according to your requirement, i am just giving idea.

public controllerClass{
	Boolean display; // declare one Boolean variable.
	
	controllerClassConstructer(){
		display = false; // In constructer make it false
	}
	
	public updateClientList(){
		display = true; // in action method set the value true, so when table will reRender it will check for the value of this variable.
	}

}

 

// put an output panel outside the table because we can not reRender an element which is having rendered condition. like this way

<apex:outputPanel id="TablelPanel" >

	<apex:dataTable id="ClientRecordsTable" value="{!clientList}" var="ClientRecord" width="100%" rendered="{! display}">


</apex:outputPanel>

 // reRender the <apex:outputPanel> using command link.

<apex:commandLink action="{!updateClientList}" reRender="TablelPanel" >
                                    View
    <apex:param name="ProfPracticeId" value="{!ProfPracticeRecord.Id}" assignTo="{!selectedProfPractice}"/>
</apex:commandLink>

 

 

 

All Answers

Shiv ShankarShiv Shankar

Hi Sanjeev,

 

This we can achieve through CSS and jQuery.

1. Initially we will set Display CSS property none for the tale.

2. Now when user will click on command link we will call java script function. In this java script function we will change the Display CSS property none to block.

 

<apex:dataTable id="clientDataTable"        style="display:none;"       value="{!clientList}" var="clientRecord" width="100%">
                <apex:column headerValue="Client Name" width="30%">
                    <apex:outputText value="{!clientRecord.Client_Name__c}"/>
                </apex:column>
                <apex:column headerValue="Description of Fund Raising Activities" width="30%">
                    <apex:outputField value="{!clientRecord.Description__c}"/>
                </apex:column>
                <apex:column headerValue="Start Date" width="20%">
                    <apex:outputText value="{!clientRecord.Start_Date__c}"/>
                </apex:column>
                <apex:column headerValue="End Date" width="20%" >
                    <apex:outputText value="{!clientRecord.End_Date__c}"/>
                </apex:column>
                <apex:column headerValue="Pro-Bono" width="10%">
                    <apex:outputText value="{!IF(clientRecord.Pro_Bono__c, 'Yes', 'No')}"/>
                </apex:column>
 </apex:dataTable>
 
 <apex:commandLink onClick="DisplayTable" action="{! xyz}" />
 
 <script>
	$('[Id $= "clientDataTable"]').css('display','block');
 </script>

 

 

 
sanjeev342sanjeev342

Thanks Shiv, I appreciate the help.

 

This makes sense, but it still doesn't work.

 

This is what my command link looks like:

<apex:commandLink action="{!updateClientList}" reRender="ClientRecordsTable" onclick="displayClientTable()" >
                                    View
    <apex:param name="ProfPracticeId" value="{!ProfPracticeRecord.Id}" assignTo="{!selectedProfPractice}"/>
</apex:commandLink>

 

And here's the javascript (the datatable name was changed):

    <script type="text/javascript">
        
        function displayClientTable(){
        	$('[Id $= "ClientRecordsTable"]').css('display','block');
        }
        
    </script>

 

And here's the beginning of the datatable:

 

<apex:dataTable id="ClientRecordsTable" value="{!clientList}" var="ClientRecord" width="100%" style="display: none" >

 

 

I think the issue is that the javascript method is run, but the page is not able to access the controller method {!updateClientList}. Please let me know what you think.

 

Sanjeev
Shiv ShankarShiv Shankar
1. just use onComplete on the place of onClick event.


2. Are you invoking jQuery in your VF Page ?
Just check jQuery invoked or not.
&lt;script type="text/javascript">
if($){
alert('jQuery Invoked');
} else { alert('jQuery not invoked') }

function displayClientTable(){
$('[Id $= "ClientRecordsTable"]').css('display','block');
}

&lt;/script&gt;
Shiv ShankarShiv Shankar

One more ulternate i sees.

declare one Boolean varialbe in class.

 

Chang in class according to your requirement, i am just giving idea.

public controllerClass{
	Boolean display; // declare one Boolean variable.
	
	controllerClassConstructer(){
		display = false; // In constructer make it false
	}
	
	public updateClientList(){
		display = true; // in action method set the value true, so when table will reRender it will check for the value of this variable.
	}

}

 

// put an output panel outside the table because we can not reRender an element which is having rendered condition. like this way

<apex:outputPanel id="TablelPanel" >

	<apex:dataTable id="ClientRecordsTable" value="{!clientList}" var="ClientRecord" width="100%" rendered="{! display}">


</apex:outputPanel>

 // reRender the <apex:outputPanel> using command link.

<apex:commandLink action="{!updateClientList}" reRender="TablelPanel" >
                                    View
    <apex:param name="ProfPracticeId" value="{!ProfPracticeRecord.Id}" assignTo="{!selectedProfPractice}"/>
</apex:commandLink>

 

 

 

This was selected as the best answer
Nitin SehgalNitin Sehgal

Hi Shiv,

 

Your solution is perfect. I also do the same thing for hiding and unhiding the controles.
Bhawani SharmaBhawani Sharma
If you don't want to display the records by default, I would say do not query data by default. So your list size would be zero and you can use
apex:dataTable id="clientDataTable" value="{!clientList}" var="clientRecord" width="100%" rendered="{!(clientList.Size > 0)}"

and do the query on commandlink click using a method
sanjeev342sanjeev342
Shiv,

Thanks! This works. You're right about the issue I was facing...couldn't reRender a control with a "rendered" attribute. Just encapsulating the table in another outputpanel seems to have done the trick!

Cheers,
Sanjeev