I am having this requirement.
I have pageblocktable where I have rows initially. With button I add new row in table and then I want to have that row in one color and If user refreshes, I want that row to got to other color. Please give directions in this.
Thanks Arun K
So, you didn't give to much details, but here's what you can try. Add an integer property in you controller and initialize it in the constructor. Increment it each time you press Add button:
public integer x {get; private set;}
public myConstructor()
{ x = 0; }
public void Add()
{ x++; }
Then create some css style and add it conditionally to your row:
<style>
.redClass {
background-color: red;
}
.greenClass {
background-color: green;
}
</style>
<apex:column (...) styleClass="{!IF(x = 0, 'green', 'red')}" />
After page refresh, your counter will always be 0. After each call to Add method it will be greater. You could also create an array of counters to distinguish between separate rows. Also consider adding some nested IF formula to distinguish counter state.
EDIT:
As distinguishing between rows might be the most tricky part, what I would use is <apex:variable value="{!0}" var="index" />, then the <apex:repeat value="{!items}" var="item">, build a table with simple <td> tags, and increment index on each iteration with <apex:variable value="{!index + 1}" var="index" />. This way you can keep track on each row in the table from Visualforce. It should be a good starting point.
I have tried to simulate the situation as below. apex:pageBlockTable provides four CSS classes oddrow,evenrow,first and last to play with. I have used css class last in my solution. Based on a variable isRerender the class is added or removed. When user clicks on the "Add Attendee" button I am adding the class and the last row becomes red. And when user saves the record the css class last is removed and the row changes its color. Hope this helps.
VF Page
<apex:page standardController="Account" extensions="addAttendee" sidebar="false">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.oddrow{background-color: #00FFFF; }
.evenrow{background-color: #7FFFD4; }
.textalign{text-align:center; }
</style>
<script type="text/javascript">
function removeHighlight(elem){
$(elem).removeClass('highlight');
}
</script>
<apex:form >
<apex:pageBlock title="Accounts" id="pb">
<apex:pageMessages />
<apex:outputText rendered="{!isRerender}">
<style type="text/css">.last{background-color: #FF0000; }</style>
</apex:outputText>
<apex:variable var="rowNumber" value="{!0}"/>
<apex:pageBlockTable title="Contacts" var="acc" value="{!attendeeList}" rowClasses="oddrow,evenrow" onRowMouseOver="removeHighlight(this)">
<apex:column headerValue="No." style="width:20px; text-align:center;" headerClass="centertext">
<apex:outputText value="{0}" style="text-align:center;">
<apex:param value="{!rowNumber+1}" />
</apex:outputText>
</apex:column>
<apex:column headerValue="First Name" >
<apex:inputField value="{!acc.FirstName}"/>
</apex:column>
<apex:column headerValue="Last Name" >
<apex:inputField value="{!acc.LastName}"/>
</apex:column>
<apex:column headerValue="Phone" >
<apex:inputField value="{!acc.Phone}"/>
</apex:column>
<apex:column headerValue="Email" >
<apex:inputField value="{!acc.Email}"/>
</apex:column>
<apex:column headerValue="Action" >
<apex:commandButton value="Delete" action="{!deleteRow}" reRender="pb">
<apex:param name="rowIndex" value="{!rowNumber}"/>
</apex:commandButton>
<apex:variable var="rowNumber" value="{!rowNumber+1}"/>
</apex:column>
</apex:pageBlockTable>
<apex:commandButton action="{!addRow}" value="Add Attendee" reRender="pb"/>
<apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!save}" />
<apex:commandButton value="Cancel" action="{!cancel}"/>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>
Controller
public class addAttendee {
public Account accounts;
public Contact del;
public List < Contact > addattendeeList {
get;
set;
}
public List < Contact > delattendeeList {
get;
set;
}
public List < Contact > attendeeList {
get;
set;
}
public Integer totalCount {
get;
set;
}
public Integer rowIndex {
get;
set;
}
public List < Contact > delAttendees {
get;
set;
}
public Boolean isRerender{
get;
set;
}
public addAttendee(ApexPages.StandardController controller) {
isRerender = false;
accounts = (Account) controller.getRecord();
attendeeList = [Select id, firstName, LastName, Email, Phone from Contact where AccountId = : accounts.Id];
totalCount = attendeeList.size();
delattendeeList = new List < Contact > ();
delattendees = new List < Contact > ();
}
public void addRow() {
isRerender = true;
addattendeeList = new List < Contact > ();
attendeeList.add(new Contact(AccountId = accounts.Id));
}
public PageReference save() {
isRerender = false;
upsert attendeeList;
delete delattendeeList;
//return (new ApexPages.StandardController(accounts)).view();
PageReference pageRef = new PageReference('/apex/addattendeepage');
pageRef.getParameters().put('id',accounts.Id);
return pageRef;
}
public void deleteRow() {
rowIndex = Integer.valueOf(ApexPages.currentPage().getParameters().get('rowIndex'));
System.debug('rowbe deleted ' + rowIndex);
System.debug('rowm to be deleted ' + attendeeList[rowIndex]);
del = attendeeList.remove(rowIndex);
delattendeeList.add(del);
}
}
I used this code to dynamically add remove rows from this site.
