+ Start a Discussion
diydiy 

change commandlink color

In My pageblock table 5 rows.. 1st field is a commandlinks[1,2,3,4 and 5 values]..

 

If i click 1 means , 1 will be highlighted red color, other numbers 2,3,4,5 are asusual color,

click 2 means , 2 will be change red color , other numbers are 1,3,4,5 are asusual color,

cick 3 , means ,......

click 4 means .........

click 5 means ......

 

Sagarika RoutSagarika Rout

Hi Diya,

 

you need to define css in your VF page for this requirement.

 

like

  <style>
        .odd {
        background-color:#FFFFFF;
        
        }
        .even {
        background-color: #F8F8F8;
        }
    </style>

 

there is a attribute present in page block table called "row class".

Use the above css inside the row class attribute.

I think it will help you out.

 

 

Sagarika Rout

SFDC Developer

Puja_mfsiPuja_mfsi

Hi,

You can do one thing . Can you pass this value to controller if you click on that link? if no then u need to store that value in a class variable.Like:

 

Public class AccountController {

    public string char {get;set;}

}

 

suppose your page look like :

<apex:commandLink  action="{!yourAction}" value="1"  styleClass="{!IF(char == '1'   ,'clickLink','links')}"

          <apex:param value="1" assignTo="{!char}" name="column"></apex:param>
</apex:commandLink>

 

And need to declare two CSS:

.links {
      text-decoration:none;
}
.clickLink {
       text-decoration:none;
       background : #C6E1FF;
}

 

Please let me know if u have any problem on same and if this post help u please throw KUDOS by click on star at left.                      

diydiy

it selected all 5 numbers

Puja_mfsiPuja_mfsi

Hi Diya,

Could u please send me your code.

diydiy

Public class AccountController {

    public string char {get;set;}

rowcount - 0; - set in constructor

}

 

suppose your page look like :

 

<apex:variable value="{!rowCount}" var="ia"/>

 <apex:column headerValue="Itemno"   >

<apex:variable value="{!ia+1}" var="ia"/>

<apex:commandLink  action="{!displaynumber}" value="ia"  styleClass="{!IF(char == 'ia'   ,'clickLink','links')}"

          <apex:param value="ia" assignTo="{!char}" name="column"></apex:param>
</apex:commandLink>

 </apex:column>

 

And need to declare two CSS:

.links {
      text-decoration:none;
}
.clickLink {
       text-decoration:none;
       background : #C6E1FF;
}

Puja_mfsiPuja_mfsi

Hello Diya.

Please look in the below code for your reference:

 

Controller

Public Class TestingClass {
    public Integer charLink{get;set;}
    public integer rowCount{get;set;}
    public TestingClass() {
        rowCount = 0;
    }
    public List<Account> getAccounts() {
        return [select id,name from Account limit 5];
    }
    public void displayNumber() {
    }
}

 

Visual force page

 

<apex:page controller="TestingClass">
    <apex:form>
        <style>
            .links {
                text-decoration:none;
            }
            .clickLink {
                text-decoration:none;
                background : #C6E1FF;
            }
        </style>
        <apex:pageBlock>
            <apex:pageBlockTable value="{!Accounts}" var="acc">
                <apex:variable value="{!rowCount}" var="ia"/>
                    <apex:column headerValue="Itemno">
                        <apex:variable value="{!ia+1}" var="ia"/>
                        <apex:commandLink action="{!displaynumber}" value="{!ia}"

                                                                                styleClass="{!IF(charLink ==    ia,'clickLink','links')}" >
                            <apex:param value="{!ia}" assignTo="{!charLink}" name="column"></apex:param>
                        </apex:commandLink>
                    </apex:column>
                </apex:pageblockTable>
            </apex:pageBlock>
        </apex:form>
</apex:page>

 

 

Please let me know if u have any problem on same and if this post helps u please throw KUDOS by click on star at left.