Modal dialog in VisualForce page using Jquery

{!$Label.GW_Volunteers__labelReturnToCalendar}

 


 

  null}" >

{!$ObjectType.Contact.Fields.Volunteer_Skills__c.Label}:

 
  null}" >

,


 

 

  var x = JobShiftDateTimeString('{!shift.Start_Date_Time__c}', '{!shift.Duration__c}'); 
 OpenSignUpDlg('{!job.Id}', '{!shift.Id}', '{!JSENCODE(job.Name)}', x); 
 return false;"
 >{!$Label.labelLinkSignUp}

 


 

 {!$Label.GW_Volunteers__labelReturnToCalendar}

styleClass=”{!IF(f.Type == ‘Long Text Area’, ‘cssInputFields cssTextArea’, ‘cssInputFields’)}” />

styleClass=”{!IF(f.Type == ‘Long Text Area’, ‘cssInputFields cssTextArea’, ‘cssInputFields’)}” />


immediate=”false” status=”statusSignUp” />



{!$Label.labelVolunteerSignupThankYou}

Hierarchy in VisualForce

Hierarchy in VisualForce is an interesting feature unique to VisualForce

This is an example of how to build a hierarchy Lists in VF page with select checkboxes. It will have a checkbox at parent level with which you can select all the child automatically. It has a neat link with which you can show or hide children under a parent row. It uses jquery libraries for achieving this. It has a list of accounts with each accounts displaying all its contacts in a hierarchy view.

Apex Class

public class accconhierarchy {
    Private list acc;
   
    public List accountList { get; set; }
    public accconhierarchy (){
        List cw;
        accountList = new List();
        acc = [select id,name,industry,billingcountry,createdbyid,(select id,name,email,phone from contacts) from account limit 20];
        for(account a:acc){
            cw = new list();
            For(contact co : a.contacts){
               cw.add(new contactWrap(co));
            }
            accountList.add(new accountWrap(a,false,cw));
        }
    }
   
    public class accountWrap{
        public account oAccount{get;set;}
        public boolean isSelected{get;set;}
        public List contactset{get;set;}
        public accountWrap(account a,boolean b, List c){
            oAccount=a;
            isSelected=b;
            contactset =c;           
        }
    }
   
    public class contactWrap{
        public contact oContact{get;set;}
        public boolean isSelected{get;set;}       
        public contactWrap(contact a){
            oContact=a;
            isSelected=false;                      
        }
    }
   
}

Visualforce Page


 
     

 



                        rendered=”{!accountList.size!=0}”>


                           


                                   Action


                                   Account Name


                                   Industry


                                   Billing Country


                                   Createdby




                                value=”{!accountList}”
                                var=”item”>
                                  


                                    

                                            value=”{!item.IsSelected}”
                                            onclick=”javascript:toggleSelectAll(this, ‘{!$Component.repeatAccount}’);”/>
                                   


                                    
                                       
                                           
                                           


Contacts


                                               
                                                       Action
                                                       Name
                                                       Email
                                                       Phone

                                                    value=”{!item.contactSet}”
                                                    var=”subitem”>
                                                        

                       
                   
   
   
 

JS function toggleContactRow is used to show or hide contacts and toggleSelectAll is for header level checkbox at the parent Level.

Javascript to select all checkboxes in visualforce page

 

I needed to develop a custom visualForce page which would hold a page block table which would contain a checkbox and details of a custom object based on which user can select and click on buttons to perform some operations.

 

 

I wrapped the custom object record and check box in a wrapper class. I needed a simple functionality when the header checkbox is selected or deselected accordingly all the checkbox will get selected or deselected accordingly. So i looked into community and first result community gave is this(controller way). It involved calls to back end and as a result functionality is little slow.

So I went for a Javascript solution which would provide a faster,elegant and much simpler way.Here is the VF code which was used in the page above.

 

‘checkedone‘)”/>

Id
Name

Note that I have set the id of the checkbox as checkedone and while clicking on header checkbox it calls a javascript function  checkAll. Giving an id will segregate all the checkboxes in the table. Here is the javascript which would handle the selecting and deselecting all of the checkboxes which has id checkedone in it.