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
Priyanka 8Priyanka 8 

Trying to freeze headers of a table in Visualforce page.

Hello, Can anyone please tell me how to freeze headers of a table, I am using <apex:datatable> tag to create the table and <apex:column> to name the headers. I have tried the jquery plugins for sticky headers and floting headers available in online.However it didn't solve my problem. Please post your ideas and help me out. Thank you very much in advance.
Vinit_KumarVinit_Kumar
VF can't handle this,you need to create JS function to achieve this. 

Go through below links,it contains sample JS functions as how you can achieve this :-

http://stackoverflow.com/questions/486576/frozen-table-header-inside-scrollable-div/1533619#1533619

http://iwritecrappycode.wordpress.com/2013/03/05/floatingsticky-headers-for-visualforce-pageblocktable/

http://salesforce.stackexchange.com/questions/1892/how-do-i-support-scrolling-and-lock-freeze-the-header-row-of-a-pageblocktable

Hope this helps !!
Priyanka 8Priyanka 8
I am using datatable tag, not pageblocktable so I cant use the last two links in my case. Also the first one is not working as I used apex:column for columns, but not html <tr> <td> tags. I need freeze headers for apex:datatable component.
Vaib ParaVaib Para

Hi, This is the code which has freeze panes. I found out a way to do that. Headers will be fixed when the visualforce page is downloaded as excel.

My next requirement is to have conditional coloring.?? Any idea on how to do that?

<apex:page controller="ExportToExcelMultipleSheets" contentType="application/vnd.ms-excel#Candidate.xls" cache="true">

<apex:outputText value="{!xlsHeader}"/>
<Workbook  xmlns="urn:schemas-microsoft-com:office:spreadsheet"
 xmlns:o="urn:schemas-microsoft-com:office:office"
 xmlns:x="urn:schemas-microsoft-com:office:excel"
 xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
 xmlns:html="http://www.w3.org/TR/REC-html40">

<Styles>
 
 <Style ss:ID="s1">
 <Alignment ss:Vertical="Top"/>
 <Borders/>
<Font ss:Bold="1"/>
 <Interior ss:Color="#800080" ss:Pattern="Solid" />
 <NumberFormat/>
 <Protection/>
 </Style>
 </Styles>
 
 <Worksheet ss:Name="Contacts">
 <Table  x:FullColumns="1" x:FullRows="1">

 <Column  ss:Width="100" />
 <Column  ss:Width="100" />
 <Column  ss:Width="100"/>
 <Row ss:Height="25">
 <Cell ss:StyleID="s1"><Data ss:Type="String" >Contact Name</Data><NamedCell ss:Name="_FilterDatabase"/></Cell>
 <Cell ss:StyleID="s1"><Data ss:Type="String" >Email</Data><NamedCell ss:Name="_FilterDatabase"/></Cell>
 <Cell ss:StyleID="s1"><Data ss:Type="String" >Account Name</Data><NamedCell ss:Name="_FilterDatabase"/></Cell>
 <Cell ss:StyleID="s1"><Data ss:Type="String" >Birth Date</Data><NamedCell ss:Name="_FilterDatabase"/></Cell>
 <Cell  ss:StyleID="s1"><Data ss:Type="String" >Mobile</Data><NamedCell ss:Name="_FilterDatabase"/></Cell>
 </Row>
 <apex:repeat value="{!contactList}" var="contact">
 <Row>
 <Cell><Data ss:Type="String"><apex:outputText style="color:#000;" value="{!contact.name}"/></Data></Cell>
 <Cell><Data ss:Type="String">{!contact.email}</Data></Cell>
 <Cell><Data ss:Type="String">{!contact.account.name}</Data></Cell>
 <Cell><Data ss:Type="String"><apex:outputText value="{0,date,MM/dd/yy}" ><apex:param value="{!contact.Birthdate}" /></apex:outputText></Data></Cell>
 <Cell><Data ss:Type="String">{!contact.MobilePhone}</Data></Cell>
 </Row>
 </apex:repeat>
 <Row ss:StyleID="s1">
 <Cell><Data ss:Type="String">Planning</Data></Cell>
 </Row>
 <Row>
 <Cell><Data ss:Type="String">test</Data></Cell>
 </Row>
 </Table>
 <WorksheetOptions xmlns="urn:schemas-microsoft-com:office:excel">
   <Selected/>
   <FilterOn/>
   <FreezePanes/>
   <FrozenNoSplit/>
   <SplitHorizontal>1</SplitHorizontal>
   <TopRowBottomPane>1</TopRowBottomPane>
   <SplitVertical>1</SplitVertical>
   <LeftColumnRightPane>1</LeftColumnRightPane>
   <ActivePane>0</ActivePane>
   <Panes>
    <Pane>
     <Number>3</Number>
    </Pane>
    <Pane>
     <Number>1</Number>
    </Pane>
    <Pane>
     <Number>2</Number>
    </Pane>
    <Pane>
     <Number>3</Number>
    </Pane>
   </Panes>
   <ProtectObjects>False</ProtectObjects>
   <ProtectScenarios>False</ProtectScenarios>
  </WorksheetOptions>
</Worksheet>
  </Workbook>

</apex:page>


Controller:-

public with sharing class ExportToExcelMultipleSheets {
public List<Account> accountList{get;set;}
public List<Contact> contactList{get;set;}
public String xlsHeader {
        get {
            String strHeader = '';
            strHeader += '<?xml version="1.0"?>';
            strHeader += '<?mso-application progid="Excel.Sheet"?>';
            
            return strHeader;
        }
    }
 
public ExportToExcelMultipleSheets(){
    accountList = [select id, name from Account LIMIT 50];
    contactList = [Select id, name, account.name,MobilePhone,Birthdate, email from Contact LIMIT 50];
 
}
 
public Pagereference exportAll(){
    return new Pagereference('/apex/exportAll');
 
 
}
 
}