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.
Opening the Form Builder
Populating The Form Data Grid
Editing controls in the Data Grid Helper Template Area
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.
Using the Template Area Controls List for Selecting an Object
Adding the Expanded CheckBox
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)
Updating the Row Behavior Script
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"]
Saving the Script and Going Back to the Column Builder Interface
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.
Updating the Template Area Content
Trying the changes in the Preview
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.