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
Table 6.123. rich : dataGrid attributes
Attribute Name | Description |
---|---|
ajaxKeys | This attribute defines row keys that are updated after an AJAX request |
align | left|center|right [CI] Deprecated. This attribute specifies the position of the table with respect to the document. Permitted values: * left: The table is to the left of the document. * center: The table is to the center of the document. * right: The table is to the right of the document |
bgcolor | Deprecated. This attribute sets the background color for the document body or table cells. This attribute sets the background color of the canvas for the document body (the BODY element) or for tables (the TABLE, TR, TH, and TD elements). Additional attributes for specifying text color can be used with the BODY element. This attribute has been deprecated in favor of style sheets for specifying background color information |
binding | The attribute takes a value-binding expression for a component property of a backing bean |
border | This attributes specifies the width of the frame around a component |
captionClass | Space-separated list of CSS style class(es) that are be applied to caption for this component |
captionStyle | CSS style(s) is/are to be applied to caption when this component is rendered |
cellpadding | This attribute specifies the amount of space between the border of the cell and its contents |
cellspacing | This attribute specifies the amount of space between the border of the cell and its contents. The attribute also specifies the amount of space to leave between cells |
columnClasses | Comma-delimited list of CSS style classes that are be applied to the columns of this table. A space separated list of classes may also be specified for any individual column. If the number of elements in this list is less than the number of columns specified in the "columns" attribute, no "class" attribute is output for each column greater than the number of elements in the list. If the number of elements in the list is greater than the number of columns specified in the "columns" attribute, the elements at the position in the list after the value of the "columns" attribute are ignored |
columns | Quantity of columns |
componentState | It defines EL-binding for a component state for saving or redefinition |
dir | Direction indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left) |
elements | Number of elements in grid |
first | A zero-relative row number of the first row to display |
footerClass | Space-separated list of CSS style class(es) that are be applied to footer for this component |
frame | void|above|below|hsides|lhs|rhs|vsides|box|border [CI] This attribute specifies which sides of the frame surrounding a table will be visible. Possible values: * void: No sides. This is the default value. * above: The top side only. * below: The bottom side only. * hsides: The top and bottom sides only. * vsides: The right and left sides only. * lhs: The left-hand side only. * rhs: The right-hand side only. * box: All four sides. * border: All four sides |
headerClass | Space-separated list of CSS style class(es) that are be applied to header for this component |
id | Every component may have a unique id that is automatically created if omitted |
lang | Code describing the language used in the generated markup for this component |
onclick | HTML: a script expression; a pointer button is clicked |
ondblclick | HTML: a script expression; a pointer button is double-clicked |
onkeydown | HTML: a script expression; a key is pressed down |
onkeypress | HTML: a script expression; a key is pressed and released |
onkeyup | HTML: a script expression; a key is released |
onmousedown | HTML: script expression; a pointer button is pressed down |
onmousemove | HTML: a script expression; a pointer is moved within |
onmouseout | HTML: a script expression; a pointer is moved away |
onmouseover | HTML: a script expression; a pointer is moved onto |
onmouseup | HTML: script expression; a pointer button is released |
onRowClick | HTML: a script expression; a pointer button is clicked on row |
onRowDblClick | HTML: a script expression; a pointer button is double-clicked on row |
onRowMouseDown | HTML: script expression; a pointer button is pressed down on row |
onRowMouseMove | HTML: a script expression; a pointer is moved within of row |
onRowMouseOut | HTML: a script expression; a pointer is moved away of row |
onRowMouseOver | HTML: a script expression; a pointer is moved onto of row |
onRowMouseUp | HTML: script expression; a pointer button is released on row |
rendered | If "false", this component is not rendered |
rowClasses | A comma-delimited list of CSS style classes that is applied to popup table rows. A space separated list of classes may also be specified for any individual row. The styles are applied, in turn, to each row in the table. For example, if the list has two elements, the first style class in the list is applied to the first row, the second to the second row, the first to the third row, the second to the fourth row, etc. In other words, we keep iterating through the list until we reach the end, and then we start at the beginning again |
rowKey | RowKey is a representation of an identifier for a specific data row |
rowKeyConverter | Converter for a row key object |
rowKeyVar | Request scoped variable for client access to rowKey |
rules | This attribute specifies which rules will appear between cells within a table. The rendering of rules is user agent dependent. Possible values: * none: No rules. This is the default value. * groups: Rules will appear between row groups (see THEAD, TFOOT, and TBODY) and column groups (see COLGROUP and COL) only. * rows: Rules will appear between rows only. * cols: Rules will appear between columns only. * all: Rules will appear between all rows and columns |
stateVar | The attribute provides access to a component state on the client side |
style | CSS style(s) is/are to be applied when this component is rendered |
styleClass | Corresponds to the HTML class attribute |
summary | This attribute provides a summary of the table's purpose and structure for user agents rendering to non-visual media such as speech and Braille |
title | Advisory title information about markup elements generated for this component |
value | The current value for this component |
var | A request-scope attribute via which the data object for the current row will be used when iterating |
width | This attribute specifies the desired width of the entire table and is intended for visual user agents. When the value is percentage value, the value is relative to the user agent's available horizontal space. In the absence of any width specification, table width is determined by the user agent |
Table 6.124. 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 |
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>
...
Example:
import org.richfaces.component.html.HtmlDataGrid;
...
HtmlDataGrid myList = new HtmlDataGrid();
...
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.
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 for <rich:dataGrid> are the same as for the <rich:dataTable> component.
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:
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:
As it could be seen on the picture above, the font style for columns was changed.
Here you can see the example of <rich:dataGrid> usage and sources for the given example.