+ Start a Discussion
MeerMeer 

Holding values in grid?

Hi.

 

I have a Visualforce page in it I have a pageblock and there is a button 'Add Line'. Now I want a grid in which  a new line should be added just for preview purpose. On the page i have a Save button, and when it is clicked I want to add all the Lines present in the grid to be saved in the Line__c object.  Can I do this in VFpage? Please provide a good example. Thank you.

 

NOTE: While adding new line in the grid I dont want to refresh the page.

 

Regards,

Meer Salman

BondicloudBondicloud

use <apex:actionregion> it willl work

 

BondicloudBondicloud

Hi ,

     this Example give better idea to u.

 

 

<apex:page standardController="Opportunity" extensions="regioncontroller">
  <apex:form >
    <apex:pageBlock title="Edit Opportunity" id="thePageBlock" mode="edit">
   
      <apex:pageBlockButtons >
        <apex:commandButton value="Save" action="{!save}"/>
        <apex:commandButton value="Cancel" action="{!cancel}"/>               
      </apex:pageBlockButtons>

    <apex:pageBlockSection columns="1" title="WITHOUT Action Region">
      <apex:inputField value="{!opportunity.name}"/>
      <apex:pageBlockSectionItem >
      <apex:outputLabel value="{!$ObjectType.opportunity.fields.stageName.label}"
                        for="stage"/>
      <!--
           Without the actionregion, selecting a stage from the picklist would cause
           a validation error if you hadn't already entered data in the required name
           and close date fields.  It would also update the timestamp.
      -->  
    
      <apex:actionRegion >
        <apex:inputField value="{!opportunity.stageName}" id="stage">
          <apex:actionSupport event="onchange" rerender="thePageBlock"
                              status="status"/>
          </apex:inputField>
          </apex:actionRegion>
      </apex:pageBlockSectionItem>
        <apex:inputfield value="{!opportunity.closedate}"/>
        {!text(now())}
        </apex:pageBlockSection>

      </apex:pageBlock>
    </apex:form>
    <apex:form >
    <apex:pageBlock >
   <apex:pageMessages id="messages1"/>    
   <apex:pageBlockSection columns="2" title="WITHOUT Action Region">
      <apex:outputText value="Name" />
      <apex:inputText value="{!name}">
         <apex:actionSupport event="onkeyup" reRender="outname,messages1" />
      </apex:inputText>
      <apex:outputText value="Job" />
      <apex:inputText required="true" id="job2" value="{!job}" />
   </apex:pageBlockSection>
<apex:outputText id="outname" style="font-weight:bold" value="Typed Name: {!name}" />
</apex:pageBlock>
</apex:form>
<apex:form >
    <apex:pageBlock >
   <apex:pageMessages id="messages1"/>    
   <apex:pageBlockSection columns="2" title="WITH Action Region">
      <apex:outputText value="Name" />
      <apex:actionRegion >
         <apex:inputText value="{!name}">
            <apex:actionSupport event="onkeyup" reRender="outname,messages1" />
         </apex:inputText>
      </apex:actionRegion>
      <apex:outputText value="Job" />
      <apex:inputText required="true" id="job2"  value="{!job}" />
   </apex:pageBlockSection>
   <apex:outputText id="outname" style="font-weight:bold" value="Typed Name: {!name}" />
   </apex:pageBlock>
</apex:form>    
</apex:page>

 

 

controller:

 

public with sharing class regioncontroller {
    public String name { get; set; }
    public String job { get; set; }
    public regioncontroller(ApexPages.StandardController controller) {

    }

}

MeerMeer

Hi Bondicloud,

 

Actually I am facing a problem with adding a row in the grid, and to hold the values till the save button is not clicked. I want something like, user can add as many lines as needed and all the lines should be stored in the grid. On the save button I want all the lines to be added in the line object.

 

Hope it is more clear now.

 

Regards,

 

Meer


BondicloudBondicloud

this Example helps to u:

 

 

<apex:page Controller="AddNew" tabStyle="Account" >
        <apex:sectionHeader title="Narayana" />
        <script>
        function onSaving(){
            alert(function calling);
            var saveBtn = document.getElementById('{!$Component.formId.panelId.tableId.trId.tdId.saveId}');
            alert('saveBtn '+saveBtn);
            saveBtn.disabled =false;
            saveBtn.value = 'Saving...';
            //var cnclBtn = document.getElementById('{!$Component.formId.pbId.pgBlockButtons.cnclBtn}');
            //cnclBtn.disabled = true;
            //cnclBtn.value = 'Saving...';
        }
        function afterSaving(){
            //j_id0:formId:pgBlock1:pgBlockButtons:edit
            var saveBtn = document.getElementById('{!$Component.formid.panelId.tableId.trId.tdId.saveId}');
            saveBtn.disabled = true;
            saveBtn.value = 'Save';
            //var cnclBtn = document.getElementById('{!$Component.formId.pbId.pgBlockButtons.cnclBtn}');
            //cnclBtn.disabled = false;
            //cnclBtn.value = 'Cancel';
            
        }
            function webserv(){
                alert('narayana123');
                var account = sforce.sObject("Account");
                alert('account'+account);
                var id = sforce.apex.execute("narapack.Webservices","makeContact",{lastName:"Smith",a:account})
                alert(contextUser);
                
            }
        </script>
         
        <apex:form id="formId">
           <apex:actionStatus id="saveStatus" onstart="onSaving();" onstop="afterSaving();"/>
             <apex:outputPanel id="fields" >
              <table align="center" id ="tableId">
        <tr id="trId">
                <td align="center" id="tdId">
                        <apex:commandButton id="saveId" value="Add New" action="{!addEntry}" reRender="fields,formId" status="saveStatus" ></apex:commandButton>
                        </td></tr>
                        <tr><td>
                        <apex:commandButton value="Save" action="{!saveRec}"  reRender="fields,form"  />
                        <apex:commandButton value="Cancel" action="{!cancelRec}" reRender="fields,form" onclick="webserv()"/>   
                  </td>
          </tr>
         </table>
                <table style="width:100%" columns="3">
                <tr>
                        <td align="center" style="width:5%">
                                <b><apex:outputlabel value="Delete" style="width:70%"></apex:outputlabel></b>
                        </td>
                        <td align="center" style="width:5%">
                                <b><apex:outputLabel value="name" style="width:70%"></apex:outputLabel></b>
                        </td>
                        <td align="center" style="width:5%">
                                <b><apex:outputLabel value="Date&Time" style="width:70%"></apex:outputLabel></b>
                        </td>
                        <td align="center" style="width:5%">
                                <b><apex:outputLabel value="Date" style="width:70%"></apex:outputLabel></b>
                        </td>
                        <td align="center" style="width:5%">
                                <b><apex:outputLabel value="DescheckBox" style="width:70%"></apex:outputLabel></b>
                        </td>
                        <td align="center" style="width:5%">
                                <b><apex:outputLabel value="URL" style="width:70%"></apex:outputLabel></b>
                        </td>
                
                
                </tr>
                <apex:repeat value="{!addTime}" var="a">
              <tr>
                        
                        <td align="center" style="width:5%">
                        <apex:commandLink value="Delete" action="{!deletRecord}" immediate="true" reRender="fields,formId">
                                <apex:param name="deletedSCId" value="{!a.Id}"/>
                        </apex:commandLink>
                    </td>       
                        <td align="center" style="width:15%">
                                <apex:inputField value="{!a.Name}" style="width:50%"></apex:inputField>
                        </td>
                        
                    <td align="center" style="width:15%">
                         <apex:inputField value="{!a.date_time__c}" style="width:50%"></apex:inputField>
                    </td>
                    <td align="center" style="width:15%">
                         <apex:inputField value="{!a.Date__c}" style="width:50%"></apex:inputField>
                    </td>
                        <td align="center" style="width:15%">
                        <apex:inputField value="{!a.discription__c}" style="width:50%"></apex:inputField>
                        </td>
                        <td align="center" style="width:15%">
                        <apex:inputField value="{!a.url__c}" style="width:50%"></apex:inputField>
                        </td>
                </tr>
                </apex:repeat>
            
                        </table>                
        
       
         </apex:outputPanel>             
        </apex:form>      
</apex:page>

 

controller:

 

public with sharing class AddNew {
        public  List<AddNew__c> addTime{get;set;}
        public AddNew(){
         
            addTime =[Select a.Name ,a.discription__c,a.url__c,a.date_time__c,a.date__c From AddNew__c a limit 2 ];
            if(addTime == null || addTime.size() == 0 ) {
                AddNew__c add1 =new AddNew__c();
                addTime.add(add1);
            }
        }
         public void deletRecord(){
            String deletedSCId = Apexpages.currentPage().getParameters().get('deletedSCId');
            List<AddNew__c> del =new List<AddNew__c>();
           if(deletedSCId != null && deletedSCId != '') {
            for(AddNew__c del2 : addTime){
                if(del2.Id == deletedSCId){
                    delete del2;
                }else {
                    del.add(del2);
                }
            }
            addTime=del;
           }else {
             addTime.remove(addTime.Size()-1);
           }
        }
       
       public void addEntry(){
        AddNew__c addnewrecord = new AddNew__c();
            addTime.add(addnewrecord);
       }
      
       public void saveRec() {
           upsert addTime;
         
       }
       /*public PageReference save() {
            update addTime;
            return null;
      }*/
       public PageReference cancelRec() {
        return null;
       }  
}

MeerMeer

Dear Bondicloud,

 

I am looking to work on gid, I can't see any grid in your page. Secondly I want to display the values in the grid not to save in the object until the user clicks the save button. Kindly view the code below, hope it will give you much more clear picture:

 

 

*************Controller*************

 

public class Fin_LineManager
{
    public Line__c newLine {get; set;}
    public Boolean refreshPage {get; set;}

    public Fin_LineManager(ApexPages.standardController stdn)
    {
       newLine  = new Line__c(Journal__c = ApexPages.currentPage().getParameters().get('id'));
       refreshPage=false;
    }   
      
    public PageReference Save()
    {            
       insert newLine;
       refreshPage=true;
       return null ;        
    }    
}

 

This page is overriden on New Page Layout 

*************VF Page*************

 

<apex:page standardController="Fin_Journal__c" extensions="Fin_LineManager">

<script src="../../soap/ajax/24.0/connection.js" type="text/javascript"></script>
<script type="text/javascript">
function GetDescription()
{
var queryresult = sforce.connection.query("SELECT Description__c FROM Code_Combination__c WHERE Name = '" + document.getElementById('{!$Component.MyForm:acc}').value + "'", queryresult);
var records = queryresult.getArray('records');
document.getElementById('{!$Component.MyForm:desc}').value = records [0].Description__c;
}
</script>

<apex:form id="MyForm">

<table border="0" cellspacing = "0" cellpadding= "2">
<tr><td></td></tr><tr><td></td></tr><tr>
<td><apex:image url="https://c.ap1.content.force.com/servlet/servlet.FileDownload?file=01590000000O4Wx" width="35" height="40"/></td>
<td>
<apex:outputText ><font size="1" color="#606060" face="Arial"><b>New Journal</b></font></apex:outputText ><br/>
<apex:outputText ><font size="4" color="Black" face="Arial">Journal Edit</font></apex:outputText>
</td>
</tr><tr><td></td></tr><tr><td></td></tr>
</table>

<center>
<apex:commandButton value="Save"/>
<apex:commandButton value="Save & New"/>
<apex:commandButton value="Cancel"/>
</center>

<table><tr><td>&nbsp;</td></tr></table>

<apex:pageBlock mode="edit">
<apex:pageblockSection columns="1" Title="Journal Details">
<apex:inputfield value="{!Fin_Journal__c.Period__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Journal_Date__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Card__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Description__c}" style="width:270px"/>
<apex:outputLabel ></apex:outputLabel>
<apex:outputLabel ></apex:outputLabel>
</apex:pageblockSection>
</apex:pageBlock>

<apex:pageBlock mode="edit">
<apex:pageblockSection Title="Journal Settings">
<apex:inputfield value="{!Fin_Journal__c.Journal_Name__c}"/>
<apex:outputLabel ></apex:outputLabel>
<apex:inputfield value="{!Fin_Journal__c.Batch__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Source__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Currency__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Status__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Category__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Currency__c}"/>
<apex:outputLabel ></apex:outputLabel>
<apex:inputfield value="{!Fin_Journal__c.Include_Tax__c}"/>
<apex:outputLabel ></apex:outputLabel>
<apex:outputLabel ></apex:outputLabel>
</apex:oageblockSection>
</apex:pageBlock>

<apex:pageBlock mode="edit" >
<apex:pageBlockSection title="+ New Line">
<apex:panelGrid columns="6" cellpadding="2" cellspacing="5">

<apex:outputText value="Account Code" style="font-weight: bold"/>
<apex:outputText value="Description" style="font-weight: bold"/>
<apex:outputText value="Job" style="font-weight: bold"/>
<apex:outputText value="Debit" style="font-weight: bold"/>
<apex:outputText value="Credit" style="font-weight: bold"/>
<apex:outputText />

<apex:inputfield value="{!newline.Code_Combination__c}" style=" width:250px"/>
<apex:inputfield value="{!newline.Description__c}" style=" width:250px"/>
<apex:inputfield value="{!newline.Job__c}"/>
<apex:inputfield value="{!newline.Debit__c}"/>
<apex:inputfield value="{!newline.Credit__c}"/>
<apex:commandButton value="Add Line" />

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

<apex:pageBlock Title="Lines" id="lines" mode="edit">
*************** Here I want a grid in which Line should be added on the click of Add Line Button
and the page should not be refreshed. However on the Click of Save button (at the top) Journal &
Lines should be added to the objects accordingly.***********************************************
</apex:pageBlock>

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

 

 

The object Journal__c and Line__c has master detail realtionship that is why while intializing newLine in controller I have passed the Journal__c id.. I know its quite understandable for you. The page is under construction so your ideas will be appreciable.. Thanks a lot again.

 

 

Regards,

Meer

 

 

BondicloudBondicloud






here we are using three concepts actionRegion ,rendered and another method with same as constructor addnew line code.

public void addNewRow() {

   newLine  = new Line__c(Journal__c = ApexPages.currentPage().getParameters().get('id'));
 
}

now when page is loading one new empty row will come in grid after that u call addnewRow() method , because of actionregion or rendered concepts the total grid not refresh . only addnewrow  grid will rendered. and because of calling addnewrow it will add one more row now... and fillaly save . wneneer u click on save u rendered total page grids . 

ex:
 <apex:pageMessages id="messages1"/>    
   <apex:pageBlockSection columns="2" title="WITH Action Region">
      <apex:outputText value="Name" />
      <apex:actionRegion >
        apex:commandButton id="saveId" value="Add New" action="{!addNewRow} reRender="fields,formId" status="saveStatus" ></apex:commandButton>
      </apex:actionRegion>
   
   </apex:pageBlock>

MeerMeer

I am not getting yu :(

 

can you please make the changes in the posted code :(

 

I will be very very thankful to you.

 

Regards,

 

Meer

BondicloudBondicloud

Hi Meer,

              i changed the code... look it once.

 

 

*************Controller*************

 

public class Fin_LineManager
{
    public Line__c newLine {get; set;}
    public Boolean refreshPage {get; set;}

    public Fin_LineManager(ApexPages.standardController stdn)
    {
        init();
    }   
     
    
     public  Fin_LineManager(){
         init();
                 
    }
    public void init(){
        newLine  = new Line__c(Journal__c = ApexPages.currentPage().getParameters().get('id'));           
                Line__c add1 =new Line__c();
                newLine.add(add1);
    }
    public PageReference Save()
    {            
       insert newLine;
       refreshPage=true;
       return null ;        
    }
     public void addNewRow() {
        Line__c addLine  = new Line__c();            
        newLine.add(addLine);           
 
    }  
}

 

This page is overriden on New Page Layout

*************VF Page*************

 

<apex:page standardController="Fin_Journal__c" extensions="Fin_LineManager">

<script src="../../soap/ajax/24.0/connection.js" type="text/javascript"></script>
<script type="text/javascript">
function GetDescription()
{
var queryresult = sforce.connection.query("SELECT Description__c FROM Code_Combination__c WHERE Name = '" + document.getElementById('{!$Component.MyForm:acc}').value + "'", queryresult);
var records = queryresult.getArray('records');
document.getElementById('{!$Component.MyForm:desc}').value = records [0].Description__c;
}
</script>

<apex:form id="MyForm">

<table border="0" cellspacing = "0" cellpadding= "2">
<tr><td></td></tr><tr><td></td></tr><tr>
<td><apex:image url="https://c.ap1.content.force.com/servlet/servlet.FileDownload?file=01590000000O4Wx" width="35" height="40"/></td>
<td>
<apex:outputText ><font size="1" color="#606060" face="Arial"><b>New Journal</b></font></apex:outputText ><br/>
<apex:outputText ><font size="4" color="Black" face="Arial">Journal Edit</font></apex:outputText>
</td>
</tr><tr><td></td></tr><tr><td></td></tr>
</table>

<center>
<apex:commandButton value="Save"/>
<apex:commandButton value="Save & New"/>
<apex:commandButton value="Cancel"/>
</center>

<table><tr><td>&nbsp;</td></tr></table>

<apex:pageBlock mode="edit">
<apex:pageblockSection columns="1" Title="Journal Details">
<apex:inputfield value="{!Fin_Journal__c.Period__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Journal_Date__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Card__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Description__c}" style="width:270px"/>
<apex:outputLabel ></apex:outputLabel>
<apex:outputLabel ></apex:outputLabel>
</apex:pageblockSection>
</apex:pageBlock>

<apex:pageBlock mode="edit">
<apex:pageblockSection Title="Journal Settings">
<apex:inputfield value="{!Fin_Journal__c.Journal_Name__c}"/>
<apex:outputLabel ></apex:outputLabel>
<apex:inputfield value="{!Fin_Journal__c.Batch__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Source__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Currency__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Status__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Category__c}"/>
<apex:inputfield value="{!Fin_Journal__c.Currency__c}"/>
<apex:outputLabel ></apex:outputLabel>
<apex:inputfield value="{!Fin_Journal__c.Include_Tax__c}"/>
<apex:outputLabel ></apex:outputLabel>
<apex:outputLabel ></apex:outputLabel>
</apex:oageblockSection>
</apex:pageBlock>

<apex:pageBlock mode="edit" >
<apex:pageBlockSection title="+ New Line">
<apex:panelGrid columns="6" cellpadding="2" cellspacing="5">

<apex:outputText value="Account Code" style="font-weight: bold"/>
<apex:outputText value="Description" style="font-weight: bold"/>
<apex:outputText value="Job" style="font-weight: bold"/>
<apex:outputText value="Debit" style="font-weight: bold"/>
<apex:outputText value="Credit" style="font-weight: bold"/>
<apex:outputText />

<apex:inputfield value="{!newline.Code_Combination__c}" style=" width:250px"/>
<apex:inputfield value="{!newline.Description__c}" style=" width:250px"/>
<apex:inputfield value="{!newline.Job__c}"/>
<apex:inputfield value="{!newline.Debit__c}"/>
<apex:inputfield value="{!newline.Credit__c}"/>
<apex:commandButton value="Add Line" />

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

<apex:pageBlock Title="Lines" id="lines" mode="edit">

    <apex:outputPanel id="fields" >
          <apex:actionRegion >
              <table align="center" id ="tableId">
                <tr id="trId">
                <td align="center" id="tdId">
                        <apex:commandButton id="saveId" value="Add New" action="{!addNewRow}" reRender="fields"  ></apex:commandButton>
                        </td></tr>                        
             </table>
           </apex:actionRegion >
                <table style="width:100%" columns="1">
                <tr>
                       
                        <td align="center" >
                                <b><apex:outputLabel value="name" style="width:70%"></apex:outputLabel></b>
                        </td>
                       
                
                
                </tr>
                <apex:repeat value="{!newLine}" var="a">
              <tr>
                        
                            
                        <td align="center" >
                                <apex:inputField value="{!a.Name}" style="width:50%"></apex:inputField>
                        </td>
                        
                   
                </tr>
                </apex:repeat>
            
                        </table>                
        
       
         </apex:outputPanel>
         
         
        (In save button u rerender form id)
        <apex:comandButton value="save" action="{!save}" reRender="formId" />
         
*************** Here I want a grid in which Line should be added on the click of Add Line Button
and the page should not be refreshed. However on the Click of Save button (at the top) Journal &
Lines should be added to the objects accordingly.***********************************************
</apex:pageBlock>

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

 

 

The object Journal__c and Line__c has master detail realtionship that is why while intializing newLine in controller I have passed the Journal__c id.. I know its quite understandable for you. The page is under construction so your ideas will be appreciable.. Thanks a lot again.

 

 

Regards,
Bondi.

 

 


MeerMeer

I am very thankful to you for being very helpful and kind.. But sorry to say the snippet you provided is not working there is a little error in it:

 

 public void init()

 {
        newLine  = new Line__c(Journal__c = ApexPages.currentPage().getParameters().get('id'));           
        Line__c add1 =new Line__c();
        newLine.add(add1);
 }

 

newLine.add(add1);

this line is not acceptable by the compiler :(

 

Thanks once again.

 

Regards,

Meer

 

MeerMeer

Dear Bondi,

 

I need something like this

 

<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">

function addRow(tableID)
{

var table = document.getElementById(tableID);

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount + 1;
}

</SCRIPT>
</HEAD>
<BODY>

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

<TABLE id="dataTable" width="70px" border="1">
<TR>
<TD> 1 </TD>
</TR>
</TABLE>

</BODY>
</HTML>

 

I have tried this in vfpage but still not working