function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
prashant1985prashant1985 

how to fix the header of pageblocktable.

below is code how to fix the header of pageblock table .

 

please give me solution if any buddy have.

Thanks.

 

 

 

<apex:page controller="DisplayListDataControllerOnContact" >
<script>window.setTimeout(sayHello,200000000)</script>
<apex:messages />
<style>
 .container
 {

 overflow:auto;
height:100px;

}
.headerStyle
 {
 position:relative;
 top:expression(this.offsetParent.scrollTop);
 z-index: 100;
}
 </style>
 <script type="text/javascript">
     function setTheVal(valFromPopup){
         document.theForm.aField.value=valFromPopup;
     }
 </script>

<apex:form id="theForm" rendered="{!(PopulateData.size != 0)}">
 
  <apex:pageBlock rendered="{!(PopulateData != null)}">
<apex:outputLabel value="Multiple matches returned from Infogroup" style="font-weight:bold"> </apex:outputLabel>  <br/><br/>
<apex:outputPanel layout="block" styleClass="container" >
   <apex:pageBlockTable value="{!PopulateData}" headerClass="headerStyle" align="top" width="100%"  var="Common"  >
            
<apex:column headervalue="Select" >
        
 <input type="radio"   name="rad"  value="{!Common.Id}~{!Common.RuleName}" onclick="changeValue(this,'{!$Component.RadioButtonValue}')"/ >     
     
     </apex:column>
     
  <apex:column value="{!Common.FirstName}  {!Common.LastName}" >
        <apex:facet name="header">Contact</apex:facet>
      </apex:column>  
              
<apex:column value="{!Common.Phone}"  >
        <apex:facet name="header">Phone</apex:facet>
      </apex:column>

 <apex:column value="{!Common.City}"  >
        <apex:facet name="header">City</apex:facet>
      </apex:column>

  <apex:column value="{!Common.StateProvince}"  >
        <apex:facet name="header">State</apex:facet>
      </apex:column>

 <apex:column value="{!Common.PostalCode}" >
        <apex:facet name="header">Zip</apex:facet>
      </apex:column>
       
  <apex:column value="{!Common.CompanyName}" >
        <apex:facet name="header" >Business Name</apex:facet>
      </apex:column>
              
          <apex:column >
        <apex:facet name="header">Line of Business</apex:facet>
      </apex:column>    
          
      
 </apex:pageBlockTable>
      </apex:OutputPanel>


  <apex:inputHidden value="{!selectedValue}" id="RadioButtonValue" />
  <apex:inputHidden value="{!strContactSFId}" id="hidContactSFId" />
 
<!--
 <apex:outputText value="{!selectedValue}" id="out"></apex:outputText>

  <apex:commandButton value="Compare" action="{!save}" rerender="out"  id="theButton" />
    -->
 <br/><br/>

  <apex:commandButton value="Stare & Compare"  onClick="opennewwindow('{!$Component.RadioButtonValue}','{!$Component.hidContactSFId}')"  id="theButton" />
  <apex:commandButton value="Import as New Contact"    id="theButton2" onClick="confirmcontact('{!$Component.RadioButtonValue}')" />
   </apex:pageBlock>
</apex:form>

 <script>
    function confirmcontact(textid)
    {
    

if(document.getElementById(textid).value == '')
{
alert('Please select one record');
return false;
}


return confirm('Are you sure to import new contact');
}

 
   function changeValue(input, textid)
    {
    document.getElementById(textid).value = input.value;
       
     }
           

function opennewwindow(textid,contactSFId)
{

if(document.getElementById(textid).value == '')
{
alert('Please select one record');
return false;
}

var str = document.getElementById(textid).value;
var contactId = document.getElementById(contactSFId).value;
  var requesttype;
 
var temprequesttype;
  var delimiter = "~";
//str = '402586844371~People-LastName';

var  temp = str.split('~');

// alert('hi..' + temp[0].length);
    
var strid;
strid =  parseInt(temp[0]) ;
if(temp.length < 2){
    requesttype = 'Company';
}
else{
    temprequesttype = temp[1];
}
var strsplit = temprequesttype.split('-')
requesttype = strsplit[0];
document.getElementById(textid).value = '';

var myUrl = '/apex/StareComparePageContact?requesttype='+requesttype+'&id='+temp[0]+'&ContactId='+contactId;

var encodetxt=encodeURI(myUrl)

encodetxt = encodetxt.replace('%E2%80%8B','');
/*encodetxt = encodetxt.replace('Ixsd2','');
alert(encodetxt);
alert(decodeURI(encodetxt));
*/
  /*window.name = 'Popup';
  var newwindow = window.showModalDialog(encodetxt,window,'unadorned:yes;dialogHeight:600px;dialogWidth:900px;left:100;top:100;scrollbars:yes;toolbar:no,status=no');
  */
 
  if(navigator.userAgent.indexOf("MSIE")!=-1)
  {
      var newwindow = window.open(encodetxt,'popup','unadorned=yes,height=600,width=900,left=100,top=100,scrollbars=yes,toolbar=no,status=no');  
  }
  else
  {
      var newwindow = window.showModalDialog(encodetxt,window,'unadorned:yes;dialogHeight:600px;dialogWidth:900px;left:100;top:100;scrollbars:yes;toolbar:no,status=no');
  }

  newwindow.focus();

}   
 </script>
 
         

</apex:page>

Praful GadgePraful Gadge

You can try this,

 

<apex:outputpanel style="overflow:scroll;height:250px;" layout="block">

 

I am not sure this will work, but try if it works!

prashant1985prashant1985

thanks for your reply.

 

i have already try this but its not working.

suggest another solution

 

thanks

 

mcarajatchawla1.3944552360434958E12mcarajatchawla1.3944552360434958E12
Hi
I've created a blog for this please visit
http://apexfixheader.blogspot.in/
mcarajatchawla1.3944552360434958E12mcarajatchawla1.3944552360434958E12
Also Mark as solved if it helps..
vermajai1995vermajai1995
To fix header labels in pageBlockTable you can follow these steps:

1)Create two output panels.
2)In the First panel put a pageblocktable with only headers
3)In the Second panel put your row values with attribute headervalues as blank.


This is actually an alternate cause I haven't found any proper/quick fix of it.

       
<apex:pageBlock rendered="{!accountList.size>0}" id="SearchedBlockTable" title="Searched Records">
        <apex:pageBlockButtons>
            <apex:commandButton value="GoTo Next Page" action="{!processSelected}" />
        </apex:pageBlockButtons>
    
        <apex:outputPanel layout="block" style="height:30px">                                
        <apex:pageblockTable value="{!accountList}" var="tempVar" rows="1">                                    
                <apex:column headerValue="Select All" width="50px" style="height:0px;">
                <apex:facet name="header">
                    <apex:inputCheckbox onclick="selectAllCheckboxes(this,'inputId')" />
                </apex:facet>
            </apex:column>
            <apex:column headerValue="Account Name" width="50px" style="height:0px;" />
            <apex:column headerValue="Account Number" width="50px" style="height:0px;" />                                   
        </apex:pageblockTable>                               
    </apex:outputPanel>
    
    <apex:outputPanel layout="block" style="overflow: scroll !important; height: 200px !important;" >                                
        <apex:pageBlockTable value="{!accountList}" var="item">                                    
            <apex:column headerValue="" width="40px">                                        
                <apex:inputCheckbox value="{!item.selected}" id="inputId" />
            </apex:column>
            <apex:column headerValue="" width="50px" value="{!item.accountDetail.Name}" />
            <apex:column headerValue="" width="50px" value="{!item.accountDetail.AccountNumber}" />
        </apex:pageBlockTable>
    </apex:outputPanel>
                            
    </apex:pageBlock>




[Sample Of Working Result]
Refer This Link For More (https://salesforce.stackexchange.com/questions/85720/visualforce-adding-scroll-bar-blocktable/318185#318185)

Sample Output