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

6.6.6.  < rich:dataGrid > available since 3.0.0

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


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:

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.



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.