Tag Archives: PageBlockTable

Dynamically Add Delete Rows In PageBlockTable Visualforce Page

Biswajeet   July 30, 2016   No Comments on Dynamically Add Delete Rows In PageBlockTable Visualforce Page

Apex Class:

public class DemoController {
    
    Public List<Account> accList {get;set;}
    public Integer rowIndex {get;set;}
    
    public DemoController(){
        accList = new list<Account>();
        accList.add(new Account());
    }
    
    public void addRow(){
        accList.add(new Account());
    }
    
    public pagereference saveAccount(){
        Insert accList;
        return null;
    }
    
    public PageReference deleteRow(){
        rowIndex = Integer.valueOf(ApexPages.currentPage().getParameters().get('rowIndex'));
        accList.remove(rowIndex);
        return null;
    }
}

Visualforce Page:

<apex:page controller="DemoController">
    <apex:form id="fm">
        <apex:pageBlock id="pb">
            <apex:variable var="rowNumber" value="{!0}"/> 
            <apex:pageBlockTable value="{!accList}" var="ac">
                <apex:column headerValue="Account Name">
                    <apex:inputField value="{!ac.Name}"/>
                </apex:column>
                <apex:column headerValue="Account Number">
                    <apex:inputField value="{!ac.AccountNumber}"/>
                </apex:column>
                <apex:column headerValue="Account Type">
                    <apex:inputField value="{!ac.Type}"/>
                </apex:column>
                <apex:column headerValue="Industry">
                    <apex:inputField value="{!ac.Industry}"/>
                </apex:column>
                <apex:column headerValue="Action" >
                    <apex:commandButton value="Delete" action="{!deleteRow}" reRender="pb">
                        <apex:param name="rowIndex" value="{!rowNumber}"/>
                    </apex:commandButton>
                    <apex:variable var="rowNumber" value="{!rowNumber}"/>
                </apex:column>
            </apex:pageBlockTable>
            <apex:pageBlockButtons >
                <apex:commandButton value="Add Row" action="{!addRow}"/>
                <apex:commandButton value="Save Accounts" action="{!saveAccount}"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Output:

Highlight Selected Row in a table in Visualforce Page

Biswajeet   April 24, 2015   No Comments on Highlight Selected Row in a table in Visualforce Page

Here is an example to highlight the selected row in a page block table in visualforce page. To do this add the below code snippet to your visualforce page to highlight the selected row color among the rest of the rows in same page block table.

Visualforce Page:

<apex:page standardController="Account" recordSetVar="Accounts" sidebar="false" showHeader="false">  
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>  
    <style>
        .ui-state-active{
        border: 1px solid #fbd850;
        background: rgb(199,199,199);
        font-weight: bold;
        color: #eb8f00;
        }
    </style> 
    <script>  
    function highlightRow(row){  
        $('tr').removeClass('ui-state-active');  
        $(row).parent().addClass('ui-state-active');  
    }  
    </script>  
    <apex:form >  
        <apex:pageBlock >  
            <apex:pageBlockTable value="{!accounts}" var="a">  
                <apex:column value="{!a.Name}" onclick="highlightRow(this)"/>  
                <apex:column value="{!a.AccountNumber}" onclick="highlightRow(this)"/>
                <apex:column value="{!a.Type}" onclick="highlightRow(this)"/>  
                <apex:column value="{!a.Industry}" onclick="highlightRow(this)"/>  
                <apex:column value="{!a.Phone}" onclick="highlightRow(this)"/>  
            </apex:pageBlockTable>  
        </apex:pageBlock>  
    </apex:form>    
</apex:page>

Output:

Note: If you want to change the Highlighted color, you can write your won style class.

Dynamically Add Rows in Apex PageBlockTable

Biswajeet   December 25, 2014   No Comments on Dynamically Add Rows in Apex PageBlockTable

Controller:

public class Sample{
    
    Account acc = new Account();
    public List<Account> accList { get; set; }
    
    public Sample()
    {
        accList = new List<Account>();
        accList.add(acc);
    }
    
    Public void addAccount()
    {
        Account ac = new Account();
        accList.add(ac);
    }
}

Visualforce Page:

<apex:page Controller="Sample">
    <apex:form>
        <apex:pageBlock id="pbAcc">
            <apex:pageblockSection >
                <apex:pageBlockTable value="{!accList}" var="acc">
                    <apex:column headerValue="Account Name">
                        <apex:inputField value="{!acc.Name}"/>
                    </apex:column>
                    <apex:column headerValue="Account Number">
                        <apex:inputField value="{!acc.AccountNumber}"/>
                    </apex:column>
                    <apex:column headerValue="Account Type">
                        <apex:inputField value="{!acc.Type}"/>
                    </apex:column>
                    <apex:column headerValue="Industry">
                        <apex:inputField value="{!acc.Industry}"/>
                    </apex:column>
                </apex:pageBlockTable>
                <br/><apex:commandLink value="Add Row" action="{!addAccount}" reRender="pbAcc"/>   
            </apex:pageblockSection>        
            <apex:pageblockSection columns="1" >
                <apex:pageblockSectionItem >
                    <apex:commandButton value="Save" />
                    <apex:commandButton value="Cancel" />
                </apex:pageblockSectionItem>         
            </apex:pageblockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Output:

Difference Between Pageblocktable, Datatable And Repeat in Salesforce

Biswajeet   October 5, 2014   No Comments on Difference Between Pageblocktable, Datatable And Repeat in Salesforce

PageBlockTable:

  • PageBlockTable should be define inside apex:pageblock or apex:pageblocksection
  • PageBlockTable uses standard page styles
  • PageBlockTable has the required attribute “value”
  • Column headers will be displayed automatically

DataTable:

  • No need to write inside apex:pageblock or apex:pageblocksection
  • There is no required attribute value
  • The data can be displayed using custom styles
  • We need to specify column headers explicitly

Repeat:

  • No Salesforce styles inherited, no need to use apex:column
  • Simply data displayed in irregular format
  • You can have full control over rendering data