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
venkyyyvenkyyy 

Column header can not be scroll down in pageblock table,

Hi all,
I have loaded account details in visualforce page through pageblock table, if data exceeds the page it has to show scroll down, if i scroll down the column headers should not be scroll down.
Bellow is my code. and what lines i need to add for bellow code.
---------------
<apex:page standardController="Account" recordSetVar="rcst">
    <apex:form >
        <apex:pageBlock title="Accounts" >
            <div style="overflow: auto; height: 200px;" layout="block" position ="fixed">
                <apex:pageblockTable value="{!rcst}" var="a" headerClass="headerStyle" width="100%">
                    <apex:column value="{!a.Id}" ></apex:column>
                    <apex:column value="{!a.Name}" ></apex:column>
                    <apex:column value="{!a.type}" ></apex:column>
                    <apex:column value="{!a.industry}"></apex:column>
                <apex:inlineEditSupport />
                </apex:pageblockTable>
            </div>                                        
        </apex:pageBlock>
    </apex:form>
</apex:page>

Thanks.
Best Answer chosen by venkyyy
KaranrajKaranraj
Venky - Using jquery fixed header table plugin you can able to do that, check the below sample code for the sample 
<apex:page standardController="Account" standardStylesheets="false">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="{!$Resource.jqueryfixheadertable}"></script>
   <apex:stylesheet value="{!$Resource.base}" />
   <apex:stylesheet value="{!$Resource.themefile}" />
   
 <apex:form id="theform">  

    <script>
    $(document).ready(function() {
        $('.fixme').fixheadertable({
             caption : 'My header is fixed !',
             height  : 200
        });
    });
    </script>  
   
   
   <apex:pageBlock title="My Content"  >

        <apex:pageBlockTable value="{!account.Contacts}" var="item" styleclass="fixme">
             <apex:column headerValue="Col1"   value="{!item.name}"/> 
              <apex:column headerValue="Col2"   value="{!item.name}"/> 
                <apex:column headerValue="Col2"   value="{!item.name}"/> 
                  <apex:column headerValue="Col2"   value="{!item.name}"/> 
      </apex:pageBlockTable> 

    </apex:pageBlock> </apex:form>
</apex:page>

Supporting files 
1. Base css - https://raw.githubusercontent.com/benjaminleouzon/tablefixedheader/master/css/base.css
2. Theme css - https://raw.githubusercontent.com/benjaminleouzon/tablefixedheader/master/jquery-ui/css/flick/jquery-ui-1.8.4.custom.css
3. FixedHeader Js - https://raw.githubusercontent.com/benjaminleouzon/tablefixedheader/master/javascript/jquery.fixheadertable.js

All Answers

KaranrajKaranraj
Venky - Using jquery fixed header table plugin you can able to do that, check the below sample code for the sample 
<apex:page standardController="Account" standardStylesheets="false">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="{!$Resource.jqueryfixheadertable}"></script>
   <apex:stylesheet value="{!$Resource.base}" />
   <apex:stylesheet value="{!$Resource.themefile}" />
   
 <apex:form id="theform">  

    <script>
    $(document).ready(function() {
        $('.fixme').fixheadertable({
             caption : 'My header is fixed !',
             height  : 200
        });
    });
    </script>  
   
   
   <apex:pageBlock title="My Content"  >

        <apex:pageBlockTable value="{!account.Contacts}" var="item" styleclass="fixme">
             <apex:column headerValue="Col1"   value="{!item.name}"/> 
              <apex:column headerValue="Col2"   value="{!item.name}"/> 
                <apex:column headerValue="Col2"   value="{!item.name}"/> 
                  <apex:column headerValue="Col2"   value="{!item.name}"/> 
      </apex:pageBlockTable> 

    </apex:pageBlock> </apex:form>
</apex:page>

Supporting files 
1. Base css - https://raw.githubusercontent.com/benjaminleouzon/tablefixedheader/master/css/base.css
2. Theme css - https://raw.githubusercontent.com/benjaminleouzon/tablefixedheader/master/jquery-ui/css/flick/jquery-ui-1.8.4.custom.css
3. FixedHeader Js - https://raw.githubusercontent.com/benjaminleouzon/tablefixedheader/master/javascript/jquery.fixheadertable.js
This was selected as the best answer
venkyyyvenkyyy
Hi karanRaj,
(Its very urgent)

Thanks for the best answer and how can i achive this without using javascript. actually I want to implement this requirement without using javascript.

Regards,
Venky.
divya gorantladivya gorantla
The above code helped us to get the fixed columns but we are facing different issues . Here the column headers are fixed and it is not varying based on content . Could anybody resolved this issue .please help me
Pankaj_GanwaniPankaj_Ganwani
Hey Kararaj,

Just following up on the above mentioned thread. We used the above mentioned code and facing some issues. Can you please assist us for the same?
  
<apex:page controller="Dummy">
    
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
   <apex:includeScript value="{!URLFOR($Resource.FixedHeader, '/Fixedheader.js')}"></apex:includeScript>
   <apex:stylesheet value="{!URLFOR($Resource.FixedHeader, '/base.css')}" />
   <apex:stylesheet value="{!URLFOR($Resource.FixedHeader,'/theme.css')}" />

<script>
  $(document).ready(function() {
        $('.fixme').fixheadertable({
             caption : 'My header is fixed !',
             height  : 200
        });
    });
</script>
<apex:form >

<apex:pageBlock >
<apex:pageBlockSection id="CustomerSearchSection"> 
<apex:pageBlockTable value="{!lst}" var="opp" styleclass="fixme">
        <apex:column headerValue="Customer" value="{!opp.AccountId}" />
        <apex:column headerValue="Country" value="{!opp.Country__c}"/>
        </apex:pageBlockTable>
        </apex:pageBlockSection>
        </apex:pageBlock>
</apex:form>
</apex:page>

Controller:
  
public class Dummy
{
     public list<opportunity> lst
     {
           get
           {
               return [select Id, AccountId, Country__c from Opportunity LIMIT 100];
           }
           set;
     }
}

 
SFDC AdminDev 10SFDC AdminDev 10
Hi Divya,

Any updates on this please?

Thank you
Regards
Ramesh