RichFaces <rich:dataGrid>

It is used to arrange data in a grid. We can update data of datagrid dynamically from the data model. It also supports header, footer, and caption facets.

This component is similar in function to the JavaServer Faces <h:panelGrid>.

Style classes and skin parameters

The following table contains the Style classes (selectors) and corresponding skin parameters for the dataGrid.

Class	Function	Skin Parameters	Mapped CSS properties
.rf-dg	It is used to define styles for the grid.	tableBackgroundColor tableBorderWidth	background-color border-left-width, border-top-width
.rf-dg-cap	It is used to define styles for the grid caption.	No skin parameters.
.rf-dg-r	It is used to define styles for a grid row.	No skin parameters.
.rf-dg-c	It is used to define styles for a grid cell.	tableBorderWidth	border-bottom-width, border-right-width
.rf-dg-nd-c	It is used to define styles for a node cell.	tableBorderColor	border-bottom-color, border-right-color
.rf-dg-th	It is used to define styles for the grid header section.	tableBorderColor	border-bottom-color
.rf-dg-h	It is used to define styles for a grid header.	No skin parameters.
.rf-dg-h-f	It is used to define styles for the first header.	No skin parameters.
.rf-dg-h-r	It is used to define styles for a header row.	No skin parameters.
.rf-dg-h-c	It is used to define styles for a header cell.	tableBorderWidth	border-bottom-width, border-right-width
.rf-dg-f	It is used to define styles for a grid footer.	No skin parameters.
.rf-dg-f-f	It is used to define styles for the first footer.	No skin parameters.
.rf-dg-f-c	It is used to define styles for a footer cell.	tableFooterBackgroundColor tableBorderWidth	background-color border-bottom-width, border-right-width

Example

Here, in the following example, we are implementing <rich:dataGrid> component. This example contains the following files.

JSF File

// data-grid.xhtml

  <?xml version=’1.0′ encoding=’UTF-8′ ?>  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  <ui:composition xmlns=”http://www.w3.org/1999/xhtml”  xmlns:h=”http://java.sun.com/jsf/html”  xmlns:f=”http://java.sun.com/jsf/core”  xmlns:ui=”http://java.sun.com/jsf/facelets”  xmlns:a4j=”http://richfaces.org/a4j”  xmlns:rich=”http://richfaces.org/rich”>  <f:view>  <h:head>  <title>Data Grid </title>  </h:head>  <h:body>  <h:form>  <rich:dataGrid value=”#{studentRecord.records}” var=”record” columns=”2″ elements=”4″ first=”1″>  <f:facet name=”header”>  <h:outputText value=”Students Record”></h:outputText>  </f:facet>  <rich:panel>  <f:facet name=”header”>  <h:outputText value=”#{record.id}”></h:outputText>  </f:facet>  <h:panelGrid columns=”2″>  <h:outputText value=”Name:” styleClass=”label”></h:outputText>  <h:outputText value=”#{record.name}”/>  <h:outputText value=”Email:” styleClass=”label”></h:outputText>  <h:outputText value=”#{record.email}”/>  <h:outputText value=”Contact:” styleClass=”label”></h:outputText>  <h:outputText value=”#{record.contactNumber}”/>  </h:panelGrid>  </rich:panel>  <f:facet name=”footer”>  <rich:dataScroller></rich:dataScroller>  </f:facet>  </rich:dataGrid>  </h:form>  </h:body>  </f:view>  </ui:composition>  

Managed Bean

// StudentRecord.java

  import java.util.ArrayList;  import java.util.List;  import javax.faces.bean.ManagedBean;  import javax.faces.bean.RequestScoped;  @ManagedBean  @RequestScoped  public class StudentRecord {  String id;  String name;  String email;  String contactNumber;  List<StudentRecord> records;  public StudentRecord(){}  public StudentRecord(String id, String name, String email, String contactNumber) {  this.id = id;  this.name = name;  this.email = email;  this.contactNumber = contactNumber;  }  public String getId() {  return id;  }  public void setId(String id) {  this.id = id;  }  public String getName() {  return name;  }  public void setName(String name) {  this.name = name;  }  public String getEmail() {  return email;  }  public void setEmail(String email) {  this.email = email;  }  public String getContactNumber() {  return contactNumber;  }  public void setContactNumber(String contactNumber) {  this.contactNumber = contactNumber;  }  public List<StudentRecord> getRecords() {  records = new ArrayList<>();  records.add(new StudentRecord(“101”, “Raju”, “raju@abc.com”, “52534252”));  records.add(new StudentRecord(“102”, “Rama”, “rama@abc.com”, “52235252”));  records.add(new StudentRecord(“103”, “John”, “john@abc.com”, “52456252”));  records.add(new StudentRecord(“104”, “Peter”, “peter@abc.com”, “55625252”));  return records;  }  public void setRecords(List<StudentRecord> records) {  this.records = records;  }  public int getNumberOfRecords(){  return this.records.size();  }  }  

Output:

RichFaces Datagird 1

Next TopicRichFaces <rich:list>

RichFaces Rich:DataGrid

RichFaces <rich:dataGrid>

Style classes and skin parameters

Example

JSF File

Managed Bean

Verbal Reasoning | Assertion and Reason 1

Components of Robot

You may also like