function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Persistent SysPersistent Sys 

Dynamic data grid in VisualForce

How to create a dynamic grid in VisualForce which has few cells as editable text boxes or multi-select checkbox or a drop-down spread across the grid and few cells having color coding?

Grid will display the records stored in an sObject but after some processing.
Step:1 Get all records from an sObject
Step:2 See which column values go in which cells, format
Step:3 Display some cells as color coded or editable based on step2

Any sample code would be appreciated.

Ron HessRon Hess
Here is a simple multi-line editor , you will have to add your own color and processing... :smileywink:

you may have to remove the custom field 
SLAExpirationDate

from this sample to get it to save, or just comment it out.

Code:
<apex:page controller="multiEditCon">

<apex:form>
<apex:pageBlock title="Multi Line Edit">

 <apex:commandButton value="Submit" action="{!save}" />
 <apex:commandButton value="Add" action="{!add}" rerender="in" status="inStatus"/>
 <apex:commandButton value="Reset" action="{!reset}" rerender="in,outStatus" status="outStatus" />

<apex:outputPanel id="in" ><apex:actionStatus startText="Updating...." id="outStatus">
   <apex:facet name="stop">
 <apex:dataTable value="{!accounts}" var="a" styleClass="list"  >
  <apex:column><apex:inputField value="{!a.name}" /></apex:column>
  <apex:column ><apex:inputField value="{!a.parentid}" required="false"/></apex:column>
  <apex:column><apex:inputField value="{!a.type}" required="false"/></apex:column>›
  <apex:column><apex:inputField value="{!a.billingcity}" required="false"/></apex:column>
  <apex:column><apex:inputField value="{!a.SLAExpirationDate__c}" required="false"/></apex:column>
 </apex:dataTable> 
 </apex:facet></apex:actionStatus>
 
</apex:outputPanel>
</apex:pageBlock>
</apex:form>
<!--
 <apex:outputPanel id="out">
  <apex:actionStatus startText="Updating...." id="outStatus">
   <apex:facet name="stop">
   <apex:dataTable value="{!accounts}" var="a">
   <apex:column><apex:outputText value="{!a.name} , {!a.billingcity}"/></apex:column>
  </apex:dataTable>
</apex:outputPanel>

-->
</apex:page>

 

controller
Code:
public class multiEditCon {
   
                List<Account> accountList;

                public PageReference reset() {
                     accountList = [select name,Type,billingCity,parentid,SLAExpirationDate__c 
                                from account order by createddate asc limit 6 ];
      
                     return null;
                }  
             
                public List<Account> getAccounts() {
                     if(accountList == null) reset(); 
                     return accountList;
                }
 
                public void setAccounts(List<Account> accounts) {
                      accountList = accounts;
                }
 
                public PageReference save() {
                      upsert accountList;
                      return null;
                }
 
                public PageReference add() {
                                accountList.add(New Account());
                                return null;
                }
 
 
 
}

 
Persistent SysPersistent Sys
Thanks Ron, this is really helpful.

How can I make few cells in the grid, conditionally (like the user is not from an authorized role) uneditable? Do we have to handle this in apex class or page and how? Sorry am pretty new to VF.

Appreciate your help.