How Do I Work with Checkboxes in a Data Grid?
This lesson will demonstrate how to associate the hilite state of a checkbox in a data grid with a row value in the data grid.
Adding a Checkbox to a Form
Edit Row Template Group
Now that the card with the data grid row template is visible, open the Application Browser selecting the Tools > Application Browser menu option.
Select the card with your template (it should be the second card under the Data Grid Templates stack) (1). Next, select the Row Template group on the card (2). Doing so will select the group on the card.
Add a Checkbox
Edit Checkbox Properties
Delete the Label Field
Stop Editing Group
Edit Row Behavior
Edit the FillInData Handler
In the FillInData Handler you need to remove references to the Label field and add code for the Check button. The code will set the label of the checkbox to the "label" property of the data grid row. It will set the hilited property to the "checked" property of the row.
Copy & Paste
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 label of button "Check" of me to pDataArray["label"]
set the hilited of button "Check" of me to pDataArray["checked"]
Update LayoutControl and ResetData
The LayoutControl and ResetData handlers also have references to the Label field which no longer exists. Update both of those handlers with references to the Check button.
Copy & Paste
on LayoutControl pControlRect
-- This message is sent when you should layout your template's controls.
-- This is where you resize the 'Background' graphic, resize fields and
-- position objects.
-- For fixed height data grid forms you can use items 1 through 4 of pControlRect as
-- boundaries for laying out your controls.
-- For variable height data grid forms you can use items 1 through 3 of pControlRect as
-- boundaries, expanding the height of your control as needed.
put the rect of button "Check" of me into theFieldRect
put item 3 of pControlRect - 5 into item 3 of theFieldRect
set the rect of button "Check" of me to theFieldRect
set the rect of graphic "Background" of me to pControlRect
-- Sent when data is being emptied because the control is no longer being used to display data
set the text of button "Check" of me to empty
set the hilite of button "Check" of me to false
Update Data Grid Row Value When User Changes Checkbox State
When the user clicks on the checkbox the hilited state will change. You need to update the row data in the data grid when this happens so that the dgData array properly represents what is being seen in the interface. You can do this in the mouseUp behavior of the behavior script.
During mouseUp the hilited state of the checkbox has been changed and so it is safe to save the value. You just need to call SetDataOfLine and pass in the hilite of the target (the target being the checkbox button).
Add the following to the behavior script. Make sure and compile the script afterwards.
Copy & Paste
on mouseUp pMouseBtnNum
if pMouseBtnNum is 1 then
## did they click on the checkbox?
if the short name of the target is "Check" then
## Update internal value in data grid
SetDataOfLine the dgLine of me, "checked", the hilite of the target
Populate the Data Grid
Add a simple script that will populate the data grid with two rows. Each has the "label" and "checked" properties that you referenced in the behavior script earlier.
Paste this script to the button script.
Copy & Paste
put "Line 1" into theDataA["label"]
put "true" into theDataA["checked"]
put "Line 2" into theDataA["label"]
put "false" into theDataA["checked"]
set the dgData of group "DataGrid 1" to theDataA
Checking/Unchecking All Checkboxes in a Data Grid
The code for checking/unchecking all items in the list isn't too complicated. Here is how the logic is broken up:
- We will use the "checked" value of row 1 to decide what to set all of the other rows to. Get the current value of row 1 and toggle it.
- Loop through all lines of the data grid, setting the value of the "checked" property of each row to the new value. Use SetDataOfLine as this command will not redraw the data grid each time it is called.
- Refresh the data grid so that the new row values are used to display each row.
Copy & Paste
## Get checked value for 1st row
dispatch function "GetDataOfLine" to group "DataGrid 1" with 1, "checked"
put the result into theCheckedValue
## Get inverse value of 1st row
put not theCheckedValue into theCheckedValue
## Update all rows
## SetDataOfLine does not redraw data grid
repeat with theLineNo = 1 to the dgNumberOfLines of group "DataGrid 1"
dispatch "SetDataOfLine" to group "DataGrid 1" with theLineNo, "checked", theCheckedValue
## Update datagrid display
dispatch "RefreshList" to group "DataGrid 1"