Double click on the Data Grid to open the DGH plugin, then click on the "Form" topic inside the DGH properties window.

Click on the Edit... button to open the Form Builder.

Clicking on the "Draw List" button populates the Data Grid and will allow DGH to display a preview of the Data Grid in its Form Builder.

Double-click on the ArrowExpander image to open the LiveCode Inspector. We will need the Inspector for deleting the ArrowContracted image which is not visible by default.

Click again on the ArrowExpander image to give the focus to the Template Area, then press the delete key on your keyboard, to delete the graphic.

Use the Controls Popup (1) for selecting the "ArrowContracted" graphic.

The graphic is "invisible" by default. Chek the visible property checkbox (2) in the LiveCode Inspector.

The graphic is now visible. Click on it (3) to give it the focus, then press the delete key.

We are now ready to add and position a checkbox in the Data Grid template.

Drag the Check Box objects from the Classic Objects list (1) and drop it into the Template Area (2)

Use the mouse or the arrows keyboard keys to place and dimension the checkbox the exact location and size you want.

In the Inspector, rename the new checkbox: "expanded" (3) and hide its label (4)

To reflect the template changes, we have now to edit the script. Click on the "script" button and select the "Edit script" menu item.

Change the mouseUp handler by the following code:

on mouseUp pMouseBtnNum

  if pMouseBtnNum is 1 then

     switch the short name of the target

        case "expanded"

           ## Update internal data

           SetDataOfIndex the dgIndex of me, "expanded", the hilited of the target

           ## Redraw so LayoutControl and FillInData can update UI

           RefreshIndex the dgIndex of me

           break

     end switch

  end if

end mouseUp

And the FillinData message by:

on FillInData pDataArray

  -- This message is sent when the Data Grid needs to populate

  -- this template with the data from a record. pDataArray is an

  -- an array containing the records data.

  -- You do not need to resize any of your template's controls in

  -- this message. All resizing should be handled in resizeControl.

  set the text of field "Name" of me to pDataArray["name"]

  set the text of field "Description" of me to pDataArray["description"]

  set the hilited of btn "expanded" of me to pDataArray["expanded"]

  set the visible of field "Description" of me to pDataArray["expanded"]

end FillInData

In the Script Editor window, click on the "apply" button, to save the script and close the window.

When DGH is opening the Script Editor it reduces itself as a small palette, so we need to revert it back at its original size.

For doing this, click on the open button, then DGH will display the Column Editor.

Click on the Update button (1) to apply the script changes to the Template Area preview (2).

Before applying the changes to your project Data Grid, you can checked all is working as expected by using the Template Area preview.

By checking the checkbox (1), the line expands with no error.

We can consider our job, done, and then click on the "Apply" button (2) to apply the changes to the project Data Grid.

That's it, our Data Grid form is ready to use!