Keywords: rich:dataList

JBoss.org Community Documentation

- Prev
- Next

## 6.34. < rich:dataList >

### 6.34.1. Description

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

Figure 6.57. <rich:dataList> component

### 6.34.2. Key Features

- A completely skinned list and child elements

- Possibility to update a limited set of rows with AJAX

- Possibility to receive values dynamically from a model

Table 6.125. rich : dataList attributes

Attribute Name | Description
--- | ---
ajaxKeys | This attribute defines row keys that are updated after an AJAX request
binding | The attribute takes a value-binding expression for a component property of a backing bean
columnClasses | Comma-delimited list of CSS style classes that are be applied to the columns of this table. A space separated list of classes may also be specified for any individual column. If the number of elements in this list is less than the number of columns specified in the "columns" attribute, no "class" attribute is output for each column greater than the number of elements in the list. If the number of elements in the list is greater than the number of columns specified in the "columns" attribute, the elements at the position in the list after the value of the "columns" attribute are ignored
componentState | It defines EL-binding for a component state for saving or redefinition
dir | Direction indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left)
first | A zero-relative row number of the first row to display
footerClass | Space-separated list of CSS style class(es) that are be applied to any footer generated for this table
headerClass | Space-separated list of CSS style class(es) that are be applied to any header generated for this table
id | Every component may have a unique id that is automatically created if omitted
lang | Code describing the language used in the generated markup for this component
rendered | If "false", this component is not rendered
rowClasses | A comma-delimited list of CSS style classes that is applied to popup table rows. A space separated list of classes may also be specified for any individual row. The styles are applied, in turn, to each row in the table. For example, if the list has two elements, the first style class in the list is applied to the first row, the second to the second row, the first to the third row, the second to the fourth row, etc. In other words, we keep iterating through the list until we reach the end, and then we start at the beginning again
rowKey | RowKey is a representation of an identifier for a specific data row
rowKeyConverter | Converter for a row key object
rowKeyVar | The attribute provides access to a row key in a Request scope
rows | A number of rows to display, or zero for all remaining rows in the table
stateVar | The attribute provides access to a component state on the client side
style | CSS style(s) is/are to be applied when this component is rendered
styleClass | Corresponds to the HTML class attribute
title | Advisory title information about markup elements generated for this component
type | Corresponds to the HTML DL type attribute
value | The current value for this component
var | A request-scope attribute via which the data object for the current row will be used when iterating

Table 6.126. Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.DataList
component-class | org.richfaces.component.html.HtmlDataList
component-family | org.richfaces.DataList
renderer-type | org.richfaces.DataListRenderer
tag-class | org.richfaces.taglib.DataListTag

### 6.34.3. Creating the Component with a Page Tag

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>

    ...

### 6.34.4. Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlDataList;

    ...

    HtmlDataList myList = new HtmlDataList();

    ...

### 6.34.5. Details of Usage

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:

Figure 6.58. <rich:dataList> component with "type" attribute

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:

Figure 6.59. <rich:dataList> component with "title" attribute

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.

### 6.34.6. Look-and-Feel Customization

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:

- Redefine the corresponding skin parameters

- Add to your style sheets style classes used by a <rich:dataList> component

### 6.34.7. Definition of Custom Style Classes

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

Figure 6.60. Style classes

Table 6.127. Classes names that define a list appearance

Class name | Description
--- | ---
rich-datalist | Defines styles for a html <ul> element
rich-list-item | Defines styles for a html <li> element

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:

Figure 6.61. Redefinition styles with predefined classes

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:

Figure 6.62. Redefinition styles with own classes and styleClass attributes

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

### 6.34.8. Relevant Resources Links

Here you can see the example of <rich:dataList> usage and sources for the given example.

- Prev6.33. < rich:dataGrid >
- Top of page
- Front page
- Next6.35. < rich:dataOrderedList >