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
UU 

Highlight row by selecting checkbox

Hi experts,

I would like to ask you some advise for what I am doing now.

I made following page block on Visualforce page so far. I want to highligh row when I click checkbox (Address 1 Line 1 H) on the right. 
User-added image

This is sample screen that I want to get see when I select the checkbox.
User-added image

Visualforce 
<apex:form>
    <apex:inlineEditSupport event="ondblclick"/>
    <apex:pageBlock title="Sample Page Block">
        <apex:pageBlockSection collapsible="false" title="Address" columns="2">
          <apex:repeat value="{!AddressFields}" var="f"> <!--AddressFields contains FieldSet, retreived by Apex-->
            <apex:outputField value="{!account[f.fieldPath]}" />
          </apex:repeat>
        </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>

​Apex - Retrieve FieldSet, called "Account_Address", by using FieldSet 
public list<Schema.FieldSetMember> getAddressFields(){
      return SobjectType.Account.FieldSets.Account_Address.getFields();
}

How do you implement highligh feature?

Thank you for your comment in advance!
Best Answer chosen by U
JeeTJeeT
Hi,
Just add Javascript code to your check box onclick or onchange event :
Add this code to the check box components as : onclick="toggleHighLight(this);" 
<script>
function toggleHighLight(thisEle){ ele = thisEle;
        var elem = thisEle.parentNode.parentNode;
        if(elem.style.backgroundColor == '')
            elem.style.backgroundColor = '#F5F507';
        else
            elem.style.backgroundColor = '';
    } 
</script>

You can find many options and ways in Jquery.

All Answers

JeeTJeeT
Hi,
Just add Javascript code to your check box onclick or onchange event :
Add this code to the check box components as : onclick="toggleHighLight(this);" 
<script>
function toggleHighLight(thisEle){ ele = thisEle;
        var elem = thisEle.parentNode.parentNode;
        if(elem.style.backgroundColor == '')
            elem.style.backgroundColor = '#F5F507';
        else
            elem.style.backgroundColor = '';
    } 
</script>

You can find many options and ways in Jquery.
This was selected as the best answer
UU
Hi JeeT,

Thank you for your response and sample code above.

I needed to use inputField instead of outputField tag to use your code since outputField tag does not support onClick or onChange action..
  
<apex:outputField value="{!account[f.fieldPath]}" />

↓
  
<apex:inputField value="{!msg[f.fieldPath]}" onClick="toggleHighLight(this);"/>

I have not found completed answer for my issue yet but your idea helps me a lot!

As you suggested, I will have a look at JQuery.

Thank you.

 
JeeTJeeT
Hi,

I have gone through many requirements like this where user want to add their custom JS code at the time of inline edit.
So thought to have a work arround. May be if you would have find the solution kindly share.

Follow the code snipset below and try to 1) attach JQuery library into the VF Page. 2) Add a
"\<div class="accFieldSets"\>" component 
<apex:includeScript value="{!$Resource.jQueryMin1dot3}"/>
 <script> 
    $( document ).ready(function() {   
    $('.accFieldSets').find('tr').each(function(){
        var currentTR = this;
        $(this).find('td').each(function(){
            $(this).children().bind( "mouseenter mouseleave ", function() {            
                $(this).find('input:checkbox').each(function(){
                    bindOnclick(this, currentTR);
                    toggleHighLight(this, currentTR);
                });
            });         
        });
    });
    });
    function bindOnclick(thisElement, parentTR){
        $(thisElement).bind( "onclick", function() {
            toggleHighLight(thisElement, parentTR);
        });
    }
    function toggleHighLight(thisElement, parentTR){
            if($(thisElement).is(':checked'))
                parentTR.style.backgroundColor = '#F5F507';
            else
                parentTR.style.backgroundColor = '';
    }
 </script>
  <apex:form>
    <apex:inlineEditSupport event="ondblclick"/>
    <apex:pageBlock title="Sample Page Block">
        <div class="accFieldSets"> 
            <apex:pageBlockSection collapsible="false" title="Address" columns="2">
          
              <apex:repeat value="{!AddressFields}" var="f"> <!--AddressFields contains FieldSet, retreived by Apex-->
                <apex:outputField value="{!account[f.fieldPath]}" />
              </apex:repeat>
          
        </apex:pageBlockSection>
     </div>
    </apex:pageBlock>
  </apex:form>
This is working for me, you may have to fine tune it a little. :) Good Luck