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 a Data Grid Table

Create a Data Grid Table

Add Some Data

Add Some Data

I've added a couple of rows of decimal numbers to experiment with.

Create Column Template

Create Column Template

Select the Columns pane (1) in the property inspector and click the Add custom column behavior button (2). This will create a custom column template and behavior script.

Edit Column Template

Edit Column Template

When you create a custom template for a column a new group, named after the column, is added to the data grid row template. Here you see that I have selected the card the row template is on (the card is part of the Data Grid XXX substack of your stack) and I can see the group for my column.

Edit Column Template Group

Edit Column Template Group

Select the column group in the Application Browser (1) and click the Edit Group button (2) to edit the contents of the column group.

Create 3 Fields

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

Edit Column Behavior

Now that we have created the objects we need to display the column data we need to tell the column what to do when it is drawn. Return to the Property Inspector and from the Columns pane (1) click the Column Behavior button (2). This will open the behavior script for the column.

Update FillInData

Update FillInData

The decimal number is going to be displayed by assigning the left side of the decimal to the Leftvalue field and the right side of the decimal to the Rightvalue field.

Update LayoutControl

Update LayoutControl

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.

Update EditValue

Update EditValue

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).

Refresh Data Grid

Refresh Data Grid

Now that we have finished making the necessary changes we need to refresh the data grid so that it redraws with the new template controls we've added. From the Basic Properties pane of the inspector palette click the Refresh Data Grid button. Alternatively you can send "ResetList" to the data grid.

Test

Test

We can see that the decimals all appear in the center of the cell. Double-clicking brings up an editing field like you see here. If you resize the column you will notice that the decimal remains in the center of the cell.

0 Comments

Add your comment

E-Mail me when someone replies to this comment