### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.6.6. < rich:dataGrid > available since 3.0.0

expand all

#### 6.6.6.1. Description

The component to render data as a grid that allows choosing data from a model and obtains built-in support of Ajax updates.

Figure 6.36. <rich:dataGrid> component

#### 6.6.6.2. Key Features

- A completely skinned table and child elements

- Possibility to update a limited set of rows with Ajax

- Possibility to receive values dynamically from a model

Table 6.68. rich : dataGrid attributes

Attribute Name | Description
--- | ---
ajaxKeys | This attribute defines row keys that are updated after an AJAX request
align | Deprecated. This attribute specifies the position of the table with respect to the document. The possible values are "left", "center" and "right". The default value is "left".
bgcolor | Deprecated. This attribute sets the background color for the document body or table cells. This attribute sets the background color of the canvas for the document body (the BODY element) or for tables (the TABLE, TR, TH, and TD elements). Additional attributes for specifying text color can be used with the BODY element. This attribute has been deprecated in favor of style sheets for specifying background color information
binding | JSF: The attribute takes a value-binding expression for a component property of a backing bean
border | HTML: This attributes specifies the width of the frame around a component. Default value is "0".
captionClass | Assigns one or more space-separated CSS class names to the component caption
captionStyle | CSS style rules to be applied to the component caption
cellpadding | This attribute specifies the amount of space between the border of the cell and its contents. Default value is "0".
cellspacing | This attribute specifies the amount of space between the border of the cell and its contents. The attribute also specifies the amount of space to leave between cells. Default value is "0".
columnClasses | JSF: Assigns one or more space-separated CSS class names to the columns of the table. If the CSS class names are comma-separated, each class will be assigned to a particular column in the order they follow in the attribute. If you have less class names than columns, the class will be applied to every n-fold column where n is the order in which the class is listed in the attribute. If there are more class names than columns, the overflow ones are ignored.
columns | Number of columns
componentState | It defines EL-binding for a component state for saving or redefinition
dir | HTML: Direction indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left)
elements | Number of elements in grid
first | A zero-relative row number of the first row to display
footerClass | Assigns one or more space-separated CSS class names to the component footer
frame | This attribute specifies which sides of the frame surrounding a table will be visible. Possible values: "void", "above", "below", "hsides", "lhs", "rhs", "vsides", "box" and "border". The default value is "void".
headerClass | Assigns one or more space-separated CSS class names to the component header
id | JSF: Every component may have a unique id that is automatically created if omitted
lang | HTML: Code describing the language used in the generated markup for this component
onclick | DHTML: The client-side script method to be called when the element is clicked
ondblclick | DHTML: The client-side script method to be called when the element is double-clicked
onkeydown | DHTML: The client-side script method to be called when a key is pressed down over the element
onkeypress | DHTML: The client-side script method to be called when a key is pressed over the element and released
onkeyup | DHTML: The client-side script method to be called when a key is released
onmousedown | DHTML: The client-side script method to be called when a mouse button is pressed down over the element
onmousemove | DHTML: The client-side script method to be called when a pointer is moved within the element
onmouseout | DHTML: The client-side script method to be called when a pointer is moved away from the element
onmouseover | DHTML: The client-side script method to be called when a pointer is moved onto the element
onmouseup | DHTML: The client-side script method to be called when a mouse button is released
onRowClick | The client-side script method to be called when the row is clicked
onRowDblClick | The client-side script method to be called when the row is double-clicked
onRowMouseDown | The client-side script method to be called when a mouse button is pressed down over the row
onRowMouseMove | The client-side script method to be called when a pointer is moved within the row
onRowMouseOut | The client-side script method to be called when a pointer is moved away from the row
onRowMouseOver | The client-side script method to be called when a pointer is moved onto the row
onRowMouseUp | The client-side script method to be called when a mouse button is released over the row
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.
rowKey | RowKey is a representation of an identifier for a specific data row
rowKeyConverter | Converter for a row key object
rowKeyVar | Request scoped variable for client access to rowKey
rules | This attribute specifies which rules will appear between cells within a table. The rendering of rules is user agent dependent. Possible values: * none: No rules. This is the default value. * groups: Rules will appear between row groups (see THEAD, TFOOT, and TBODY) and column groups (see COLGROUP and COL) only. * rows: Rules will appear between rows only. * cols: Rules will appear between columns only. * all: Rules will appear between all rows and columns
stateVar | The attribute provides access to a component state on the client side
style | HTML: 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.
summary | This attribute provides a summary of the table's purpose and structure for user agents rendering to non-visual media such as speech and Braille
title | HTML: Advisory title information about markup elements generated for this component
value | JSF: 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
width | HTML: This attribute specifies the desired width of the entire table and is intended for visual user agents. When the value is percentage value, the value is relative to the user agent's available horizontal space. In the absence of any width specification, table width is determined by the user agent

Table 6.69. Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.DataGrid
component-class | org.richfaces.component.html.HtmlDataGrid
component-family | org.richfaces.DataGrid
renderer-type | org.richfaces.DataGridRenderer
tag-class | org.richfaces.taglib.DataGridTag

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

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

Example:

    ...

    <rich:dataGrid value="#{dataTableScrollerBean.allCars}" var="car">

            <h:outputText value="#{car.model}"/>

    </rich:dataGrid>

    ...

#### 6.6.6.4. Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlDataGrid;

    ...

    HtmlDataGrid myList = new HtmlDataGrid();

    ...

#### 6.6.6.5. Details of Usage

The component takes a list from a model and outputs it the same way as with <h:panelGrid> for inline data. To define grid properties and styles, use the same definitions as for <h:panelGrid>.

The component allows to:

- Use "header" and "footer" facets for output

- Limit number of output elements ( "elements" attribute) and define first element for output ( "first" attribute)

- Bind pages with <rich:datascroller> component

Here is an example:

Example:

    ...

    <rich:panel style="width:150px;height:200px;">

            <h:form>

                    <rich:dataGrid value="#{dataTableScrollerBean.allCars}" var="car" columns="2" elements="4" first="1">

                        <f:facet name="header">

                                <h:outputText value="Car Store"></h:outputText>

                            </f:facet>

                            <rich:panel>

                                <f:facet name="header">

                                        <h:outputText value="#{car.make} #{car.model}"></h:outputText>

                                </f:facet>

                                <h:panelGrid columns="2">

                                        <h:outputText value="Price:" styleClass="label"></h:outputText>

                                        <h:outputText value="#{car.price}"/>

                                        <h:outputText value="Mileage:" styleClass="label"></h:outputText>

                                        <h:outputText value="#{car.mileage}"/>

                                </h:panelGrid>

                            </rich:panel>

                            <f:facet name="footer">

                                <rich:datascroller></rich:datascroller>

                            </f:facet>

                    </rich:dataGrid>

            </h:form>

    </rich:panel>

    ...

This is a result:

Figure 6.37. Component usage

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:dataGrid value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}"

                            binding="#{listBean.dataGrid}" id="grid" elements="4" columns="2">

            ...

    </rich:dataGrid>

    ...

    <a4j:commandButton action="#{listBean.action}" reRender="grid" value="Submit"/>

    ...

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

#### 6.6.6.6. Facets

Table 6.70. Facets

Facet name | Description
--- | ---
header | Defines the header content
footer | Defines the footer content
caption | Defines the caption content

#### 6.6.6.7. 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:dataGrid> components at once:

- Redefine the corresponding skin parameters

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

#### 6.6.6.8. Skin Parameters Redefinition

Skin parameters redefinition for <rich:dataGrid> are the same as for the <rich:dataTable> component.

#### 6.6.6.9. Definition of Custom Style Classes

Custom style classes for <rich:dataGrid> are the same as for the <rich:dataTable> component.

In order to redefine styles for all <rich:dataGrid> components on a page using CSS, it's enough to create classes with the same names (possible classes are the same as for the <rich:dataTable> ) and define necessary properties in them.

Example:

    ...

    .rich-table-footercell{

        color:#ff7800;

    }

    ...

This is a result:

Figure 6.38. Redefinition styles with predefined classes

In the example color of footercell was changed.

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

Example:

    ...

    .myClass{

        font-style:italic;

    }

    ...

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

Example:

    <rich:dataGrid ... columnClasses="myClass"/>

This is a result:

Figure 6.39. Redefinition styles with own classes and styleClass attributes

As it could be seen on the picture above, the font style for columns was changed.

#### 6.6.6.10. Relevant Resources Links

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

- Prev6.6.5. < rich:dataFilterSlider > ...
- Top of page
- Front page
- Next6.6.7. < rich:dataList > ...