function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
LakshmanLakshman 

How to dynamically add rows in visualforce page

Hi All,

I have a page within which there a button "Add Filter". Beneath this button are some filters like:

 

Select Object(this is a select list containing all salesforce object)---Select Field(this is also a select list containing all fields of salesforce selected salesforce object)------Textbox(this is a textbox)------Remove(this is a button which should remove row).

 

When the user clicks on Add filter, a replica of all above filter items should be added beneath the current filter and on click of Remove button the respective filter should be removed.

 

Any one who as idea/sample code regarding this please help.

Thank you!

 

Regards,

Lakshman

My OwnMy Own

 

 

Laksman,

 

 1. Create a wrapper class with the fields, and when page is loaded add one empty object to List<Wrapper>, and bind the same to datatable/pageblock. 

2. When user clicks the "Add" then again create a copy(clone) the wrpper item and add it to the list and bind the table with rerender.

3. if user clicks on delete then you will be having the Index of item in list just remove the same.

 

 

 

 

 

My OwnMy Own

 

try with this code.

<apex:page controller="dynamicController"> 
    
   <apex:form >
       
    <apex:pageblock >
            <br></br>
            <br></br>
        <apex:commandButton value=" Add Row " action="{!AddRecord}" reRender="pb1"/>
            <br></br>
            <br></br>           
            <apex:pageBlockTable id="pb1" value="{!lstWrapper}"  var="item">
                <apex:column headerValue="Name">
                    <apex:outputLabel value="{!item.sName}" />
                </apex:column>
                 <apex:column headerValue="Gender">
                 <apex:outputLabel value="{!item.isFlag}" />
                </apex:column>
            </apex:pageBlockTable>            
    </apex:pageblock> 
    
     </apex:form>
</apex:page>

 

public with sharing class dynamicController {

    public PageReference AddRecord() {
        
       //Assign your own data to do this. for testing I just placed the dummy data.
       
       //Test Data
        MyWrapper oWrapp = new MyWrapper();
        oWrapp.sName='Test1'; 
        oWrapp.isFlag= false; 
        lstWrapper.add(oWrapp);
    
        return null;
    }


     public list<MyWrapper> lstWrapper {get;set;} 
      
     public dynamicController(){
        this.lstWrapper = new list<MyWrapper>();  
        MyWrapper oWrapp = new MyWrapper();
        oWrapp.sName='Test'; 
        oWrapp.isFlag= true; 
        lstWrapper.add(oWrapp);
              
     } 
      public class MyWrapper{
          public string sName{ get;set;}
          public boolean isFlag{get;set;}
      }
      
}

 

LakshmanLakshman

Your way is fine. I have done this in a bit different way, here is my code:

 

Apex Class:

public class Test
{
public List<Integer> counterId{get;set;}
List<SelectOption> options{get;set;}
public Test(ApexPages.StandardController controller)
{}
public Test()
{
options = new List<SelectOption>();
options.add(new SelectOption('Audi','Audi'));
counterId = new List<Integer>();
counterId.add(1);
}
public PageReference addFilter()
{
counterId.add(1);
return null;
}
public List<SelectOption> getCars()
{

return options;
}
}

 Visualforce Page:

 

<apex:page controller="Test" tabStyle="User" standardStylesheets="false">
<apex:form >
<apex:pageBlock id="thPB" >
<apex:commandButton value="Add New Row" action="{!addFilter}" reRender="thPB"/>
<apex:pageBlockSection >
<apex:repeat var="filter" value="{!counterId}">
<apex:inputText />
<apex:selectList >
<apex:selectOptions value="{!Cars}"></apex:selectOptions>
</apex:selectList>
</apex:repeat>
</apex:pageBlockSection>

</apex:pageBlock>

</apex:form>
</apex:page>

 I am able to add elements on click of add row.

What do you think about this?

Let me know your thoughs.

Thank you!

RupaliJRupaliJ

Hi Lakshman,

 

I tried your code and I am able to add rows dynamically.

 

Now the problem is, these rows I want to use for inserting custom object records. But, I am able to insert only last row record and not the previous one. Can you please tell me why this happening?

 

Thanks.

LakshmanLakshman

Please let me know your code so that I could figure it out.

 

Regards,

Lakshman

RupaliJRupaliJ

Thanks Lakshman.

 

I have 'Teacher Experience' as custom object that I want to insert dynamically.

 

public List<Teaching_Experience__c> te_List = new List<Teaching_Experience__c>();
public List<Integer> counterId{get;set;}

public insertcustobjController()
{
       counterId = new List<Integer>();
       
       counterId.add(1);       
}
public PageReference addFilter()
{
    te = new Teaching_Experience__c();    
    te_List.add(te);
    counterId.add(1);
    return null;
}
public PageReference save()
{
    insert te_List;
    return null;
}

 

<apex:pageBlock id="thPB">
<apex:commandButton value="Add New Row" action="{!addFilter}" reRender="thPB"/>
            <apex:pageBlockSection >
                <apex:repeat var="filter" value="{!counterId}">
                <apex:inputField value="{!te.Name_of_Institution__c}"/>  
                <apex:inputField value="{!te.Location__c}"/>  
                </apex:repeat>
            </apex:pageBlockSection>
</apex:pageBlock>

 If I add 3 rows, then I want to insert 3 records.  Please help me out to do this.

yarramyarram

Thank you very much Lakshman, your code was really helped for adding new rows dynamically.

 

 I have3fieldsononerow, 1.  Fields(PickList), 2. Operator(Picklist) 3. Value(TextBox) . But

i am facing the refresh problem, when the user entered first row data and click on "Add Row" Button, successfully Added New Row , But First row data will getting cleared.

 

How can i overcome this issue.... Please help me .

 

Thanks,

Yarram

nitsuanitsua

You could add a saving logic within the addRow method so that everything that has been modified is saved before the page refreshes.

PragdeshPragdesh
How to Edit the parent dummy Object values In that above concept of adding dummy record for creating new Row.
vamshi kothakapu 9vamshi kothakapu 9
I have problem same like this..plz someone help.