How to add and delete row in a datatable through visualforce

Scenario:
Through a VisualForce custom Page the user must have the
ability to add and delete row.

BrainStorming:
For each record display the record should have a link for deletion.
So that it will delete that row only.

For all the records, it will have a button call Add to add an
additional line to the records.

Tools needed:

1. An Force.com Account, if you do not have one
   
2. get a free developer account Here
3. Apex Controller
4. VisualForce Page

Lets Get Started:
1. Create your Apex Controller.
This will have the PageRefernce to:

• Add()
• Delete()
• Save()
  

2. Create your Visual Force Page.

First thing:
I will create a simple Apex Controller.
Go to Setup | Develop | Apex Classes
Click New

The Apex Class I created is off the Account Object and
Case Object.

It will show, all the Cases for the Account
associated with it.

Here the User can Add or Delete the case
one by one or even close it.

Below if the code for it:
/*Start off by placing a name for the controller,
When I build a controller I always place
controller at the end of the name*/

public class AccountsController {

/* I set the Account and Case Objects
here for use through out the code*/
public Account acct { get; private set;}
public Case[] caseItems { get; private set; }
private ApexPages.StandardController controller;

// constructor, loads the Account and
// any cases associated with it

void caseItems(id id) {
acct = [SELECT Id, Name, Type, AccountNumber, Site,
      (SELECT Id, CaseNumber, Status, Reason,Origin,
      Subject FROM Cases) FROM Account
      where id = :id limit 1];
//Hook caseItems to the query above
 caseItems = acct.Cases;
}

//Define the id
id accountid;

/* A List Method to delete the Cases assigned*/
public list todelete = new list();

public AccountsController (ApexPages.StandardController c)
{
/* this will kickoff you main page */
controller = c;
/* to get this current Account Id*/
accountid = c.getRecord().id;
/*kick off the init() function*/
init();
}
public AccountsController () {
accountid =
ApexPages.CurrentPage().getParameters().get('id');

init();

}

void init() {
/* load up Cases
basically we defined caseitems up on top, so
when the page loads then caseItems(accountId)
will go through the query and list out the
Items assoicated with it */
caseItems(accountid);  
}

public PageReference save() {
try {
upsert caseItems;
if ( todelete.size() > 0 ) {           
delete todelete;   
}
caseItems(acct.id);
}
catch ( DmlException exc) {
      ApexPages.addMessages(exc);
      return null;
}
return null;
}


/* your Delete functionality*/
public PageReference del() {

string delnumber =
ApexPages.CurrentPage().getParameters().get('delnumber');

system.assert( delnumber != null );
integer gone = -1;
integer i = 0;
  
for ( i=0; i< casenumber ="="" gone =" i;">= 0) {
todelete.add(caseItems.remove(gone) );
}
return null;
}
public PageReference add() {
// insert a new line, after user clicks Add
Case cs =  new Case(
AccountId = acct.id,
Subject = 'hello', Status = 'Low',
Reason = 'Other',Origin='Low'
);
caseItems.add ( cs );
return null;
 }
}

Second, Now for the Visual Force Page:
Setup | Develop | Pages
Click New
Name it editCases
Paste this in:

<apex:page standardController="Account"
extensions="AccountsController"
sidebar="false" tabStyle="Account" >

<style>
.dataCell input {
width:100px;
}
</style>

<apex:form >

<apex:actionFunction status="outStatus"
name="yacks" rerender="table" />

<apex:pageBlock title="Edit Cases"
mode="edit" id="table">

<apex:pageBlockButtons >


<apex:commandButton action="{!save}"
value=" Save " />

<apex:commandButton action="{!add}"
value="Add"
rerender="table" />

</apex:pageBlockButtons>

<apex:pageMessages />    
         
<apex:pageBlockSection
title="Account Name : {!Account.name} "
columns="1">

<apex:pageBlockTable
value="{!caseItems}"
var="item"  >
               
<apex:column
headerValue="Action">

<apex:commandLink
value="Del"
action="{!del}"
rerender="table" >

<apex:param
name="delname"
value="{!item.CaseNumber}" />

</apex:commandLink>

</apex:column>
              
<apex:column
headerValue="Case Number">

<a href="/{!item.CaseNumber}">
{!item.CaseNumber}</a>

<apex:outputPanel
rendered="{!isnull(item.CaseNumber)}" >

<apex:inputField
required="true"
value="{!item.CaseNumber}"
onchange="yacks();" />

</apex:outputPanel>

</apex:column>

<apex:column
headerValue="Subject">

<apex:inputField
required="true"
value="{!item.Subject}"
onchange="yacks();"/>

</apex:column>
                
<apex:column
headerValue="Reason" >

<apex:inputField
required="true"
value="{!item.Reason}"
onchange="yacks();" />

</apex:column>
           
<apex:column
headerValue="Origin" >

<apex:inputField
value="{!item.Origin}"
onchange="yacks();"/>

</apex:column>
              
</apex:pageBlockTable>

</apex:pageBlockSection>
              
</apex:pageBlock>

</apex:form>

</apex:page>

Some Definitions for the Apex Controller and VF Page:

1. Public Reference whtever() :

These are used for action methods for the controller.

Like Save, Add, Reset, Delete,Cancel

2. return Method :

This contains the value from either a query or action.
Within the save(), I return null; at the end to stay on
that same page. If I wanted to redirect back to the
account page I would return functionredirect();
And functionredirect() would be a custom function
to go back to the account page.

3. <apex:pageBlockButtons > :
Creates a button, that have the same style as
regular Salesforce.com buttons.
The Attributes for the pageBlockButtons Tag are:
Note** This came from the VisualForce Online Guide.



Great Materials for VisualForce Tutorials:

• Discussion Board on Force.com
• VisualForce Wiki on Force.com
•  

Thanks
Check out my Other Salesforce.com Blogs
Salesforce Made Easy

Salesforce Data Migration Made Easy
eTechCareers.com Coming Soon