Introduction

Get Started

The easiest way to see how the Grid works are to use the existing built-in App Expenses Claims. Here are the steps:

...

1. Start the Joget Server and open the App Center.
   
   
2. Log in as admin and click on the pencil icon on the Expenses Claim to open the Design App. (see Figure 1)
   
   Image Added
   Figure 1
   
   
3. Under FORMS column, click on Expense Claim Resubmit (see Figure 2)
   
   Image Added
   Figure 2
   
   
4. Hover the mouse over the Grid element on the canvas under Approval Comment(s) section and click on Edit to open up the Edit Grid properties.
   

^{Image Removed}

^{Figure 1}

...

1. 
   
2. Click on UI & Validation, uncheck the Readonly checkbox and click OK. (see Figure 3)
   
   Image Added
   Figure 3
   
   
3. Click on Preview to open up the Preview tab, click on Click to edit to enter values and click on Add Row link to add more rows.

Figure 1: Screenshot highlighting Grid in sample HR Expenses Claim app

...

Grid Properties

Edit Grid

Image Added

Image Removed

Name	Description	Screen (Click to view)
ID	Element ID (By declaring as "approval_comments", a corresponding database table column "c_approval_comments" will be created)	Please see Form Element for more information about defining the ID and list of reserved IDs.
Label	Element Label to be displayed to the end-user.
Options	Column definition and column label. The column name is defined in the value column whereas the corresponding label is defined in the label column.

UI & Validation

Image Added

Data Binder

Image Added

...

Data Binder - Multirow Form Binder

Image Added

Image Removed

Name	Description	Screen (Click to view)
Form	Form to store to or load from
Foreign Key	Foreign Key for records lookup.