Customize Column Templates

Now that you have created and configured the data grid table you can customize any columns that need to display data in a special way.

Create a Column Template

Create a Column Template

With the data grid selected, switch to the Columns pane (1) of the property inspector and select the column that you want to customize (2) and click the "Add custom column behavior" button (3).

Edit the Row Template

Edit the Row Template

Now switch back to the Basic Properties pane (1) and click the Row Template button (2) to open the card with the template on it.

When the card opens up you will see a group named Change (1). This is the custom template for the Change column. You will also see a button named Change Behavior (2). This script of this button defines the behavior for the Change group.

Add Images

Add Images

The Change column needs to images in order to visually represent the change in stock price as having gone up or down. Import those two images and note their ids.

Note: When a control has a behavior property and the control (or a child of the control if the control is a group) references an image id the Revolution engine first looks for a matching id on the card where the behavior button resides. For this reason you don't have to worry if the ids of the images you just imported are unique for the card where your data grid resides.

Edit "Change" Group Properties

Edit "Change" Group Properties

As of Revolution 3.5 dp-7 you need to change some of the Change group properties before you do anything else. Select the Change group in the Application Browser and open the property inspector.

From the Basic Properties pane (1) set showname, opaque and showBorder to false and set borderWidth to 0 (2).

Switch to the Text Formatting pane (1) and set the margins to 0 (2).

Edit the Change Group

Edit the Change Group

Now you need to edit the Change group contents using the Edit Group button in the toolbar.

Add a label field and set the width to 100 (the width of the column is 100). Set the textAlign of the field to "right".

Rename the existing button "ChangeIndicator" and set the height and width to 15.

Edit the properties of the button. From the Basic Properties pane change the button style to transparent and set showName and opaque to false (1).

Switch to the Icons & Border pane (1) and set threeD, showBorder and hiliteBorder to false and set the borderWidth to 0 (2).

What We Have So Far

What We Have So Far

If you select both the field and the button they should be positioned as seen above.

Edit "Change" Column Behavior

Edit "Change" Column Behavior

Now we need to write the script that will determine how data will appear in the Change column. You can do this by editing the script of button Change Behavior (1) or you can select the data grid, open the property inspector, switch to the Columns pane and click on the Column Behavior button (2).

FillInData

FillInData

All you need to do in FillInData is set the text of the field and determine which image to display in the button. The first parameter passed to FillInData is the column value. Assign that to the field (1) and then determine the image (2).

Assign the Row Hilite Color

Assign the Row Hilite Color

As of Revolution 3.5 dp-7 here is no UI for assigning the row hilite color. You can do this from the message box however using the above script.

What We Have So Far

What We Have So Far

If you preview some data you will see that we have no right-aligned numbers with the appropriate arrow showing and up or down change.

0 Comments

Add your comment

E-Mail me when someone replies to this comment