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
The component to render data as a grid that allows choosing data from a model and obtains built-in support of Ajax updates.
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
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:
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.
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.
On the component LiveDemo page you can see the example of <rich:dataGrid> usage and sources for the given example.
