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
SJTTSJTT 

Highlight Row in a pageblocktable when clicking on commandbutton on that row

I have a Pageblocktable which displays a set of values. Now each row in this table has a commandbutton whose action method will display another table below this pageblocktable.Now I want to highlight the row  whose commandbutton I clicked. Can somebody help me with this?

Best Answer chosen by Admin (Salesforce Developers) 
Avidev9Avidev9

Well this can be easily done.

lets assume you are passing Id of the record when you click the command button so the code will be something like

 

 <apex:pageBlockTable value="{!reocords}" var="obj" id="suggestionPb" > 
       <apex:column headerValue="Select" styleClass="{!IF(passedId == Obj.Id,'ui-state-active','')}">
          {!obj.id}
       </apex:column>
       <apex:column value="{!obj.name}" styleclass="{!IF(passedId == Obj.Id,'ui-state-active','')}">
</apex:pageblocktable>

here once the record gets selected and the id matches the styleclass "ui-state-active" gets applied. Well ui-sate-active is part of jquery css to use that you have to import the css 

 

<apex:stylesheet value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css
"/>

 instead of that you can define your own class

 

<style>
.ui-state-active{

border: 1px solid #fbd850;
	background: #ffffff;
	font-weight: bold;
	color: #eb8f00;

}
<style>

 

All Answers

Avidev9Avidev9

Well this can be easily done.

lets assume you are passing Id of the record when you click the command button so the code will be something like

 

 <apex:pageBlockTable value="{!reocords}" var="obj" id="suggestionPb" > 
       <apex:column headerValue="Select" styleClass="{!IF(passedId == Obj.Id,'ui-state-active','')}">
          {!obj.id}
       </apex:column>
       <apex:column value="{!obj.name}" styleclass="{!IF(passedId == Obj.Id,'ui-state-active','')}">
</apex:pageblocktable>

here once the record gets selected and the id matches the styleclass "ui-state-active" gets applied. Well ui-sate-active is part of jquery css to use that you have to import the css 

 

<apex:stylesheet value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css
"/>

 instead of that you can define your own class

 

<style>
.ui-state-active{

border: 1px solid #fbd850;
	background: #ffffff;
	font-weight: bold;
	color: #eb8f00;

}
<style>

 

This was selected as the best answer
SJTTSJTT

Thanks...but I am not clear on the solution.

 This is how my code is:

 

<apex:form >
        <apex:pageBlock >
            <apex:pageBlockTable value="{!resList}" var="res" id="pb">
                <apex:column value="{!res.currCode} {!res.amount}" headerValue="Amount" />
                <apex:column value="{!res.amount}" headerValue="Currency" />
                <apex:column headerValue="Select">
                    <apex:commandButton value="Select" action="{!controllermethod}"/>
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>

 

when clicking on the command Button I have to get that entire row highlighted
Avidev9Avidev9
<apex:page controller="TestPage_con">
    <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:pageBlock >
        <apex:pageBlockTable value="{!Accounts}" var="acc">
            <apex:column value="{!acc.Name}" onclick="highlightElem(this)"/>
            <apex:column value="{!acc.Name}" onclick="highlightElem(this)"/>
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>

 Have a look at the above code. This code uses jquery to accomplish the same
GuyClairboisGuyClairbois

Hi Avi,

Thanks for your good idea! When implementing it, I found out that for pageBlockTable you might just as well use the javascript on table level instead of inside the columns: 

<apex:pageblockTable onRowClick="highlightElem(this)"

This way you don't have to include the onClick event in each and every column.

 

Be sure to update the javascript to:

        function highlightElem(elem){
            $('tr').removeClass('ui-state-highlight');
            $(elem).addClass('ui-state-highlight');
        }

Rgrds,

Guy
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student

Hey there, How may I implement this on an Account tabbed visualforce page. The related lists/custom objects are tabs which re-render the button half of the page when you click on them. I need to make it so the selection stays highlighted. Maybe I am missing something in the explanation. I dont exactly understand how to import the CSS file either...I tried saving it to static resources, maybe I did not do it right..
Sudip ManpuriaSudip Manpuria
Hi !

Were you bale to solve this problem ?
I have a similar situation.

Regards,
Sudip