...

The grid is configured through the 'default value' of the custom field. This allows you to setup multiple types of grids.

Configuration is done by specifying To configure the grid you need to specify properties for various items. The TGE - Documentation contains all details on these properties, but as an introduction we will work out the configuration for the family list grid, so that you This article shows an introductory configuration of a Family list grid. You will get an idea of the add-on capabilities of the plugin.

...

Define grid columns

Every grid configuration starts by specifying what columns should be setupwith the definition of the columns: use gd.columns property to set columns.

gd.columns=name, dob, gender, relation

...

name, dob, gender, relation are the

...

column id's used to specify the behavior for each column. Use column details properties to define the column.

Setup Set up a simple column containing the first name

All properties related to the name column are prefixed with col.name

col.name=First name
col.name.type=string
col.name.width = 40

• All the properties related to the 'name' column are prefixed with col.name
• First name is the column heading or label. You can change it any way you want.
• col.name.type is the type of the column, in this case 'string'
• col.name.width is the column's width in pixels

Setup a date column containing the date of birth

All properties related to the dob(date of birth) column are prefixed with col.dob

col.dob=Date of Birth
col.dob.type=date
col.dob.width=30
col.dob.sortable=true

...

• col.dob.type=date indicates that the column will hold dates
• col.dob.width is the width of the column
• col.dob.sortable is a column property spefying that which specifies if the user can sort on this column, by clicking on the header.

Setup a column containing 2 radio buttons (male / female) for the gender

All properties related to the gender column are prefixed with col.gender

col.gender=Gender
col.gender.width=30
col.gender.editable=true
col.gender.sortable=true
col.gender.type=radio
col.gender.list.size=2
col.gender.name1=Male
col.gender.value1=M
col.gender.name2=Female
col.gender.value2=F

• The editable column property (col.gender.editable) allows editable  allows you to indicate if a column should be writable (=true) or not (=false). The default value is 'true'.The type of the column is 'radio' ( 

• col.gender.type=

  radio).

  radio defines the column type as radio buttons

• col.gender.list.size=2 indicates that there should be defines the list of 2 radio buttons.
• col.gender.name1=Male is the label of the first radio button
• col.gender.value1=M is the value which will be stored in the database
• col.gender.name2=Female, col.gender.value2=F is the label and value for the second radio button.

Setup a column containing a static list for the role

All properties related to the relation column are prefixed with col.relation. 

col.relation=Role
col.relation.width=30
col.relation.type=list
col.relation.list.size=4
col.relation.name1=Father
col.relation.value1=Dad
col.relation.name2=Mother
col.relation.value2=Mom
col.relation.name3=Son
col.relation.value3=S
col.relation.name4=Daughter
col.relation.value4=D

• The type of col.relation.type = list defines the column is type as list (
• col.relation.list.type size= list)There are 4 4 sets the number of values in the list (

• col.relation.

  list.size=4)The first name/value pair is Father/Dad (

  name1=Father, col.relation.value1=Dad sets the first name and value pair to Father and Dad

• col.relation.

  name1/

  name2=Mother, col.relation.

  value1)The

  value2=Mom sets the second name

  /

  and value pair

  is Mother/Mom (

  to Mother and Mom 

• col.relation.

  name2/

  name3=Son, col.relation.

  value2)
• ...

...

• value3=S sets the third name and value pair to Son and S

• col.relation.name4=Daughter, col.relation.value4=D sets the fourth name and value pair to Daughter and D

You can also populate lists using a query which retrieves values from a database.
To be able to explain how this works, move to the next section Find more detail on how to connect grid to a database.