Manually Updating a Grid VisualForce page
Grid Visualforce pages are created through the Grid Setup Page or the Conga Grid QuickStart as Single Tabs, MultiTabs, or Related Lists.
Single Tab Grid
<apex:page sidebar="false" showHeader="true" docType="html-4.01-strict"> 
<CRMC_PP:Grid ObjectName="Account" DelayLoad="false" ViewID="a1B1U000001q6wRUAQ" EnableNewButton="true" EnableNewInline="true" EnableEdit="true" EnableActions="true" EnableFieldChooser="true" EnableStickyViews="true" EnableToolbar="true" EnableViews="true" EnableFormatting="true" EnableReadingPane="true" /> 
<CRMC_PP:DrillUp /> 
</apex:page>
Above is an example of a Grid of Accounts that are set in a Salesforce Custom Tab.
The Components each have a value of True or False. This is the only value necessary to change in each component. The exception is the ViewID. See Hard-coding a View ID for more information.
Component |
Definition |
SideBar |
|
ShowHeader |
|
Grid ObjectName |
|
DelayLoad |
|
ViewId |
|
EnableNewButton |
|
EnableNewInline |
|
EnableEdit |
|
EnableActions |
|
EnableFieldChooser |
|
EnableStickyViews |
|
EnableToolbar |
|
EnableViews |
|
EnableFormatting |
|
EnableReadingPane |
|
Related List Grid
<apex:page standardController="Account" showHeader="false" docType="html-4.01-strict">
<CRMC_PP:Grid ObjectName="Contact" FKName="AccountId" FKValue="{!Account.Id}" DelayLoad="false" ViewID="" EnableNewButton="true" EnableNewInline="true" EnableEdit="true" EnableActions="true" EnableFieldChooser="true" EnableStickyViews="true" EnableToolbar="true" EnableViews="true" EnableFormatting="true" EnableReadingPane="true" />
<CRMC_PP:DrillUp />
</apex:page>
Above is an example of a Related List Grid of Contacts on an Accounts Page Layout. It contains all the same elements as the Single Tab above, but has these components that are specifically different:
Component |
Definition |
standardController |
|
FKName |
|
FKValue |
|
DelayLoad |
|
MultiTab Grid
<apex:page sidebar="false" showHeader="true" docType="html-4.01-strict">
<div id="tabstrip" style="display:none;"> <ul> 
<li class="k-state-active">Pending Orders</li>
<li>This Month</li>
<li>Last Month</li>
<li>This Year</li> 
<li><All/li>
<li>Order Detail (This Year)</li>
</ul>
<!-- Pending Orders -->
<div style="overflow:hidden;"> <CRMC_PP:Grid ObjectName="Order" DelayLoad="false" ViewID="a1B1U000001q6wM" 
EnableNewButton="true" EnableNewInline="true" EnableEdit="true" EnableActions="true" EnableFieldChooser="true" EnableStickyViews="true" EnableToolbar="true" EnableViews="true" EnableFormatting="true" EnableReadingPane="true" />
 <CRMC_PP:DrillUp /> 
 </div>

<!-- This Month -->
<div style="overflow:hidden;"> 
<CRMC_PP:Grid ObjectName="Order" DelayLoad="true" ViewID="a1B1U000001q6wN" EnableNewButton="true" EnableNewInline="true" EnableEdit="true" EnableActions="true" EnableFieldChooser="true" 
 EnableStickyViews="true" EnableToolbar="true" EnableViews="true" EnableFormatting="true" EnableReadingPane="true" />
 <CRMC_PP:DrillUp /> 
 </div>

<!-- Last Month --> 
<div style="overflow:hidden;"> 
<CRMC_PP:Grid ObjectName="Order" DelayLoad="true" ViewID="a1B1U000001q6xTMAM" 
 EnableNewButton="true" EnableNewInline="true" EnableEdit="true" EnableActions="true" EnableFieldChooser="true" 
 EnableStickyViews="true" EnableToolbar="true" EnableViews="true" EnableFormatting="true" EnableReadingPane="true" />
 <CRMC_PP:DrillUp /> 
</div>

<!-- This Year -->
<div style="overflow:hidden;"> 
<CRMC_PP:Grid ObjectName="Order" DelayLoad="true" ViewID="a1B1U000001q6xU" 
 EnableNewButton="true" EnableNewInline="true" EnableEdit="true" EnableActions="true" EnableFieldChooser="true" 
 EnableStickyViews="true" EnableToolbar="true" EnableViews="true" EnableFormatting="true" EnableReadingPane="true" />
 <CRMC_PP:DrillUp /> 
</div>

<!-- All -->
<div style="overflow:hidden;"> 
<CRMC_PP:Grid ObjectName="Order" DelayLoad="true" ViewID="a1B1U000001q6xY" 
 EnableNewButton="true" EnableNewInline="true" EnableEdit="true" EnableActions="true" EnableFieldChooser="true" 
 EnableStickyViews="true" EnableToolbar="true" EnableViews="true" EnableFormatting="true" EnableReadingPane="true" />
 <CRMC_PP:DrillUp /> 
</div>
 
 <!-- Order Detail - This Year -->
<div style="overflow:hidden;"> 
 <CRMC_PP:Grid ObjectName="OrderItem" DelayLoad="true" ViewID="a1B1U000001q6yY" 
 EnableNewButton="true" EnableNewInline="true" EnableEdit="true" EnableActions="true" EnableFieldChooser="true" 
 EnableStickyViews="true" EnableToolbar="true" EnableViews="true" EnableFormatting="true" EnableReadingPane="true" />
 <CRMC_PP:DrillUp /> 
</div>

</div>
<script>
$(document).ready(function() {
 $("#tabstrip").kendoTabStrip({
 activate: function(e){
 setTimeout(function(){ $(window).resize(); });
 }
 });
 $("#tabstrip").css("display", "block");
});
 </script>
</apex:page>
In the example above, Grid has several Tabs all based on the Order object and each with its own View ID. Each Grid is listed out by the Tab Strip labels. The MultiTab allows for a Grid Visualforce page to have multiple objects, or the same Object with different views loading by default, as exemplified above. This is also available as a Tab, or as a Related List. The components to be mindful are listed below:
Component |
Definition |
div Id Tabstrip |
|
li class = "k state active" |
|
DelayLoad |
|
If a user creates a MultiTab Grid and wants to either remove or add a new section, it must be done manually. To add a section, copy an existing segment and update the Object and View Id section, then update the List Options in the position to match.