5

I do not want to resort to HTML. How to merge cells in <apex:panelGrid>?

The below diagram shows column span merge using HTML tables. How to do both, column and row span merge, using Visualforce components only?

enter image description here

Improve this question

2 Answers 2

Reset to default
4

You can't merge the cells. But you can play with columns parameter and nesting another panel grid into the first one, but with a different columns number. Here is my example:

<style>
.colClass{
    width:50%;
    padding: 5px;
}
.myHeader {
    background: #cecece;
    font-weight: bold;
}
</style>

<apex:panelGrid columns="1" width="500" cellpadding="0" cellspacing="0" rules="all" frame="box">
    <!-- The first column -->
    <apex:panelGrid columns="2" width="100%"  cellpadding="0" cellspacing="0" rules="all">
        <!-- Output panel used to be able to layout the row -->
        <apex:outputPanel style="padding:5px;" layout="block" styleClass="myHeader">
            <apex:outputText value="Header 1"/>
        </apex:outputPanel>

        <!-- Another header column -->
        <apex:outputPanel style="padding:5px;" layout="block" styleClass="myHeader">
            <apex:outputText value="Header 2"/>
        </apex:outputPanel>

        <apex:panelGrid columns="2" width="100%" cellpadding="0" cellspacing="0" rules="all" columnClasses="colClass">
            <apex:outputText value="Text 1"/>
            <apex:outputText value="Text 2"/>
        </apex:panelGrid> 

        <apex:outputPanel style="padding:5px;" layout="block">
            <apex:outputText value="Text 3"/>  
        </apex:outputPanel>

    </apex:panelGrid>

    <!-- Merged header -->
    <apex:panelGroup layout="block" style="width:100%;" styleClass="myHeader">
        <apex:outputPanel style="padding:5px;" layout="block">
            <apex:outputText value="Header 3"/>  
        </apex:outputPanel>
    </apex:panelGroup>

    <apex:panelGrid columns="1" width="100%" cellpadding="0" cellspacing="0" rules="all" columnClasses="colClass">
        <apex:outputText value="Text 4"/>
        <apex:outputText value="Text 5"/>
    </apex:panelGrid>             

</apex:panelGrid>

Result:

enter image description here

Improve this answer
1
  • 3
    Be aware that nesting Visualforce elements like apex:panelGrid is not advised from a viewstate perspective. I do not recall which tutorial I watched/read/etc, but I do remember that salesforce.com was against using Visualforce elements when a normal element would suffice. In this specific case, since they want a custom table, normal HTML is more appropriate than an apex:panelGrid or nested elements.
    – sfdcfox ♦
    Commented Jul 3, 2013 at 17:04
1

You cannot use spanning columns in an apex:panelGrid. You should instead use a normal HTML table. Nesting managed elements (those with a namespace like apex or c) will bloat your view state size unnecessarily.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .