Checkbox in a Table

Displaying the check box in a data table or page block table is a general requirement in every project. with the help of wrapper class we can display the checkboxes in a data table. For the select all checkbox we need to add small javascript so that if we select the header checkbox it will select all the checkboxes.

Please watch the below figure for details.

Page Code:

<apex:page controller="Checkbox_Class" Tabstyle="Account">
	<apex:form>
	 <!-- 
	 * This source code was written by SrinivasaRao Pendala. 
	 * I have made every effort and taken great care in making sure that the source
	 * code and other content included on my wiki is technically accurate.
	 * As with any code, ensure to test this code in a development environment 
	 * before attempting to run it in production.
	 -->

		<apex:pageBlock Title="Accounts with CheckBoxes">
			<apex:pageBlockSection Title="List of Available Accounts">
				<apex:dataTable value="{!accounts}" var="a" columnswidth="50px,50px" cellpadding="4" border="1">
					<apex:column >
						<apex:facet name="header"> <apex:inputCheckbox >
							<apex:actionSupport event="onclick" action="{!GetSelected}" onsubmit="checkAll(this)" rerender="Selected_PBS"/>
							</apex:inputCheckbox>
						</apex:facet>
						<apex:inputCheckbox value="{!a.selected}" id="checkedone">
						<apex:actionSupport event="onclick" action="{!GetSelected}" rerender="Selected_PBS"/></apex:inputCheckbox>
					</apex:column>
					<apex:column headervalue="Account Name" value="{!a.acc.Name}" />
					<apex:column headervalue="Account Number" value="{!a.acc.AccountNumber}" />
					<apex:column headervalue="Phone" value="{!a.acc.Phone}" />
				</apex:dataTable>
			</apex:pageBlockSection>

			<apex:pageBlockSection Title="Selected Accounts" id="Selected_PBS">
				<apex:dataTable value="{!SelectedAccounts}" var="s" columnswidth="50px,50px" cellpadding="4" border="1">
					<apex:column headervalue="Account Name" value="{!s.Name}" />
					<apex:column headervalue="Account Number" value="{!s.AccountNumber}" />
					<apex:column headervalue="Phone" value="{!s.Phone}" />
				</apex:dataTable>
			</apex:pageBlockSection>

		</apex:pageBlock>
	</apex:form>
	<script>
		function checkAll(cb)
		{
			var inputElem = document.getElementsByTagName("input");
			for(var i=0; i<inputElem.length; i++)
			{
				if(inputElem[i].id.indexOf("checkedone")!=-1)
				inputElem[i].checked = cb.checked;
			}
		}    
	</script>
</apex:page>

 
Controller Code:

public class Checkbox_Class 
{

   /*
   * This source code was written by SrinivasaRao Pendala. 
   * I have made every effort and taken great care in making sure that the source
   * code and other content included on my wiki is technically accurate.
   * As with any code, ensure to test this code in a development environment 
   * before attempting to run it in production.
   */

    List<accountwrapper> accountList = new List<accountwrapper>();
    List<Account> selectedAccounts = new List<Account>();
        
    public List<accountwrapper> getAccounts()
    {
        for(Account a&nbsp;: [select Id, Name, AccountNumber, Phone from Account limit 5])
        accountList.add(new accountwrapper(a));
        return accountList;
    }
    
    public PageReference getSelected()
    {
        selectedAccounts.clear();
        for(accountwrapper accwrapper&nbsp;: accountList)
        if(accwrapper.selected == true)
        selectedAccounts.add(accwrapper.acc);
        return null;
    }
    
    public List<Account> GetSelectedAccounts()
    {
        if(selectedAccounts.size()>0)
        return selectedAccounts;
        else
        return null;
    }    
    
    public class accountwrapper
    {
        public Account acc{get; set;}
        public Boolean selected {get; set;}
        public accountwrapper(Account a)
        {
            acc = a;
            selected = false;
        }
    }
}
Advertisements
This entry was posted in Apex, Visualforce. Bookmark the permalink.

4 Responses to Checkbox in a Table

  1. Rama Krishna says:

    Perfect.. Saved my day..

  2. karthik says:

    I am getting some error from this
    code in controller class the & symbol showing error

  3. Pradeep says:

    Thanks…..

  4. Ram says:

    hi Srinivas,

    this was really effective, i want to perform some operations on records like Delete, update on particular which i selected by check box. can you please help me out.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s