Create a new stack and add a DataGrid to the stack. Add 3 columns to the DataGrid

• Genre
• Time
• Rating

In order to customize the look we need to edit the contents of the template group. Each column has its own template group in the Row Template.

1. Ensure you have "Select Grouped" turned off
2. Select the "Row Template" group
3. Click "Edit Group" in the LiveCode Toolbar.
4. Select the "Genre" group
5. Click "Edit Group" in the LiveCode Toolbar

To customise the "Genre" column template we want to add an Option Menu.

1. Delete the default field in the column template group
2. Add an Option Menu to the column template group
3. Name it "Genre"
4. Add some genre options

Close and save the DataGrid Templates stack.

Now we need to update the column behavior of the Genre column to use the customize column template.

• Open the Property Inspector for the DataGrid
• Go the the Columns pane
• Select the Genre column
• Click the "Column Behavior" button

This will open the behavior script for the column.

First we need to update the FillInData command to refer to the button we added and not a field.

on FillInData pData
    -- This message is sent when the Data Grid needs to populate
    -- this template with the column data. pData is the value to be displayed.
    
    -- Example:
    set the label of button "Genre" of me to pData
end FillInData

Next we update the LayoutControl and ReserData commands.

on LayoutControl pControlRect    
    -- This message is sent when you should layout your template's controls if your template is a group.
    -- If your template is not a group then there is no work to do here.
    -- You can use items 1 through 4 of pControlRect as boundaries for laying out your controls.
    
    -- Example:    
    set the rect of button "Genre" of me to pControlRect
end LayoutControl

on ResetData
    -- Sent when column data is being emptied because the control is no longer being used to display data
    set the label of button "Genre" of me to empty
end ResetData

Apply and close the behavior script.

Now we can test the DataGrid.

Open the Property Inspector for the DataGrid and add some tab separated data in the Contents pane.

You will see that the Genre column displays as a dropdown list the user can select from, and the initial label is set to the value in the Genre column.

Now we will customize the Rating column to use 5 stars to show the rating for a track.

1. Select the Rating column in the Columns pane of the Property Inspector
2. Create a new Column Behavior using the "+" button
3. Edit the "Rating" group of the Row Template

1. Delete the default field
2. Add 5 small star SVG widgets named "Star1","Star2","Star3","Star4" and "Star5".
3. Save and close the Row Template stack.

Open the Row Behavior for the "Rating" column from the Property Inspector and update the FillInData, LayoutControl and ResetData handlers to refer to the new controls.

on FillInData pData
   -- This message is sent when the Data Grid needs to populate
   -- this template with the column data. pData is the value to be displayed.
   
   -- Example:
   set the visible of widget "Star1" of me to pData >=20
   set the visible of widget "Star2" of me to pData >=40
   set the visible of widget "Star3" of me to pData >=60
   set the visible of widget "Star4" of me to pData >=80
   set the visible of widget "Star5" of me to pData >=100
end FillInData

on LayoutControl pControlRect    
   -- This message is sent when you should layout your template's controls if your template is a group.
   -- If your template is not a group then there is no work to do here.
   -- You can use items 1 through 4 of pControlRect as boundaries for laying out your controls.
   
   -- Example:    --
   --set the rect of field 1 of me to pControlRect
   set the topLeft of widget "Star1" of me to (item 1 of pControlRect+3, item 2 of pControlRect+3)
   set the topLeft of widget "Star2" of me to the topRight of widget "Star1" of me
   set the topLeft of widget "Star3" of me to the topRight of widget "Star2" of me
   set the topLeft of widget "Star4" of me to the topRight of widget "Star3" of me
   set the topLeft of widget "Star5" of me to the topRight of widget "Star4" of me
end LayoutControl

on ResetData
    -- Sent when column data is being emptied because the control is no longer being used to display data
end ResetData

In the FillInData handler pData contains the value of the "Rating" column for the row being displayed. We use that value to determine how many stars to display.

Test the Rating display by setting a value in the Rating column of the DataGrid.

The table found controls named "Genre" and "Rating" in the row template group so those were used to render the data for those three columns.

Here is what those controls look like in the Project Browser. Notice how all of the controls are located in the "Row Template" group(1).

The column templates each have behaviors associated with them. The buttons containing these behaviors can be found on the same card as the "Row Template" group(2).