1

Great day!

I need help with formatting a table in a visualforce form that's showing a table of related child records. It is comparable to the opportunity product table wherein products with prices are listed with a total. I will be posting screenshot links and I'm hoping you can help me with this.

Table:
http://screencast.com/t/Z5A4a3gEvS0

visualforce code

 #TableInfo{width: 1000px; margin: 70px 0; }
    #TableInfo table{border: 1px solid #f78f1e;border-collapse: collapse;border-spacing: 0;}
    #TableInfo table tr th{background: #f78f1e;padding: 5px;text-align: center;color: #fff;font-size: 14px;font-weight: bold;}
    #TableInfo table tr td{border: 1px solid #e3e3e3;padding: 5px;text-align: center;color: #000;font-size: 12px;font-weight: bold; height:25px;}
    #TableInfo .WidthNormal{width: 240px;}
    #TableInfo .WidthSmall{width: 200px;}
    #TableInfo .SuperBold{font-size: 17px !important;}
    #TotalWeightId{text-align: right !important;padding: 0 !important;}
    #TotalWeightId span{padding: 10px 10px;background: #f78f1e;color: #fff   !important;}

       <div id="TableInfo">            
        <apex:dataTable value="{!Bill_of_Lading__c.Skids__r}" var="boflading" id="theTable" rowClasses="odd,even" styleClass="tableClass" border="0">                                                                                      

        <apex:column width="240">                               
        <apex:facet name="header">NO OF PCS</apex:facet>
        <apex:outputText value="{!boflading.Number_of_Pieces__c}"/>                                                                              
        </apex:column>

        <apex:column width="240">
        <apex:facet name="header">DESCRIPTION</apex:facet>
        <apex:outputText value="{!boflading.Name}"/>
        </apex:column>

        <apex:column width="240">
        <apex:facet name="header">DIMENSIONS</apex:facet>
        <apex:outputText value="{!boflading.Dimension__c}"/>
        </apex:column> 

        <apex:column width="240">
        <apex:facet name="header">WEIGHT</apex:facet>
        <apex:outputText value="{!boflading.Weight__c}"/>
        </apex:column>

        <apex:column width="240">
        <apex:facet name="header">UOM</apex:facet>
        <apex:outputText value="{!boflading.UOM__c}"/>      
        </apex:column>  

        <apex:column width="240">
        <tfoot>     
        <td colspan="3" id="TotalWeightId"><span>TOTAL WEIGHT</span></td>
        <td class="SuperBold" contenteditable="true"><apex:outputText value="{!Bill_of_Lading__c.Total_Weight__c}"/></td>
        <td class="SuperBold" contenteditable="true">L</td>   
        </tfoot>
        </apex:column>  

        </apex:dataTable>        
        </div>         


apex extension code

public void newSkid()
{
    if (updateSkids())
    {
      Skid__c skid=new Skid__c(Name=newSkidName, Dimension__c=newSkidDimension,   Number_of_Pieces__c=newSkidNumberofPieces, UOM__c=newskiduom, Weight__c=newskidweight, Bill_of_Lading__c=getBillofLading().id);
      insert skid;
     newSkidName=null;
      newSkidDimension=null;
      newSkidNumberofPieces=null;
      newskidbilloflading=null; 
      newskiduom=null;
      newskidweight=null;
      skids=null;
      }
   }

The table is supposed to look like this:
http://screencast.com/t/6Aw1TMb9ng

Note: Here are additional screenshots.

What it's supposed to look like

enter image description here

What it currently looks like

enter image description here

Thanks in advance!

Regards,

Pfang

  • What is the problem? – Sergej Utko Jul 9 '13 at 8:18
  • Hi Mohith, the main problem here is that the table has a summary row showing the total, the total is appearing multiple times every time a new child record is submitted. The total should appear only once at the bottom right corner. Let me see if I can post a screenshot. – Phil Dennison Fang Jul 9 '13 at 10:23
1

You are creating a footer for each record in your dataset.

Try changing your code to something like below. Notice the fact 'footer' isn't in an apex:column definition.

#TableInfo{width: 1000px; margin: 70px 0; }
#TableInfo table{border: 1px solid #f78f1e;border-collapse: collapse;border-spacing: 0;}
#TableInfo table tr th{background: #f78f1e;padding: 5px;text-align: center;color: #fff;font-size: 14px;font-weight: bold;}
#TableInfo table tr td{border: 1px solid #e3e3e3;padding: 5px;text-align: center;color: #000;font-size: 12px;font-weight: bold; height:25px;}
#TableInfo .WidthNormal{width: 240px;}
#TableInfo .WidthSmall{width: 200px;}
#TableInfo .SuperBold{font-size: 17px !important;}
#TotalWeightId{text-align: right !important;padding: 0 !important;}
#TotalWeightId span{padding: 10px 10px;background: #f78f1e;color: #fff   !important;}

   <div id="TableInfo">            
    <apex:dataTable value="{!Bill_of_Lading__c.Skids__r}" var="boflading" id="theTable" rowClasses="odd,even" styleClass="tableClass" border="0">                                                                                      

    <apex:column width="240">                               
    <apex:facet name="header">NO OF PCS</apex:facet>
    <apex:outputText value="{!boflading.Number_of_Pieces__c}"/>                                                                              
    </apex:column>

    <apex:column width="240">
    <apex:facet name="header">DESCRIPTION</apex:facet>
    <apex:outputText value="{!boflading.Name}"/>
    </apex:column>

    <apex:column width="240">
    <apex:facet name="header">DIMENSIONS</apex:facet>
    <apex:outputText value="{!boflading.Dimension__c}"/>
    </apex:column> 

    <apex:column width="240">
    <apex:facet name="header">WEIGHT</apex:facet>
    <apex:outputText value="{!boflading.Weight__c}"/>
    </apex:column>

    <apex:column width="240">
    <apex:facet name="header">UOM</apex:facet>
    <apex:outputText value="{!boflading.UOM__c}"/>      
    </apex:column>  

    <apex:fact name="footer">

    <td colspan="3" id="TotalWeightId"><span>TOTAL WEIGHT</span></td>
    <td class="SuperBold" contenteditable="true"><apex:outputText value="{!Bill_of_Lading__c.Total_Weight__c}"/></td>
    <td class="SuperBold" contenteditable="true">L</td>   
    </apex:facet>  

    </apex:dataTable>        
    </div>         

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.