6.6.6. < rich:dataGrid > available since 3.0.0

### 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.27. <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

#### 6.6.6.3. 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.28. 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.4. Reference Data

Table of <rich:dataGrid> attributes.

Table 6.40. 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

Table 6.41. Facets

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

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

You can find all necessary information about style classes redefinition in Definition of Custom Style Classes section.

#### 6.6.6.5. 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 > ...