The <apex:dataList> is one of the most important components on the Visualforce page. It is an ordered or unordered list of values defined by iterating over a set of data. The <apex:dataList> component is an alternative of <apex:repeat>, <apex:dataTable> and <apex:pageBlockTable> that renders an unordered or ordered list with li elements comprising the rows.
These are some of the following attributes of the apex:dataList component:
1. dir
The dir is a string-type attribute that is used for defining the direction in which the generated HTML component is going to be read. RTL and LTR are the two possible values for this attribute.
Syntax:
<apex:dataList dir="LTR"></apex:dataList>
2. first
The first is an integer type attribute that indicates the first element in the iteration visibly rendered in the list. The index of the first element in the set of data specified by the value attribute is 0.
Syntax:
<apex:dataList first="2"></apex:dataList>
3. id
The id is a string-type attribute that defines a unique identifier which allows this component to be referenced by other components on the page.
Syntax:
<apex:dataList id="dataListId"></apex:dataList>
4. lang
The lang is a string-type attribute that defines the base language for the generated HTML output.
Syntax:
<apex:dataList lang="en"></apex:dataList>
5. onclick
The onclick is a string-type attribute that is used to invoke the JavaScript method when the onclick event occurs or simply when the user clicks the list.
Syntax:
<apex:dataList onclick="saveRecords();"></apex:dataList>
6. ondblclick
The ondblclick is a string-type attribute used to invoke the JavaScript method when the ondblclick event occurs or simply when the list is clicked twice.
Syntax:
<apex:dataList ondblclick="saveRecords();"></apex:dataList>
7. onkeydown
The onkeydown is a string-type attribute used to invoke the JavaScript method when the onkeydown event occurs or when the user presses a keyboard key.
Syntax:
<apex:dataList onkeydown="saveRecords();"></apex:dataList>
8. onkeypress
The onkeypress is a string-type attribute used to invoke the JavaScript method when the onkeypress event occurs or when the user holds down or presses a keyboard key.
AD
Syntax:
<apex:dataList onkeypress="saveRecords();"></apex:dataList>
9. onkeyup
The onkeyup is a string-type attribute used to invoke the JavaScript method when the onkeyup event occurs or when the user releases a keyboard key.
Syntax:
<apex:dataList onkeyup="saveRecords();"></apex:dataList>
10. onmousedown
The onmousedown is a string-type attribute used to invoke the JavaScript method when the onmousedown event occurs or when the user presses the mouse button.
Syntax:
AD
<apex:dataList onmousedown="countKeys();"></apex:dataList>
11. onmousemove
The onmousemove is a string-type attribute used to invoke the JavaScript method when the onmousemove event occurs or when the user moves the mouse pointer.
Syntax:
<apex:dataList onmousemove="countKeys();"></apex:dataList>
12. onmouseout
The onmouseout is a string-type attribute used to invoke the JavaScript method when the onmouseout event occurs or when the user moves the mouse pointer away from the list.
Syntax:
<apex:dataList onmouseout="countKeys();"></apex:dataList>
13. onmouseover
The onmouseover is a string-type attribute used to invoke the JavaScript method when the onmouseover event occurs or when the user moves the pointer over the list.
Syntax:
<apex:dataList onmouseover="countKeys();"></apex:dataList>
14. onmouseup
The onmouseup is a string-type attribute that is used to invoke the JavaScript method when the onmouseup event occurs or when the user releases the mouse button.
Syntax:
<apex:dataList onmouseup="countKeys();"></apex:dataList>
15. rendered
The rendered is a Boolean-type attribute that is used for specifying whether this component is rendered on the page or not. The boolean value true is the default value for this attribute.
Syntax:
<apex:dataList rendered="true"></apex:dataList>
16. rows
The 'rows' is an integer-type attribute that is used for specifying the maximum number of items to display in the list. 0 is the default value for this attribute that represent all possible list items.
Syntax:
<apex:dataList rows="2"></apex:dataList>
17. style
The style is a string-type attribute used to define the inline CSS to apply the data list component.
Syntax:
<apex:dataList style="inline css"></apex:dataList>
18. styleClass
The styleClass is a string-type attribute used to define the CSS class to apply the data list component. The styleClass attribute is used for specifying the external CSS stylesheet that will be applied to the component.
Syntax:
<apex:dataList styleClass="className"></apex:dataList>
19. title
The title is a string-type attribute that is used to specify the text that will be displayed when the user's mouse pointer hovers over this component.
Syntax:
<apex:dataList title="Data List Example"></apex:dataList>
20. type
The type is a string type attribute that defines the type of the list that should be displayed.
1, A, i, and I are the possible values for the ordered list
disc, square and circle are the possible values for the unordered list. The disc is the default value for this attribute.
Syntax:
<apex:dataList title="Data List Example"></apex:dataList>
21. value
The value is an Object type attribute that defines the collection of data displayed in the list.
Syntax:
<apex:dataList value="object"></apex:dataList>
22. var
The var is a string-type attribute that defines the name of the variable represented by one element in the collection of the data specified by the value attribute.
Syntax:
<apex:dataList value="object" var="variableName"></apex:dataList>
Let's take an example to understand how we can use the <apex:dataList> component on the Visualforce page.
ApexDataListExample.vfp
<apex:page controller="ApexDataListController">
<apex:form >
<apex:pageBlock title="Account Information">
<apex:dataList value="{!accList}" var="acc">
<apex:outputField value="{!acc.Name}"/><br/>
<apex:outputField value="{!acc.AccountNumber}"/><br/>
<apex:outputField value="{!acc.Phone}"/><br/>
<apex:outputField value="{!acc.Rating}"/><br/>
<apex:outputField value="{!acc.Website}"/><br/>
</apex:dataList>
</apex:pageBlock>
<apex:pageBlock title="Contact Information">
<apex:dataList value="{!conList}" var="con">
<apex:outputField value="{!con.FirstName}"/><br/>
<apex:outputField value="{!con.LastName}"/><br/>
<apex:outputField value="{!con.AccountId}"/><br/>
<apex:outputField value="{!con.Email}"/><br/>
<apex:outputField value="{!con.Phone}"/><br/>
</apex:dataList>
</apex:pageBlock>
</apex:form>
</apex:page>
ApexDataListController.apxc
// create ApexDataListController class to get the list of Accounts and Contacts
public class ApexDataListController {
public List<account> accList{get;set;}
public List<contact> conList{get;set;}
//default constructor to get account and contact records
public ApexDataListController(){
accList = [select Id, Name, Rating, Phone, AccountNumber, Website From Account Where Name != null AND Rating != null
AND Phone != null AND AccountNumber != null AND Website != null LIMIT 3];
conList = [select Id, FirstName, LastName, AccountId, Email, Phone From Contact Where FirstName != null AND LastName != null
AND AccountId != null AND Email != null AND Phone != null LIMIT 3];
}
}
