Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
venkateshyadav1243venkateshyadav1243 

Highlighting the selected coloum

hi

I created vf page

i have some opportunities,

opportunity names are command links

in the click of opportunity name am poupalting the related objects records

when i click the opportunity name i want highlight the row

how can i do it

i use some jquerys but it applying for entire pagebloc table

i want highlight only selected opprtunity name

 

here is the my code can any one tel  me where am doing mistake.

 

 

<style>
datahighlight {
       background-color:pink !important;
}

</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
 $(document).ready(function(){
        $('.dataRow').click(function(){
           $(".dataRow").removeClass('datahighlight');
           $(this).addClass('datahighlight');
        });
      });

  </script>
     
             <apex:pageBlock mode="inlineEdit"  rowClasses="datahighlight">
            
                         <apex:pageBlockTable value="{!opp}" var="op">
                            <apex:column headerValue="Opportunity Name">
                             <apex:outputPanel >
                             <apex:commandLink action="{!request}" value="{!op.name}" >
                             <apex:param value="{!op.id}" name="abc" ></apex:param>
                             </apex:commandLink>
                             </apex:outputPanel>
                             </apex:column>
                             <apex:column headerValue="Company Name">
                            <apex:outputField value="{!op.AccountId}">
                            <apex:inlineEditSupport showOnEdit="saveButton, cancelButton"  
                hideOnEdit="editButton" event="ondblclick"  
                    changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
                    </apex:outputField>
                            </apex:column>
                             <                      
                     </apex:pageBlockTable>
           </apex:pageBlock>

 

Can any one help me.

 

Regards

venky.

Rahul SharmaRahul Sharma
By saying $('.dataRow'), you are actually referring to an element having class as dataRow.

But I could not see any of the component in your page which has that class. Try giving class(style class for visualforce components) to desired component(visualforce Tag).
Raj.ax1558Raj.ax1558

It can be possible using a string variable, little bit logic of If condition and CSS.

 

firstly decalre a varible in a class like -

public string selectOppId{get;set;}

 

now in visual force page declare CSS

<style>

.selected{

background-color: gray;

}

.nonSelected{

background-color:white;

}
</style>

 

now in a <apex:column> you can write -

<apex:column headerValue="Opportunity Name" sytleclass="{!if(selectOppId==op.id, selected, nonSelected)}">

 

And on selected of any column invoke a method & pass OPP id (using action function) to class and assign the selected id to selectOppId variable.

then rerender the pertuclar portion.

 

NOTE: Please if you satisfied then mask as solution for  help of other users.

 

Thank you.

Raj Jha