grid rich:dataGrid HtmlDataGrid

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

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

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlDataGrid;
    ...
    HtmlDataGrid myList = new HtmlDataGrid();
    ...

## 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:

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.

## Facets

Facets

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

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

## Skin Parameters Redefinition

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

## 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:

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:

Redefinition styles with own classes and styleClass attributes

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

## Relevant Resources Links

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