12.7. <rich:dataGrid>

⁠12.7. `<rich:dataGrid>`

The <rich:dataGrid> component is used to arrange data objects in a grid. Values in the grid can be updated dynamically from the data model, and Ajax updates can be limited to specific rows. The component supports header, footer, and caption facets.

The <rich:dataGrid> component is similar in function to the JavaServer Faces <h:panelGrid> component. However, the <rich:dataGrid> component additionally allows iteration through the data model rather than just aligning child components in a grid layout.

⁠

Figure 12.8. The <rich:dataGrid> component

⁠12.7.1. Basic usage

The <rich:dataGrid> component requires the value attribute, which points to the data model, and the var attribute, which holds the current variable for the collection of data.

⁠12.7.2. Customizing the grid

The number of columns for the grid is specifed with the columns attribute, and the number of elements to layout among the columns is determined with the elements attribute. The first attribute references the zero-based element in the data model from which the grid starts.

⁠

Example 12.12. <rich:dataGrid> 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>

⁠
Figure 12.9. <rich:dataGrid> example

⁠12.7.3. Partial updates

As <rich:dataGrid> the component is based on the <a4j:repeat> component, it can be partially updated with Ajax. Refer to Section 12.1.2, “Limited views and partial updates” for details on partially updating the <rich:dataGrid> component.

⁠12.7.4. Reference data

component-type: org.richfaces.DataGrid
component-class: org.richfaces.component.UIDataGrid
component-family: org.richfaces.Data
renderer-type: org.richfaces.DataGridRenderer
handler-class: org.richfaces.taglib.DataGridHandler

⁠12.7.5. Style classes and skin parameters

⁠

Table 12.4. Style classes (selectors) and corresponding skin parameters

Class (selector)	Skin Parameters	Mapped CSS properties
`.rf-dg` This class defines styles for the grid.	`tableBackgroundColor`	background-color
	`tableBorderWidth`	border-left-width, border-top-width
	`tableBorderColor`	border-left-color, border-top-color
`.rf-dg-cap` This class defines styles for the grid caption.	No skin parameters.
`.rf-dg-r` This class defines styles for a grid row.	No skin parameters.
`.rf-dg-c` This class defines styles for a grid cell.	`tableBorderWidth`	border-bottom-width, border-right-width
	`tableBorderColor`	border-bottom-color, border-right-color
	`generalTextColor`	color
	`generalFamilyFont`	font-family
	`generalSizeFont`	font-size
`.rf-dg-nd-c` This class defines styles for a node cell.	`tableBorderWidth`	border-bottom-width, border-right-width
	`tableBorderColor`	border-bottom-color, border-right-color
	`generalTextColor`	color
	`generalFamilyFont`	font-family
	`generalSizeFont`	font-size
`.rf-dg-th` This class defines styles for the grid header section.	`tableBorderWidth`	border-bottom-width
	`tableBorderColor`	border-bottom-color
`.rf-dg-h` This class defines styles for a grid header.	No skin parameters.
`.rf-dg-h-f` This class defines styles for the first header.	No skin parameters.
`.rf-dg-h-r` This class defines styles for a header row.	No skin parameters.
`.rf-dg-h-c` This class defines styles for a header cell.	`tableHeaderBackgroundColor`	background-color
	`tableBorderWidth`	border-bottom-width, border-right-width
	`tableBorderColor`	border-bottom-color, border-right-color
	`tableHeaderTextColor`	color
	`generalFamilyFont`	font-family
	`generalSizeFont`	font-size
`.rf-dg-f` This class defines styles for a grid footer.	No skin parameters.
`.rf-dg-f-f` This class defines styles for the first footer.	No skin parameters.
`.rf-dg-f-c` This class defines styles for a footer cell.	`tableFooterBackgroundColor`	background-color
	`tableBorderWidth`	border-bottom-width, border-right-width
	`tableBorderColor`	border-bottom-color, border-right-color
	`generalTextColor`	color
	`generalFamilyFont`	font-family
	`generalSizeFont`	font-size