Thursday, January 21, 2016

How to Highlight the selected row in a table in Salesforce Visual Force Page

If you are looking to highlight the selected row in a page block table in visualforce page.To do thos just add the below code snippet to your visualforce page to differentiate the selected row color among the rest of the rows/records in same page block table.

Visual Force Page:
<apex:page standardController="account" recordSetVar="accounts" sidebar="false" showHeader="false">  
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>  
<apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css"/>  
   <script>  
     function highlightElem(elem){  
       $('tr').removeClass('ui-state-highlight');  
       $(elem).parent().addClass('ui-state-highlight');  
     }  
   </script>  
     <apex:form >  
       <apex:pageBlock >  
         <apex:pageBlockTable value="{!accounts}" var="a">  
           <apex:column value="{!a.name}" onclick="highlightElem(this)"/>  
            <apex:column value="{!a.BillingState}" onclick="highlightElem(this)"/>  
             <apex:column value="{!a.owner.name}" onclick="highlightElem(this)"/>  
         </apex:pageBlockTable>  
       </apex:pageBlock>  
     </apex:form>    
 </apex:page>  

OutPut:



Note:

1 . If you want to change the Highlighted color write your won style class and add that one script.

Enjoy....!!

No comments: