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.

Attached Files

Adding a Checkbox to a Form

Adding a Checkbox to a Form

Be begin, drag a data grid onto a stack and set the style to Form using the Object Inspector.

Now we can add the checkbox. Click the Row Template button to open the template for the data grid.

Edit Row Template Group

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.

Now select the Object > Edit Group menu option. This will put the group in edit mode which will allow you to drag controls from the tools palette into the group.

Add a Checkbox

Add a Checkbox

From the tools palette, drag a checkbox onto the card and place it in the upper-left corner. The button will appear in the list of controls in the Application Browser.

Edit Checkbox Properties

Edit Checkbox Properties

Open the Object Inspector for the button and change the height to 21. Set the left and top properties to 0.

Delete the Label Field

Delete the Label Field

Now that you have added the checkbox button you no longer need the Label field in the row template. Select the Label field and delete it.

After deleting the field you should have the Background graphic and the Check checkbox in the group. Remember, you are still editing the group so the group is not listed in the card controls at the moment.

Stop Editing Group

Stop Editing Group

You are now done editing the group controls so select the Object > Stop Editing Group menu option.

Edit Row Behavior

Edit Row Behavior

Next you need to edit the Row Behavior in order to take into account the new checkbox control.

Click the Row Behavior button.

Edit the FillInData Handler

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"]

end FillInData

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

local theFieldRect

-- 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.

-- Example:

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

end LayoutControl

on ResetData

-- 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

end ResetData

Update Data Grid Row Value When User Changes Checkbox State

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

end if

end if

end mouseUp

Populate the Data Grid

Populate the Data Grid

You have now finished configuring the Data Grid so it is time to test. Add a button to the stack and name it Populate grid.

With the Edit tool active, right-click on the button and select Edit Script.

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

----------

on mouseUp

put "Line 1" into theDataA[1]["label"]

put "true" into theDataA[1]["checked"]

put "Line 2" into theDataA[2]["label"]

put "false" into theDataA[2]["checked"]

set the dgData of group "DataGrid 1" to theDataA

end mouseUp

Test

Test

After compiling the script, click on the Populate Grid button. Your card should now look similar to this.

Checking/Unchecking All Checkboxes in a Data Grid

Checking/Unchecking All Checkboxes in a Data Grid

When working with lists that have checkboxes it is nice to include the option to check or uncheck all of the items in the list. Let's look at how to do that.

Add a button to the card and name it Check/Uncheck. Edit the script of the button.

The code for checking/unchecking all items in the list isn't too complicated. Here is how the logic is broken up:

  1. 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.
  2. 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.
  3. Refresh the data grid so that the new row values are used to display each row.

----------

Copy & Paste

----------

on mouseUp

## 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

end repeat

## Update datagrid display

dispatch "RefreshList" to group "DataGrid 1"

end mouseUp

Test

Test

Click the Check/Uncheck button to test. You should see the checkboxes toggle between the checked and unchecked state.

If you get the dgData or dgText property of the data grid then you will see the proper values for the "checked" state of each row.

0 Comments

Add your comment

E-Mail me when someone replies to this comment