How Do I Align Decimals in a Column?
This lesson will show you how to create a custom column template that provides decimal alignment. You can download the stack used to create this lesson.
Create Column Template
Edit Column Template
Edit Column Template Group
Create 3 Fields
A column that aligns decimals in the center of the column, and is editable if the user double-clicks on the cell, is achieved by creating three fields. Since the column template group already had a field named "Label" I renamed it to "Leftvalue" (1). Set the textalign of this field to "right". Duplicate the "Leftvalue" field and name it "Rightvalue" (2). Set the textalign to right. Duplicate this field and rename the duplicate to "ForEditing" (3). The text of this field should be empty. Make sure that the ForEditing field has a higher layer than Leftvalue or Rightvalue.
Don't worry too much about positioning as the fields will be resized and repositioned when drawn in the data grid.
Edit Column Behavior
Since we want to align the decimal in the center of the cell we resize the left and right fields so that each takes up half of the available width (1). Finally we resize the ForEditing field to take up the entire cell (2). This is the field that the user can double-click on to edit the cell contents.
EditValue is the handler that is called when the data grid wants to edit a cell value. Usually this is because the user double-clicked on the cell or tabbed into the cell. Remember that if the user double-clicks on this cell they actually double-click on the ForEditing field. The problem is that the ForEditing field has no text in it and by default EditFieldText displays the htmltext of the field you are editing (1).
We can override this default by setting the dgTemplateFieldEditor[ text | htmltext | rtftext | unicodetext | utf8text ] of the data grid. Here we set the dgTemplateFieldEditor["text"] of the data grid (2).