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
MayankDkPantMayankDkPant 

Change background color of a row for commandlink event

Hi,

 

I want to change the row of color in a pageblock data table.

<apex:page standardcontroller="account">

<apex:form id="form1">
       <apex:sectionHeader title="Interviwe Five"/>
        <apex:pageBlock >
          <apex:pageMessages escape="false"></apex:pageMessages>
            <apex:pageBlockTable value="{!acc}" var="a" >
            <apex:column headerValue="Name" id="col1">
                <apex:commandLink action="{!selectedaccount}" reRender="form1"  id="cmdlink" onclick="ChangeColor(this)">
                    {!a.name}
                    <apex:param value="{!a.name}" name="name"  assignTo="{!name}"/>
                </apex:commandlink>
            </apex:column>
            <apex:column value="{!a.BillingState}" id="col2" />
            <apex:column value="{!a.phone}" id="col3" />

</apex:form>

<apex:page >

 

This is the code to change color but it's not working.

Null value is passed as id, when i checked with alert function.

<script>
        function ChangeColor(clr)
        {   alert(document.getElementById(clr)); 
            var ctrl = document.getElementById(clr); 
            ctrl.style.color = 'red';
           
        }
    </script>

 Any help will be appreciated.

Best Answer chosen by Admin (Salesforce Developers) 
MayankDkPantMayankDkPant

I have done this. It was a solution with just a minor change 

rowelement.style.backgroundcolor='red';

All Answers

Navatar_DbSupNavatar_DbSup

Hi,


I think you have to specify the entire path for getting the id of the command button inside the JavaScript like below:

 

Var id=document.GetElementById(‘PageID:FormId:PageBlockId:PageBlockSectionId:CommandButtonId’);
MayankDkPantMayankDkPant

Thanks for reply.

I have got the id of the commandlink button

 

I am using this syntax to change color of row which is selected using command link but only commandlink column colors changes insted of whole row color. How can I acheive this?

 

document.getElementById(clr).style.backgroundColor = "green";

 

I have used oncomplete event for commandlink. If any help possible it will be highly appreciated.

 

Thanks in advance.


 
Navatar_DbSupNavatar_DbSup

Hi,

Try the below code snippet as reference:

 

<apex:page standardcontroller="account" recordSetVar="acc">

 

<script type="text/javascript">

        function ChangeColor(clr)

        {   var ids=clr.id;

            var ctrl = document.getElementById(ids);

            ctrl.style.color = 'red';

            var cellelement=ctrl.parentNode ;

            var rowelement=cellelement.parentNode ;

            for(var i=1;i<rowelement.cells.length;i++)

            {

            rowelement.cells[i].style.color='red';

            }

         }

    </script>

<apex:form id="form1">

       <apex:sectionHeader title="Interviwe Five"/>

        <apex:pageBlock >

          <apex:pageMessages escape="false"></apex:pageMessages>

            <apex:pageBlockTable value="{!acc}" var="a" >

            <apex:column headerValue="Name" id="col1">

                <apex:commandLink action="{!selectedaccount}" reRender="form1"  id="cmdlink" onclick="return ChangeColor(this);" rendered="true">

                    {!a.name}

                    <apex:param value="{!a.name}" name="name"  assignTo="{!name}"/>

                </apex:commandlink>

            </apex:column>

            <apex:column value="{!a.BillingState}" id="col2" />

            <apex:column value="{!a.phone}" id="col3" />

            </apex:pageBlockTable>

            </apex:pageBlock>

</apex:form>

</apex:page>

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 
MayankDkPantMayankDkPant

Thanks for the reply, but I want whole row color to be changed not the color of  text of columns in row.

But thanks for help.

 

With Regards,

Mayank

 
MayankDkPantMayankDkPant

I have done this. It was a solution with just a minor change 

rowelement.style.backgroundcolor='red';

This was selected as the best answer
HussainHussain

hi,

can you plz send your hole code to me..

bcz  i am also getting same problem please send the code to me.

My Mail Id: hussain.cloud@yahoo.com

 

Thanks and Regards 

Hussain