Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Arun BalaArun Bala 

Is this possible at all ?

I have a pageBlockTable:

                        <apex:pageBlockTable value="{!dataTabTasks}" var="task" cellspacing="4" id="taskTable" style="bPageBlock">
                            <apex:column id="hideDiv1">
                                <apex:facet name="header">Action</apex:facet>
                                   <apex:CommandLink styleClass="addNL" immediate="true" onclick="delTask('{!task.Id}','{!$Component.theHiddenInput}','{!$Component.theHiddenInput1}','{!task.CallDisposition}');" value="Del" action="{!removeTask}" reRender="out"/> |

                                  onclick="toggleFieldEdit('{!$Component.pg1}','{!$Component.pg2}');" id="img1"/></a>
                                </div>
                           </apex:column>
                               <apex:column >                  
                                <apex:facet name="header">Task Subject</apex:facet>
                                <apex:inputField id="subject" value="{!task.subject}" required="true" style="width: 70px;"/>
                            </apex:column>

Before printing the page, I wanted to hide the column (hideDiv1) in the JS ... while I set the style hideDiv1.display = 'none', the header (facet in this case) is not getting hidden. The header is still being displayed. Any possible work around folks ?

I didnt want to make a Ajax function call and then set render="false" for column 1. I need to do this in JS itself. Any inputs would be helpful.

Thanks.



Message Edited by Arun Bala on 12-25-2008 03:26 PM
iceberg4uiceberg4u
Try using this:->
 

document.getElementById('{!$Component.<cloumnid>}').style.display = 'none';
Arun BalaArun Bala
Hi Iceberg,
Thanks for your prompt response. I did try this method earlier also. The problem here is that the header(apex:facet) is being still displayed though the table data is not displayed. Making 'rendered=false' on the concerned apex:column makes both header and data invisible but I dont want to do that because I need to access the controller then.
dchasmandchasman
I would strongly recommend using a CSS based approach instead? Something like this should do the trick and solves the problem using only supported parts of the VF component model - e.g. without dropping into low level DOM manipulation (something that is likely to break as the physical structure of the HTML emitted by VF components evolves).

Code:
<apex:page standardController="account" recordSetVar="accounts" showHeader="false">
    <apex:includeScript value="http://extjs.com/deploy/dev/adapter/ext/ext-base.js"/>
    <apex:includeScript value="http://extjs.com/deploy/dev/ext-all.js"/> 
       
    <style>
    .hideMeForPrinting {}
    </style>

    <apex:outputLink onclick="Ext.util.CSS.updateRule('.hideMeForPrinting', 'display', this.showColumn — 'block' : 'none'); this.showColumn = !this.showColumn; return false">Toggle Column</apex:outputLink>
    <apex:pageBlock>
        <apex:pageBlockTable var="account" value="{!accounts}">
            <apex:column value="{!account.id}"/>
            <apex:column value="{!account.name}" headerClass="hideMeForPrinting" styleClass="hideMeForPrinting"/>
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>