How Do I Customize A Form's Row Template?
When you drop a data grid from the Tools palette onto a card a record template is created for you automatically. This template will display line delimited text but you will most likely want to customize the template. This lesson will show you how to begin customizing the template to meet your needs.
Reveal the Row Template
Select the data grid and open the property inspector. Click on Data Grid (1) in the tabs, then on the Row Template... button to open the card that the data grid's template is on.
The template for the data grid will open. Open the Project Browser from the Tools menu, and expand the hierarchy until you see the Row template as shown above. You can now edit the controls within the Row Template group in order to customize the look and feel according to your needs.
Example Of A Customized Template
Here is an example of a customized template. I've added a Name and Title field (1) as well as a control for displaying a picture of the person (2).
Edit Behavior
After customizing the controls in our template you need to update the behavior associated with the template. The behavior script is where you tell the data grid what data goes in which controls as well as how to position the controls.
Click the Edit Script... button to open the behavior script. Note, you only see this when "Form" is selected (1) in the Style menu.
Edit the Behavior Script
The default behavior script contains comments explaining what to do in each handler. The FillInData message is where you move data from a record into a LiveCode control. To do this you assign keys of pDataArray (1) to a control (2).
Note that the first parameter passed to FillInData is an array representing the current row being displayed. Also note how this is different than the first parameter passed to FillInData for a column template which is the value of the column.
Important: Make sure that you always refer to controls in the template using 'of me' (3). Since multiple copies of the template will be made you will have multiple controls with the same names. Using 'of me' removes any ambiguity and ensures that data is displayed in the correct control.
An Example of a Customized Behavior
This is an example of a behavior that has been customized. The dgData of the data grid this template is associated with looks like this:
theDataA[1]["FirstName"]
theDataA[1]["LastName"]
theDataA[1]["Title"]
theDataA[2]["FirstName"]
theDataA[2]["LastName"]
theDataA[2]["Title"]
...
When filling in the data I place the "FirstName" and "LastName" values into a "Name" field (1) and the "Title" value into a "Title" field (2).
This example also shows how to use LayoutControl to layout your row template. Notice how I capture the rectangle of the row template at the beginning (3) and then use it to position all of the other elements (4).
Michael
Does truncateTail work for the Table Style or just for forms?
Trevor DeVore
truncateTail is available within the data grid library itself, so table or form.
David Glass
Question about TruncateTail....
If I set up a field to make use of TruncateTail it only seems to do the resize math when I make the grid narrower. When I make the grid wider the truncated text does not grow.
Example:
Start with: This is some text
Make the grid narrower: This is...
Make the grid wider: This is... (even though there is now enough room for all the text)
Is this by design? If so, where can I find the resize magic so I can attempt to change it so it also works when making the grid wider?
Trevor DeVore
@David - TruncateTail always works off of the width of the field the text is in. It sounds like your layoutControl code is not resizing the field past a certain width.
David Glass
----------
put the rect of field "lblProjectName" of me into theFieldRect
put item 3 of pControlRect - 5 into item 3 of theFieldRect
set the rect of field "lblProjectName" of me to theFieldRect
---------
This is what I'm doing in LayoutControl, and it works when narrowing the grid, but not widening it.
Since it is basing item 3 (right) off the pControlRect, it seems like it should work in either direction.
I'm obviously missing something.
Trevor DeVore
It looks like that should work. Try turning on the border of the field so you can see if it is being resized properly. Also, use 'put' to see what the value of pContorlRect and theFieldRect are. Are the values what you would expect?
David Glass
I have a hunch, based on virtually nothing since I haven't done any testing yet, that the field is actually resizing, but that TruncateTail has replaced the long text with the short text, so there's nothing to fill the new field width.
I'll bet I have to refill the field with the original text, and let TruncateTail fire again to act on the full-length text.
Any ideas on how I'd go about doing that? My first thought is a hidden field that holds the original text, and do some swapping in LayoutControl.
Trevor DeVore
You need to use custom properties. The following lesson shows how to implement TruncateTail using the custom property of a field: http://lessons.runrev.com/spaces/lessons/manuals/datagrid/lessons/7327-How-Do-I-Override-the-Default-Behavior-For-Rendering-Data-to-a-Cell-