Adding a Data Grid

After you create the Client Data Object, add a Data Grid and bind it to the Client Data Object using the following steps:

  1. Expand the Faces Client Components drawer in the palette.

  2. Drag a Data Grid on to the page. A Data Grid is displayed on the Design tab.

  3. In the Client Data view, drag emp (EMPLOYEE[]) onto the Data Grid component to bind the data to the data grid. All columns of the EMPLOYEE table are shown in the Data Grid.

  4. Select the Data Grid, and go to the Properties view.

  5. Type 5 in the Height field to show five rows of data per page.

  6. Click the Columns tab to change values of the column headings and column width.

  7. Enter the following values in the Label columns: Employee Number; First Name; Initial; Last Name; Department; Phone; Hire Date; Job; Education; Sex; Birth Date; Salary; Bonus; Comm.

  8. Select the MIDINIT row.

  9. Change Width to 15 pixels.

  10. Select the HIREDATE row.

  11. Select the Column details tab, and change Format to Date/Time.

  12. Select the BIRTHDATE row.

  13. Select the Column details tab, and change Format to Date/Time.

  14. Select the Salary row.

  15. Select the Column details tab, and change Format to Number.

  16. Select the BONUS row.

  17. Select the Column details tab, and change Format to Number.

  18. Select the COMM row.

  19. Select the Column details tab, and change Format to Number.

Save and run the JSP on a test server. After the JSP is compiled and run, you are able to interact with the application.