How Do I Override the Default Behavior For Rendering Data to a Cell?
By default, a data grid table uses a single field object for each cell in a table and assigns the text property of that field to the cell's data. This lesson will show you how to quickly create your own script that determines how data is rendered in the default table cell. This can be useful for rendering HTML and unicode text, trailing off text that is too wide for a column or for coloring particular cells.
Begin With a Data Grid Table
Create a Button
The default column behavior property can be set to a button. The script of the button will be used to fill in each cell in the table.
I'm going to rename the button to My Default Column Behavior.
Set the Script Of The Button
When creating your own default column behavior it is a good idea to start with the script that the data grid uses by default. You can copy the data grid default script easily enough by selecting the button (1) and executing the following statement in the Message Box (2):
set the script of selobj() to the script of the behavior of button "Default Column" of stack "revDataGridLibrary"Customize Behavior
Now you can customize the behavior however you would like. Here is what the default behavior looks like.
Important: Make sure you include the dgDataControl getProp handler in your script. This is required in order for the data grid to work properly.
Set 'default column behavior' Property
Now you can set the default column behavior property of the data grid. Select the button (1) and execute the following in the Message Box (2):
set the dgProps["default column behavior"] of group "DataGrid 1" to the long id of selobj()Now it is time to customize your script!
Example: Truncate Tail
As an example, I will show you how to truncate the tail end of every cell whose content is too wide to fit. The data grid provides a helper command named TruncateTail that takes the short id of a field and a string that signifies the text is being truncated. I've added a call to TruncateTail to the FillInData and LayoutControl handlers so that cell contents are truncated when drawn or when a column is resized.
Note: TruncateTail works fairly well for most cases but can cause visual lag if there are lots of cells being displayed that use TruncateTail. You should test your data and table to make sure it performs adequately for your needs.
Quick Tip: You can determine the name of the column that is being rendered by checking the dgColumn property. You could use this property if you only wanted to truncate the text in certain columns:
switch the dgColumn of me
case "Col 1"
case "Col 2"
TruncateTail the short id of me, "..."
break
end switch Refresh
To see the results, click the Refresh Data Grid button in the Property Inspector (1). Notice how cell contents are no truncated as needed (2).
Example: Coloring Cells
In this example I am going to dim any cell that is empty. Since the default cell consists of a single field object I can just set the opaque to true, set the backgroundcolor and change the blendlevel.
Result
By clicking on the Refresh button (1) I can see the result (2).
Can't seem to make truncate work... I located the fillinData and LayoutControl handlers in the script of the data grid, but it's not clear to me how they get called.