+ Start a Discussion
MeerMeer 

Grid in VisualforcePage

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

CharlyGCharlyG
<apex:page standardController="Contact" extensions="mycustomcontroller" ShowHeader="False" sidebar="False">
<apex:form >

<apex:outputPanel layout="block" style="overflow:auto">
<apex:pageBlock title="My title" mode="edit" id="table">

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

<apex:pageMessages />    



<apex:pageBlockTable value="{!customobject}" var="av" id="table" width="100%" title="Mytitle" border="1"  >
    <apex:facet name="footer">
     <apex:commandLink value="Add Row" action="{!addRow}" rerender="table,error,status"/>
    </apex:facet>
         <apex:column headerValue="Action">
          <apex:actionRegion >
            <apex:commandLink value="Del" action="{!del}" rerender="table,status" >
             <apex:param name="delname" value="{!av.Name}" />
                           
            </apex:commandLink>
          </apex:actionRegion>
        </apex:column>
        <apex:column headerValue="To" >
         <apex:inputField value="{!av.somefield__c}" required="true" />
        </apex:column>    
       </apex:pageBlockTable>   
      </apex:pageblock>
     </apex:outputPanel>
</apex:form>
</apex:page>

 I have recently done something similiar to what you want - here is the VF and controller - I hope this helps

 

public with sharing class mycustomcontroller{

public mycustomobject__c[] customobject{get; private set;}   
public Contact thecontact { get; private set;}
private final ApexPages.StandardController controller;
integer i = 0; 


void customobject(id id) {
thecontact = [SELECT Id, Name,  (SELECT Id, Name FROM mycustomobject__r order by Somefield__c asc) FROM Contact where id = :id limit 1];
//Hook Items to the query above
 customobject= thecontact.mycustomobject__r;
}

id thecontactid;

 public mycustomcontroller(ApexPages.StandardController c) {
     controller = c;
     
     thecontactid = c.getRecord().id;
      init();
 }

    public mycustomcontroller() {
        thecontactid=ApexPages.CurrentPage().getParameters().get('id');
      
        init();
    }    

    void init() {
        customobject(thecontactid);  
    }
 
 /* A List Method to delete the Lines assigned*/
      public list<Mycustomobject__c> todelete = new list<Mycustomobject__c>();
     

public PageReference save(){
         for ( i=0; i< newavailability.size(); i++ ) { 
            customobject[i].Field1__c =  thecontactid.Field1__c; 
            customobject[i].Field2__c =  thecontactid.Field2__c; 
            customobject[i].Field3__c =  thecontactid.Field3__c; 
            customobject[i].Field4__c =  thecontactid.Field4__c; 
        }

        upsert customobject;
        system.debug('***customobject='+customobject);
        
        if ( todelete.size() > 0 ) {           
            delete todelete;   
        
        }
        
        PageReference home = new PageReference('/apex/MyVFPage?id='+thecontactid);
        home.setRedirect(true);
        return home;
    }
   
    
    public PageReference editlines(){    
        PageReference editlines= new PageReference('/Apex/MyVFLinesPage?id='+thecontactid);
        editlines.setRedirect(true);
        return editlines;
    }
  
  /* your Delete functionality*/
integer gone = -1;

Public PageReference del() {

string delname = ApexPages.CurrentPage().getParameters().get('delname');
system.assert( delname != null );

integer i = 0; 

for ( i=0; i< customobject.size(); i++ ) { 
if (customobject[i].Name == delname) { 
gone = i;
} 
}
if ( gone >= 0) { 
todelete.add(customobject.remove(gone) ); 
}
return null;
}

public void addrow(){
 
for(Integer i=0;i<1;i++){
        customobject.add(new MyCustomObject__c(Contact__c = thecontactid));
    }
    }
}

 

MeerMeer

Hi CharlyG,

 

void customobject(id id) {
thecontact = [SELECT Id, Name, (SELECT Id, Name FROM mycustomobject__r order by Somefield__c asc) FROM Contact where id = :id limit 1];
//Hook Items to the query above
customobject= thecontact.mycustomobject__r;
}

 

In this area are you getting the Parent Id and associating the Child relation with Parent  Id?

 

Thanks for the post.

 

Regards,

Meer

CharlyGCharlyG

You are right.

 

The code actually makes provision for adding line items to a custom object. We used it to add job items to a jobcard.

 

You should be able to take the concept and bits of it to fit your page.

 

Hope this helps?

 

Charly

MeerMeer

Sorry I will eat your brain on this, actually I am new to salesforce so don't know much about it.. Well In your case Contact is Parent and CustomObject__c is Child, Am I right?

CharlyGCharlyG

Yes :-) What are your requirement exactly?

 

You can post your code and requirement and I can have a look?

MeerMeer

Thank you so very much for helping me out :)

 

*************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:outputPanel rendered="true">
<apex:outputPanel rendered="{!refreshPage}">
<script>
window.top.location='/{!Fin_Journal__c.id}';
</script>
</apex:outputPanel>
</apex:outputPanel>

<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:pageblockSection>
</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.

 

I guess its a challenge for you now :) 

 

Regards,

Meer