Select the data grid and open the property inspector. Click on Data Grid (1) in the tabs, then on the Row Template... button to open the card that the data grid's template is on.

The template for the data grid will open. Open the Project Browser from the Tools menu, and expand the hierarchy until you see the Row template as shown above. You can now edit the controls within the Row Template group in order to customize the look and feel according to your needs.

Here is an example of a customized template. I've added a Name and Title field (1) as well as a control for displaying a picture of the person (2).

After customizing the controls in our template you need to update the behavior associated with the template. The behavior script is where you tell the data grid what data goes in which controls as well as how to position the controls.

Click the Edit Script... button to open the behavior script. Note, you only see this when "Form" is selected (1) in the Style menu.

The default behavior script contains comments explaining what to do in each handler. The FillInData message is where you move data from a record into a LiveCode control. To do this you assign keys of pDataArray (1) to a control (2).

Note that the first parameter passed to FillInData is an array representing the current row being displayed. Also note how this is different than the first parameter passed to FillInData for a column template which is the value of the column.

Important: Make sure that you always refer to controls in the template using 'of me' (3). Since multiple copies of the template will be made you will have multiple controls with the same names. Using 'of me' removes any ambiguity and ensures that data is displayed in the correct control.

This is an example of a behavior that has been customized. The dgData of the data grid this template is associated with looks like this:

theDataA[1]["FirstName"]

theDataA[1]["LastName"]

theDataA[1]["Title"]

theDataA[2]["FirstName"]

theDataA[2]["LastName"]

theDataA[2]["Title"]

...

When filling in the data I place the "FirstName" and "LastName" values into a "Name" field (1) and the "Title" value into a "Title" field (2).

This example also shows how to use LayoutControl to layout your row template. Notice how I capture the rectangle of the row template at the beginning (3) and then use it to position all of the other elements (4).