How Do I Format a Number in a Column?
This Lesson presents how to format a number in a Data Grid column, using the Data Grid Helper Plugin (DGH).
Installing the Numbers Formatting Script from the DGH's Script Installer
First, drag a data grid onto a stack and double click on it to open the Data Grid Helper (DGH) Properties Palette.
Open the Scripts Topics and install the Number Formatting script.
Building Columns in the Columns Builder Preview
Click the (+) button and add three columns.
Name the columns:
- Vendors
- Sales Amount
- Phone Numbers
Adding Of A Custom Script In A Column
Open the Behaviors topic (1)
Double click on the "Sales Amount" header (2) to open the Column Content Area
Next, drag the Custom Script from the Column Builder Properties and drop it in the Column Content Area (3)
Formatting the column
Open the Column Builder's Format topic. (2)
In this column, we would like to have:
- numbers truncated to two decimals
- negative numbers in red, without the negative sign
- a comma as the thousands separator
In the Pattern property, type this pattern:
### ### ##0.00,### ### ##0.00[red]
Note the pattern is possibily divided in three items:
- the first for positive numbers
- the second for negative numbers
- the last for Zero values
For more information about how to build a formatting pattern, please follow this lesson:
http://lessons.runrev.com/m/4068/l/28533
In the Thousands Separtor property, type a comma.
Using DGH To Build The Required Script
DGH can now build the required script for applying a format to the column.
Click the Script Editor icon and select the "Build Script" menu.
Confirm Script Updating
Click the "Update" button to update the script of the column.
Confirming the warning message
Click the "Erase" button to replace the column default script with the script built by DGH.
Testing The Result In The Column Builder Preview
Before to validate our work on the Sales Amount column, this is better to test how our column will be presented.
In the Column Builder Preview, you can input some amounts in the three preview cells available for a column:
1742.375 in the first line.
-125 in the second line.
3174987.5 in the last line.
By doing that, you have probably noticed the number is formatted when the cell is closed, and that it reappears at its initial input when one edits it again.
That is because the format applied is a displaying format. It change only how the number is represented, and keeps the number unchanged in the data. This leaves the possibility of to continue sorting the column or to apply some calcul to the amounts such as doing sums.
Updating The Column's Content Alignement
To have the amounts perfectly aligned in the column, we can now changing it's Content Alignment by selecting the "Right" value.
Formatting the Phone Number Column
By repeating the creation of a custom script for the Phone Numbers column, we are able to apply a phone number format to this column by using a pattern such as:
000-00-00-00
And test the following values:
-111223344
-555667788
Bernard
Thanks. I hadn't realised that within the Data Grid Helper that one could drag the script 'object' onto the Column Content (column designer area). I also hadn't grasped that to create a Default Column Behavior one needed to initiate that action within the "Behaviors/Templates" section of DGH, followed immediately by the selection of a button that was on one's card OUTSIDE of the DataGridHelper.
Zryip - ASG Soft
Hello Bernard,
Thanks for your remarks.
Dragging a custom script from DGH in the column designer area (or template area) is an equivalent for clicking on the Plus (+) button in the LC inspector column tab.
The main reason of the existence of this special behavior object in DGH, is the need to customize the script of a column which contain the default datagrid field control.
About the usage of the "Behaviors / Templates" topic. This part of DGH, named "behavior picker", allow to change the default column behavior by selecting a button.
This is a special interface giving an alternative for overriding the default behavior. This DGH's feature was inspired by this Datagrid lesson:
http://lessons.runrev.com/s/lessons/m/datagrid/l/7327-How-Do-I-Override-the-Default-Behavior-For-Rendering-Data-to-a-Cell-
Will write a lesson about this DGH's feature.