How do I reorder rows in a Data Grid?

This lesson will show you how to use the Data Grid Edit mode for Data Grid forms.

The dgEdit Mode

Setting the dgEditMode property of a Data Grid to true will put the Data Grid into edit mode, setting it to false will take it out of edit mode.

When a Data Grid is in edit mode, the Data Grid displays an action control on the left hand side of each row and a reorder control on the right. The appearance and behavior of these controls can be customized.

Only form type Data Grids with fixed row height can be put into edit mode.

Using dgEditMode

This example stack uses a simple Data Grid form that displays the letters of the alphabet.

The code of the "Start Editing" button is

DGReorder *
on mouseUp
   set the dgEditMode of group "Alphabet" to true
end mouseUp
Click to copy

The code of the "Stop Editing" button is

on mouseUp
   set the dgEditMode of group "Alphabet" to false
end mouseUp
Click to copy

Click "Start Editing" to put the Data Grid into Edit mode. You can then use the reorder control on the right to reorder the rows.

DGReorder *

Click "Stop Editing" to take the Data Grid out of Edit mode.

Customizing the Edit mode options

There are 3 ways to customize the controls shown when the Data Grid is in Edit mode.

1. Setting "edit mode action select control" and "edit mode reorder control" properties

These properties can be set to the long ID of an object or empty.

Setting the "edit mode action select control" will change the control that appears on the left, setting the "edit mode reorder control" will change the control on the right. Setting either of these properties to empty will result in the control not being displayed.

set the dgProps["edit mode action select control"] of group "Alphabet" to the long id of widget "star"
Click to copy
DGReorder *

2. Handling GetEditModeActionSelectControl and GetEditModeReorderControl messages

The GetEditModeActionSelectControl and GetEditModeReorderControl messages are sent to the data grid's custom row template when an action is selected. Handling these messages allows you to specify a control by returning the ID of the control you want to display. Returning empty will result in no control being displayed.

on GetEditModeActionSelectControl
   return empty
end GetEditModeActionSelectControl
Click to copy

You can also use this method to prevent the reordering of certain rows. For example:

on GetEditModeReorderControl    
   if the dgIndex of me is 5 then    
       return empty
   end if
   pass GetEditModeReorderControl
end GetEditModeReorderControl
Click to copy

3. Directly edit the template controls

The third method is to directly edit the template controls, which are hidden groups your DataGrid template stack.



A minor issue, but new users will possibly not know what to do. The sample stack is very nice, but it does not have any suffix ".livecode", so it would not be executable on Desktop.


Another minor issue: Check the spelling of this lesson...)

Elanor Buchanan

Hi Roland,

Thanks for your comments. I have updated the sample file and proof read the lesson and fixed a few things I found. Please let us know if you spot any more errors.




As far as i can see, this only works if 'fixed row height' is true - if not, it doesn't seem possible to put the data grid into 'edit mode'.

If that truly is the case, it might be good to add to the sentence "Only form type Data Grids can be put into edit mode." near the top as this seems to be a second setting that stops this from working...

Panos Merakos

Dear Stam,

Indeed, the DG must have "fixed row height". In the dictionary entry of the "dgEditMode" property, it says:

"Only data grids form type data grids with can be put into edit mode."

This should read:

"Only data grids of type form with fixed row height can be put into edit mode."

I guess something got messed up in markdown :)

I'll update the lesson now, and have the dictionary entry fixed for the upcoming release.

Thanks for spotting this.

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.