How Do I Create a Checkbox in a Form?
This Lesson presents how to create a checkbox button in a data grid form, using the Data Grid Helper Plugin.
This lesson is based on the ExpandingRow stack located in this lesson: http://lessons.livecode.com/m/datagrid/l/9850-how-do-i-create-rows-that-can-expand-contract
and will consist to show you how to replace the arrows images by a checkbox button.
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
## 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
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"]
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.