+ Start a Discussion
DevmenDevmen 

i want to add ,display and delete records in VF page.

Hi,

I want to add ,display and delete child records through Vf page .How to solve this ?

Thanks
Best Answer chosen by Devmen
Khan AnasKhan Anas (Salesforce Developers) 
Hi,

I trust you are doing very well.

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

If you click on Account (parent) name, related contact will display and you can edit and delete the contacts (child). Also, you can create new related contact.

Visualforce:
<apex:page controller="AccConAddDeletec">
    <apex:form >
        
        <div id="formid">
            <apex:outputPanel id="tstpopup">
                <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}" />
                <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}" >
                    <apex:pageBlock title="My Content" mode="edit">
                        
                        <apex:pageBlockSection title="My Content Section" columns="1">
                            <apex:outputField value="{!con.Name}"/>                            
                            <apex:inputText value="{!contact.firstName}"/>                        
                            <apex:inputText value="{!contact.lastName}"/>                                 
                        </apex:pageBlockSection>
                        <apex:pageBlockButtons >
                            <apex:commandButton value="Save" action="{!updateContact}" >
                                <apex:param name="con1" assignTo="{!con.Id}" value="con1" />
                            </apex:commandButton>
                        </apex:pageBlockButtons>
                    </apex:pageBlock>
                    <apex:commandButton value="Close" action="{!closePopup}" reRender="tstpopup" />
                    
                </apex:outputPanel>
            </apex:outputPanel>
            
            <apex:pageBlock title="AccountTable">
                <apex:pageBlockTable value="{!Acclst}" var="A">
                    <apex:column headerValue="NAME OF THE ACCOUNT" > 
                        <apex:commandLink value="{!A.Name}" action="{!setupContacts}" rerender="conttable">
                            <apex:param value="{!A.Id}" name="idForConts" assignTo="{!recid}"/>
                        </apex:commandLink>
                    </apex:column>  
                    <apex:column value="{!A.Id}"/>
                    <apex:column id="two">
                        <apex:commandButton value="New Contact" action="{!showPopup}" reRender="tstpopup" >
                            <apex:param name="accid" value="{!A.id}" assignTo="{!accid}"/>
                        </apex:commandButton>
                    </apex:column>
                </apex:pageBlockTable>
            </apex:pageBlock>
            
            <apex:pageBlock title="Contacts">
                <apex:inlineEditSupport showOnEdit="update, cancelButton" 
                                        hideOnEdit="editButton" event="ondblclick" 
                                        changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
                <apex:pageBlockTable value="{!sub}" var="c" id="conttable">
                    <apex:column >
                        <apex:inputCheckbox value="{!c.check_box}" />
                    </apex:column>
                    <apex:column value="{!c.cs.FirstName}"/>
                    <apex:column value="{!c.cs.LastName}"/>
                </apex:pageBlockTable>
                <apex:pageBlockButtons >
                    <apex:commandButton id="update" value="Update" action="{!quickUpdate}" />
                    <apex:commandButton id="deleteit" value="Delete Selected" action="{!delete_now}"/>
                </apex:pageBlockButtons>
            </apex:pageBlock>
        </div>
    </apex:form>
    
    <style type="text/css">
        .custPopup{
        background-color: white;
        border-width: 2px;
        border-style: solid;
        z-index: 9999;
        left: 50%;
        padding:10px;
        position: absolute;
        width: 500px;
        margin-left: -250px;
        top:100px;
        }
        .popupBackground{
        background-color:black;
        opacity: 0.20;
        filter: alpha(opacity = 20);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9998;
        }
    </style>
    
</apex:page>

Controller:
public class AccConAddDeletec {
    
    public String message {get;set;}
    public List<WrapperClass> sub {get;set;}
    public Boolean check_box {get;set;}
    public List<Contact> del {get;set;}    
    public string recId{get;set;}    
    public list<Account> Acclst{get;set;}   
    public boolean displayPopup {get; set;}
    public String accid {get;set;}
    public Account con {get;set;} 
    public Contact contact {get;set;}
    public List<Contact> acnt;
    
    public AccConAddDeletec(){
        Acclst = [select Id,Name from Account LIMIT 10];
        sub=null;
        contact = new Contact();
        con = new Account();
        acnt = new List<Contact>();
    }
    
    public void closePopup() {
        displayPopup = false;
    }
    
    public void showPopup() {
        contact = new Contact();
        displayPopup = true;
        con = [SELECT Id, Name, Phone, (SELECT firstName, lastName FROM Contacts) FROM Account WHERE Id = :accid];
    }
    
    public void updateContact(){
        contact.AccountId = con.Id;
        acnt.add(contact);
        System.debug('acnt-> ' + acnt);
        upsert acnt;
        closePopup();
    }
    
    public void setupContacts() {
        sub = new List<WrapperClass>();
        for(Contact cr : [SELECT Id, FirstName, LastName from Contact where AccountId=:recId]){
            sub.add(new WrapperClass (cr, false));
        }
    }
    
    public PageReference quickUpdate(){
        try{
            List<Contact> accts = new List<Contact>();            
            for(WrapperClass w : sub){
                accts.add(w.cs);
            }
            UPDATE accts;
            return ApexPages.CurrentPage();
        }catch(Exception e){
            message='Data Base error during saving...';
            ApexPages.addMessage( new ApexPages.Message(ApexPages.Severity.ERROR, message));
            return null;
        }
    }
    
    public PageReference delete_now(){
        del=new list<Contact>();
        for(WrapperClass cc: sub){
            if(cc.check_box){
                del.add(cc.cs);
            }
        }
        delete del;   
        PageReference pr = new PageReference(System.currentPageReference().getURL());
        pr.setRedirect(true);
        return pr;
    }
    
    public class WrapperClass {
        public Contact cs {get; set;}
        public Boolean check_box {get; set;}
        
        public WrapperClass(Contact cs, Boolean check_box){
            this.cs = cs;
            this.check_box = check_box;
        }
    }
}


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi,

I trust you are doing very well.

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

If you click on Account (parent) name, related contact will display and you can edit and delete the contacts (child). Also, you can create new related contact.

Visualforce:
<apex:page controller="AccConAddDeletec">
    <apex:form >
        
        <div id="formid">
            <apex:outputPanel id="tstpopup">
                <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}" />
                <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}" >
                    <apex:pageBlock title="My Content" mode="edit">
                        
                        <apex:pageBlockSection title="My Content Section" columns="1">
                            <apex:outputField value="{!con.Name}"/>                            
                            <apex:inputText value="{!contact.firstName}"/>                        
                            <apex:inputText value="{!contact.lastName}"/>                                 
                        </apex:pageBlockSection>
                        <apex:pageBlockButtons >
                            <apex:commandButton value="Save" action="{!updateContact}" >
                                <apex:param name="con1" assignTo="{!con.Id}" value="con1" />
                            </apex:commandButton>
                        </apex:pageBlockButtons>
                    </apex:pageBlock>
                    <apex:commandButton value="Close" action="{!closePopup}" reRender="tstpopup" />
                    
                </apex:outputPanel>
            </apex:outputPanel>
            
            <apex:pageBlock title="AccountTable">
                <apex:pageBlockTable value="{!Acclst}" var="A">
                    <apex:column headerValue="NAME OF THE ACCOUNT" > 
                        <apex:commandLink value="{!A.Name}" action="{!setupContacts}" rerender="conttable">
                            <apex:param value="{!A.Id}" name="idForConts" assignTo="{!recid}"/>
                        </apex:commandLink>
                    </apex:column>  
                    <apex:column value="{!A.Id}"/>
                    <apex:column id="two">
                        <apex:commandButton value="New Contact" action="{!showPopup}" reRender="tstpopup" >
                            <apex:param name="accid" value="{!A.id}" assignTo="{!accid}"/>
                        </apex:commandButton>
                    </apex:column>
                </apex:pageBlockTable>
            </apex:pageBlock>
            
            <apex:pageBlock title="Contacts">
                <apex:inlineEditSupport showOnEdit="update, cancelButton" 
                                        hideOnEdit="editButton" event="ondblclick" 
                                        changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
                <apex:pageBlockTable value="{!sub}" var="c" id="conttable">
                    <apex:column >
                        <apex:inputCheckbox value="{!c.check_box}" />
                    </apex:column>
                    <apex:column value="{!c.cs.FirstName}"/>
                    <apex:column value="{!c.cs.LastName}"/>
                </apex:pageBlockTable>
                <apex:pageBlockButtons >
                    <apex:commandButton id="update" value="Update" action="{!quickUpdate}" />
                    <apex:commandButton id="deleteit" value="Delete Selected" action="{!delete_now}"/>
                </apex:pageBlockButtons>
            </apex:pageBlock>
        </div>
    </apex:form>
    
    <style type="text/css">
        .custPopup{
        background-color: white;
        border-width: 2px;
        border-style: solid;
        z-index: 9999;
        left: 50%;
        padding:10px;
        position: absolute;
        width: 500px;
        margin-left: -250px;
        top:100px;
        }
        .popupBackground{
        background-color:black;
        opacity: 0.20;
        filter: alpha(opacity = 20);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9998;
        }
    </style>
    
</apex:page>

Controller:
public class AccConAddDeletec {
    
    public String message {get;set;}
    public List<WrapperClass> sub {get;set;}
    public Boolean check_box {get;set;}
    public List<Contact> del {get;set;}    
    public string recId{get;set;}    
    public list<Account> Acclst{get;set;}   
    public boolean displayPopup {get; set;}
    public String accid {get;set;}
    public Account con {get;set;} 
    public Contact contact {get;set;}
    public List<Contact> acnt;
    
    public AccConAddDeletec(){
        Acclst = [select Id,Name from Account LIMIT 10];
        sub=null;
        contact = new Contact();
        con = new Account();
        acnt = new List<Contact>();
    }
    
    public void closePopup() {
        displayPopup = false;
    }
    
    public void showPopup() {
        contact = new Contact();
        displayPopup = true;
        con = [SELECT Id, Name, Phone, (SELECT firstName, lastName FROM Contacts) FROM Account WHERE Id = :accid];
    }
    
    public void updateContact(){
        contact.AccountId = con.Id;
        acnt.add(contact);
        System.debug('acnt-> ' + acnt);
        upsert acnt;
        closePopup();
    }
    
    public void setupContacts() {
        sub = new List<WrapperClass>();
        for(Contact cr : [SELECT Id, FirstName, LastName from Contact where AccountId=:recId]){
            sub.add(new WrapperClass (cr, false));
        }
    }
    
    public PageReference quickUpdate(){
        try{
            List<Contact> accts = new List<Contact>();            
            for(WrapperClass w : sub){
                accts.add(w.cs);
            }
            UPDATE accts;
            return ApexPages.CurrentPage();
        }catch(Exception e){
            message='Data Base error during saving...';
            ApexPages.addMessage( new ApexPages.Message(ApexPages.Severity.ERROR, message));
            return null;
        }
    }
    
    public PageReference delete_now(){
        del=new list<Contact>();
        for(WrapperClass cc: sub){
            if(cc.check_box){
                del.add(cc.cs);
            }
        }
        delete del;   
        PageReference pr = new PageReference(System.currentPageReference().getURL());
        pr.setRedirect(true);
        return pr;
    }
    
    public class WrapperClass {
        public Contact cs {get; set;}
        public Boolean check_box {get; set;}
        
        public WrapperClass(Contact cs, Boolean check_box){
            this.cs = cs;
            this.check_box = check_box;
        }
    }
}


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas
This was selected as the best answer
DevmenDevmen
Hi Khan,
Thanks for your reply.I will try this and let you know if it is working 

thanka
DevmenDevmen
Hi,

Instead of commandbutton i using commandlink to delete item.
Class:

public void loadData() {

 olilist= [SELECT Id,Quotation__c, Product_Brand__c , Product_Range__c ,Product_Name__c ,Name ,  
 Product__c ,Quantity__c ,Colour__c ,Total_Price__c,Price__c, Product_Code__c from Quotation_Line_Item__c where Quotation__c=:qt.id ];

}
public void deleteOppLI(){
    
  olilist= [SELECT Id,Product_Brand__c, Product_Range__c,Product_Name__c,Product__c ,Quotation__c,Quantity__c ,Colour__c ,Total_Price__c from Quotation_Line_Item__c  where id=:SelectedQuoteLineItemId ];
      system.debug('DELEEEEEE'+olilist);
       if(olilist.size() > 0 || olilist[0].Id != ''){

     delete olilist;

    }
    loadData();

  }

VFPage:
<apex:commandLink action="{!deleteOppLI}" onclick="if(!confirm('Are you sure?')) return false;">Del
    <apex:param value="{!c.Id}" name="idToDel" assignTo="{!SelectedQuoteLineItemId}"/>
</apex:commandLink>

Now the page is refreshing .Item needs to be removed from view list and database.

Thanks
DevmenDevmen
Now it is working .It was rendering issue
DevmenDevmen
Sure