Create new RichFaces Documentation Jira issue

This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.orgCommunity Documentation

6.6.7.  < rich:dataList > available since 3.0.0

The component for unordered lists rendering that allows choosing data from a model and obtains built-in support of Ajax updates.


Table 6.72. rich : dataList attributes

Attribute Name Description
ajaxKeysThis attribute defines row keys that are updated after an AJAX request
binding JSF: The attribute takes a value-binding expression for a component property of a backing bean
componentStateIt defines EL-binding for a component state for saving or redefinition
dirHTML: Direction indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left)
firstA zero-relative row number of the first row to display
id JSF: Every component may have a unique id that is automatically created if omitted
langHTML: Code describing the language used in the generated markup for this component
rendered JSF: If "false", this component is not rendered
rowClasses JSF: Assigns one or more space-separated CSS class names to the rows of the table. If the CSS class names are comma-separated, each class will be assigned to a particular row in the order they follow in the attribute. If you have less class names than rows, the class will be applied to every n-fold row where n is the order in which the class is listed in the attribute. If there are more class names than rows, the overflow ones are ignored.
rowKeyRowKey is a representation of an identifier for a specific data row
rowKeyConverterConverter for a row key object
rowKeyVarThe attribute provides access to a row key in a Request scope
rowsHTML: A number of rows to display, or zero for all remaining rows in the table
stateVarThe attribute provides access to a component state on the client side
styleHTML: CSS style rules to be applied to the component
styleClass JSF: Assigns one or more CSS class names to the component. Corresponds to the HTML "class" attribute.
titleHTML: Advisory title information about markup elements generated for this component
typeHTML: Corresponds to the HTML DL type attribute
value JSF: The current value for this component
varA request-scope attribute via which the data object for the current row will be used when iterating

Table 6.73. Component identification parameters

NameValue
component-typeorg.richfaces.DataList
component-classorg.richfaces.component.html.HtmlDataList
component-familyorg.richfaces.DataList
renderer-typeorg.richfaces.DataListRenderer
tag-classorg.richfaces.taglib.DataListTag

To create the simplest variant of dataList on a page, use the following syntax:

Example:


...
<rich:dataList var="car" value="#{dataTableScrollerBean.allCars}" >
        <h:outputText value="#{car.model}"/>
</rich:dataList>
...

Example:

import org.richfaces.component.html.HtmlDataList;

...
HtmlDataList myList = new HtmlDataList();
...

The <rich:dataList> component allows to generate a list from a model.

The component has the "type" attribute, which corresponds to the "type" parameter for the <UL> HTML element and defines a marker type. Possible values for "type" attribute are: "disc", "circle", "square".

Here is an example:


...
<h:form>
        <rich:dataList var="car" value="#{dataTableScrollerBean.allCars}" rows="5" type="disc" title="Car Store">
                <h:outputText value="#{car.make} #{car.model}"/><br/>
                <h:outputText value="Price:" styleClass="label"></h:outputText>
                <h:outputText value="#{car.price} "/><br/>
                <h:outputText value="Mileage:" styleClass="label"></h:outputText>
                <h:outputText value="#{car.mileage} "/><br/>
        </rich:dataList>
</h:form>
...

This is a result:


In the example the "rows" attribute limits number of output elements of the list.

"first" attribute defines first element for output. "title" are used for popup title. See picture below:


The component was created basing on the <a4j:repeat> component and as a result it could be partially updated with Ajax. "ajaxKeys" attribute allows to define row keys that are updated after an Ajax request.

Here is an example:

Example:


...
<rich:dataList value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" 
                        binding="#{listBean.dataList}" id="list" rows="5" type="disc">
        ...
</rich:dataList>
...
<a4j:commandButton action="#{listBean.action}" reRender="list" value="Submit"/>
...

In the example "reRender" attribute contains value of "id" attribute for <rich:dataList> component. As a result the component is updated after an Ajax request.

For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.

There are two ways to redefine the appearance of all <rich:dataList> components at once:

On the screenshot there are classes names that define styles for component elements.



In order to redefine styles for all <rich:dataList> components on a page using CSS, it's enough to create classes with the same names (possible classes could be found in the tables above) and define necessary properties in them.

Example:


...
.rich-list-item{
    
font-style:italic;
}
...

This is a result:


In the example the font style for list item text was changed.

Also it's possible to change styles of particular <rich:dataList> component. In this case you should create own style classes and use them in corresponding <rich:dataList> styleClass attributes. An example is placed below:

Example:


...
.myClass{
    
background-color:#ffead9;
}
...

The "styleClass" attribute for <rich:dataList> is defined as it's shown in the example below:

Example:


<rich:dataList ... styleClass="myClass"/>

This is a result:


As it could be seen on the picture above, background color for <rich:dataList> was changed.

On the component LiveDemo page you can see the example of <rich:dataList> usage and sources for the given example.