How to add the new rows dynamically in the middle of existing rows in visualforce page.

enter image description here

My rows will like this shown in image. I can delete the rows where ever i want, but new rows are added in end of the row. I need to add the new rows b/w the rows.


    <apex:pageMessages id="pgm"/>
    <apex:variable var="rowNum" value="{!0}"/>
    <apex:pageblockTable value="{!lstWrapper}" var="a" rows="{!rows}" >
        <apex:column headerValue="Fields" >
            <apex:SelectList value="{!a.strField}" size="1" onchange="RefreshFilter1();" >
                <apex:selectOptions value="{!Fields}" />
        <apex:column headerValue="Operator" >
            <apex:selectList value="{!a.strOperator}" multiselect="false" size="1" >
                <apex:selectOptions value="{!OperatorsOptions}" />                
        <apex:column headerValue="Value" >
            <apex:inputText id="value1" value="{!a.strFilterValue}" />
        <apex:column headervalue="Condition" >
            <apex:selectlist value="{!a.strANDORCompare}" size="1">
                <apex:selectOptions value="{!ANDOROptions}" />
        <apex:column >
           <apex:commandButton id="cmdAdd" value="+" action="{!addRows}" reRender="out1"/>
            <apex:commandButton id="cmdRmv" value="-" action="{!rmvRows}" reRender="out1" rendered="{!rowNum>0}">
                <apex:param name="rowIndex" value="{!rowNum}" />
            <apex:variable var="rowNum" value="{!rowNum+1}"/>


public with sharing class RowsController{
    public integer rows                                     { get; set; }
    public List<CustomListViewFilterWrapper> lstWrapper     { get; set; }
    public List<ADI_Decision__c> lstDecision                { get; set; }
    public Integer rowNum                                   { get; set; }
    List<SelectOption> lstFieldOptions = new List<SelectOption>();
    List<SelectOption> lstOperatorOptions = new List<SelectOption>();   
    List<SelectOption> lstAndOROptions = new List<SelectOption>();  
    string selField = '';
    string selOperator = '';
    string selFilterValue = '';
    string selAndOrOption = '';

    public RowsController() {
        lstDecision = new List<ADI_Decision__c>();    
        lstWrapper = new List<CustomListViewFilterWrapper>();
        rows = 3;        
    public void filterRows(){
        for(integer i=1;i<4;i++){
            selField = 'null';selOperator = 'null'; selFilterValue = ''; 
            objDecision1 = new ADI_Decision__c();
            CustomListViewFilterWrapper objWrapper = new CustomListViewFilterWrapper(rows,selField,selOperator,selFilterValue,'AND',objDecision1);
    public void addRows(){
        rows = rows + 1;
        CustomListViewFilterWrapper objWrapper = new CustomListViewFilterWrapper(rows,selField,selOperator,selFilterValue,'AND',objDecision1);
    public void rmvRows(){
        rowNum = Integer.valueOf(ApexPages.currentPage().getParameters().get('rowIndex'));
    public class CustomListViewFilterWrapper{
        public integer rowCount             { get; set; }
        public string strField              { get; set; }
        public string strOperator           { get; set; }
        public string strANDORCompare       { get; set; }
        public string strFilterValue        { get; set; }
        public ADI_Decision__c objDecision  { get; set; }

        public CustomListViewFilterWrapper(integer i,string str1,string str2,string str3,string str4,ADI_Decision__c act1){
             this.rowCount = i;
             this.strField = str1;
             this.strOperator = str2;
             this.strFilterValue = str3;
             this.strANDORCompare = 'and';
             this.objDecision = act1;
  • 1
    Can you add more details into this question? How does your existing rows look like? Is that linked to any controller / database object?
    – Lance Shi
    Commented Jul 28, 2015 at 4:49
  • Hi Lance, i am added image for getting some idea. I am using wrapper class for creating these rows. Commented Jul 28, 2015 at 5:08
  • I guess pasting part of your page and controller code will help us understanding your scenario
    – Lance Shi
    Commented Jul 28, 2015 at 5:17
  • Hi Lance, can you check my code. Commented Jul 28, 2015 at 7:07

2 Answers 2


I tried to find a method to insert into the middle of the list but got no luck. So I manually implemented it... Here is the code which should work for you:

In Page:

    <apex:commandButton id="cmdAdd" value="+" action="{!addRows}" reRender="out1"/>
        <apex:param name="rowIndex" value="{!rowNum}" />


    public void addRows(){
        rows = rows + 1;
        rowNum = Integer.valueOf(ApexPages.currentPage().getParameters().get('rowIndex'));
        CustomListViewFilterWrapper objWrapper = new CustomListViewFilterWrapper(rows,selField,selOperator,selFilterValue,'AND',objDecision1);
        List<CustomListViewFilterWrapper> newList = new List<CustomListViewFilterWrapper>();
        for(Integer i = 0; i < rowNum; i++) {
        for(Integer i = rowNum; i < lstWrapper.size(); i++) {
        lstWrapper = newList;

Do the following:

  • Add an Index variable in the Visualforce page. Pass this index whenever you click on the + icon or whatever button you have to add the rows. See below example:
> <apex:variable var="index" value="{!0}" />
>     <apex:pageBlockTable var="wrapElem" value="{!wrapList}">
>         <apex:column>
>             <apex:commandButton value="Add Row" action="{!addRow}">
>                  <apex:param value="{!index}" assignTo="{!index}" name="index" />
>             </apex:commandButton>
>             <apex:variable var="index" value="{!index + 1}" />
>         </apex:column>
>     </apex:pageBlockTable>
  • In the controller function, add a new row to your wrapper list at the index position you have passed. You can use the list function .add(index, element).

Please note that the above code may not be accurate syntax and you may have to add additional logic in your controller function. But this should guide you in achieving what you need.

  • Hi Rajesh, i done this for remove button, same not working in add button. Commented Jul 28, 2015 at 5:51
  • For the Add button, I do not see the param been passed like you are doing for remove. Also, you need to use the add with index function of list and not the normal add function. The normal add function adds to the end of the list. See here: developer.salesforce.com/docs/atlas.en-us.apexcode.meta/…
    – RajeshShah
    Commented Jul 28, 2015 at 8:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .