+ Start a Discussion

How to Add Columns to VF page Dynamically


Can u any body help

to add columns on VF page by clicking add more columns.........just like add 20 more columns in google documents.....

Scenario:  Initially  I have 5 column in VF page,By clicking add 20 more columns then 20 columns will be added and displays totally 25 columns on page

Thank u



You can use apex:repeat to create columns dynamically. As per your Scenario a sample code is given below :



<apex:page controller="communityTest">


    <apex:commandButton value="Add moe 20 columns" action="{!addCol}" reRender="pan"/>



    <apex:outputPanel id="pan">


            <apex:repeat value="{!str}" var="t">


                    <apex:repeat value="{!iterate}">












public class communityTest


    public List<String> str{get; set;}

    public List<Integer> iterate{get;set;}


    public communityTest()


         str=new List<String>();

         iterate=new List<Integer>();

         for(Integer i=1;i<=20;i++)



         for(integer i=1;i<=5;i++)




    public pagereference addcol()


        for(integer i=1;i<=20;i++)




        return null;




Thank You Friend


please help me in the following scenario,


Scenario:Take standard object voters,on VF page initially 5 input text boxes to enter voter names rows wise like,






------------------------------------------------------------  like so on


         ADDMORE     SAVE


when i click on add more 5 more rows added to the page,when i click on save ,if any one of the inputfield is  empty,then error message sholud  throw at the side of that empty inputfield



Thank U



<apex:page Controller="pageController">
<apex:form >
 <apex:pageBlock title="Enter Employees" >
 <apex:pageBlockButtons location="bottom">
 <apex:commandButton action="{!addItem}" value="Add New"/>
 <apex:commandButton value="save" action="{!save}"/>
 <apex:pageblocksection title="Enter EmployeeNames Carefully">
 <apex:dataTable columns="1" value="{!textValues}" var="item">
<apex:column >
EmployeeName<apex:inputText value="{!item.value}" />


<apex:page Controller="pageController"><apex:form > <apex:pageBlock title="Enter Employees" >  <apex:pageBlockButtons location="bottom">  <apex:commandButton action="{!addItem}" value="Add New"/> <apex:commandButton value="save" action="{!save}"/>
 </apex:pageBlockButtons> <apex:pageblocksection title="Enter EmployeeNames Carefully">  <apex:dataTable columns="1" value="{!textValues}" var="item"><apex:column >EmployeeName<apex:inputText value="{!item.value}" /></apex:column></apex:dataTable></apex:pageBlockSection></apex:pageBlock></apex:form></apex:page>







public class pageController {


    public PageReference delRows() {

     return null;



 public PageReference save() {




     integer x=textvalues.size();


     for(integer i=0; i<=x ;i++)


        List<String> employeename;




    return null;




public class text {

public String Value { get; set; }



private List<text> textValues;


public void setTextValues(List<text> items) {

textValues = items;



public List<text> getTextValues() {

if(textValues==null) {

textValues = new List<text>();

textValues.add(new text());


return textValues;



public void addItem() {

textValues.add(new text());






Iam working with this code,but i dont know the way to add error messages at Empty inputfield