# GraffitiGridColumn
Class
## Enumerations
| Name | Value | Description |
| --- | :---: | --- |
| DateTimeEditorLocales | EN <br > DE <br > NL <br > RO <br > RU <br > ES <br > IT | Supported languages or locale for DateTime columns. |
| WidthTypes | Pixels <br > Percentage | Supported column width models. |
## Event Definitions
| Name | Parameters | Return Type | Description |
| --- | :---: | :---: | --- |
| InitializeCellContainer | (None) | GraffitiGridCellContainer | Raised when a cell's container is being initilaized allowing for changes. |
## Methods
| Name | Parameters | Return Type | Description |
| --- | :---: | :---: | --- |
| Close | (None) | (None) | (None) |
| Constructor | colID as String <br> colName as String | (None) | Creates an instance of this class with the parameters as property values. |
## Properties
| Name | Type | Default Value | Description |
| --- | :---: | :---: | --- |
| Attributes | mWidth | Integer | (None) |
| Attributes | mStyle | GraffitiStyle | (None) |
| Attributes | mObserver | GraffitiUpdateInterface | (None) |
| Attributes | mHeaderStyle | GraffitiStyle | (None) |
| ChartOptions | GraffitiGridChart | (None) | Grid chart object. |
| ContextMenu | GraffitiMenuItem | (None) | Enables the automatic display of already configured and added GraffitiMenuItems instances without a round-trip to the server |
| CurrencyCode | String | (None) | Currency denomination code to display. IE: "USD" |
| DateTimeLocale | DateTimeEditorLocales | (None) | Supported locale used for DateTimeEditor. |
| DecimalPlacesMax | Integer | (None) | (None) |
| DecimalPlacesMin | Integer | 0 | Applies only to columns with FormatType and EditType = Double or Currency. |
| Editor | GraffitiGrid.EditTypes | (None) | Determines the editor type to be used. See EditTypes Enumeration of GraffitiWebGrid. |
| EditorButtonCaption | String | (None) | Caption to display in the button of the EditTypes.TextWithButton editor. Supports FontAwesome icons in the format <fas fa-search> |
| EditorButtonIndicator | WebUIControl.Indicators | (None) | Bootstrap indicator to apply to the button of an editor that possesses one. |
| EditorButtonTooltip | String | (None) | Tooltip to display when the user hovers their mouse over the button of an editor that possesses one. |
| EditorFieldReadOnly | Boolean | (None) | When True and column is of type EditTypes.TextWithButton, the text field will be read only. |
| Focusable | Boolean | (None) | Determines whether this column’s cells will accept focus. |
| Formatter | GraffitiGrid.FormatTypes | (None) | Determines how the values for this column are formatted for display. |
| FormatterJavaScript | String | (None) | JavaScript function used to format cell values when Formatter = FormatTypes.JavaScript. |
| Group | GraffitiGridColumnGroup | (None) | (None) |
| HeaderButtonCaption | String | (None) | Supplying anything other than an empty string for this property will display a button in the column's header. |
| HeaderButtonIndicator | WebUIControl.Indicators | (None) | Bootstrap indicator applied to the header button. |
| HeaderButtonTooltip | String | (None) | Tooltip for the header button. |
| HeaderStyle | GraffitiStyle | (None) | Overrides the default style and the StyleHeader property of the containing Grid. |
| ID | String | (None) | The identifier for the column’s values. Values should be alphanumeric with no special characters such as underscore(_) or hyphen(-), and are case-sensitive. This should not be changed outside the Constructor. Spaces are also disallowed. Should not contain only a number or start with a number. |
| IntegerValueMax | Integer | -1 | Maximum value allowed in the Integer editor. |
| IntegerValueMin | Integer | -1 | Minimum value allowed in the Integer editor. Negative numbers are supported. |
| MaxWidth | Integer | (None) | The maximum width this column can have within the display. |
| MinWidth | Integer | (None) | The minimum width this column can have within the display. |
| NativeCheckboxDisabled | Boolean | False | When True, all checkboxes in the column will be disabled to prevent user's changing the value. |
| NilDateOverride | String | " | String value to be used when a DateTime value is Nil. |
| NumericGrouping | Boolean | False | When True, currency values are formatted with numeric (thousands) separators. |
| PercentScale | GraffitiGridPercentScale | (None) | GraffitiGridPercentScale object that is applied to cell values when using FormatTypes.Percentage. |
| PopupMenuAllowEmpty | Boolean | True | When True, the PopupMenu editor must have a valid selection. |
| PopupMenuPlaceholder | String | " | The placeholder text for the PopupMenu editor. |
| PopupMenuSearchThreshold | Integer | 0 | Determines how many values must be present in order to display the search bar within the cell's PopupMenu. |
| PopupMenuValues() | String | (None) | Array of values that user's may select from for PopupMenu editor. |
| ProgressAnimated | Boolean | False | When True, the Progress formatter will animated its value. Note that this will have no effect if ProgressStriped = False. |
| ProgressStriped | Boolean | False | When True, the progress value will have stripes drawn across its face. |
| Resizeable | Boolean | (None) | Determines whether this column can be resized. |
| Selectable | Boolean | (None) | Determines whether this column can be selected by clicking the header. |
| Sortable | Boolean | (None) | Determines whether the user can sort the rows by clicking this column's header. |
| SortDirection | GraffitiGrid.SortDirections | (None) | Returns the current sort direction value. |
| Sorter | String | (None) | JavaScript sort method to use for sorting grid rows by column data. |
| Style | GraffitiStyle | (None) | Style applied to row cells in this column. Overrides everything except for style specified by AddCellStyle. |
| Tag | Variant | (None) | Use for storing things like your database field key. This value has no functional application beyond being used for your reference. |
| Title | String | (None) | The displayed title for the column in the header. |
| ToolTip | String | (None) | The tip text displayed when the mouse hovers over the column header. |
| Visible | Boolean | (None) | The current visible state of the column. |
| Width | Integer | (None) | The width for the column. |
| WidthType | WidthTypes | (None) | Determines whether the Width property will be interpreted as a pixel value or a percentage. |
| ZeroValueOverride | String | (None) | String to display when Double or Currency cell values are equal to 0.0. Leave empty to display actual value. |
## Examples
### Sorter Method
The Sorter property allows implementation of a custom JavaScript sort function that is executed client-side. Note that errors in the JavaScript code supplied may cause Grid instances to fail to load or behave erratically. Below is an example of a functional JavaScript sort function for sorting integers, and is used within GraffitiGrid:
```
function(direction, columnId, firstRow, secondRow) {
'// direction is the integer direction of the sort. -1 for descending, 1 for ascending.
' columnId is the string column ID that is being sorted.
' firstRow is the JavaScript object containing the data for the first row in the comparison.
' secondRow is JavaScript object containing the data for the second row in the comparison.
var x = (isNaN(firstRow[columnId]) || firstRow[columnId] === '' || firstRow[columnId] === null) ? -99e+10 : parseFloat(firstRow[columnId]);
var y = (isNaN(secondRow[columnId]) || secondRow[columnId] === '' || secondRow[columnId] === null) ? -99e+10 : parseFloat(secondRow[columnId]);
return direction * (x === y ? 0 : (x > y ? 1 : -1));
}
```
You would store this in a string constant or variable and assign it to your GraffitiGridColumn’s Sorter property.
### Styling
To style the header, you can make use of GraffitiStyles to achieve the desired effect. To center text in the column header, you can use the following:
```
var gridColumnCenter as GraffitiStyle = GraffitiStyle.Create( Session, "gridColumnCenter", "text-align:center;justify-content:center" )
myColumn.HeaderStyle = gridColumnCenter
```
To style all of the row cells in a column, you can assign the gridColumnCenter object as defined above to the Style property of the column:
```
myColumn.Style = gridColumnCenter
```
One important note is that row cells use flexbox. This means that you’ll need to use the justify-content CSS attribute to center text, and other changes may need flexbox-specific attributes.
To right-align text in cells, you’ll need to use the flex-end value of the justify-content CSS attribute, like so:
```
var gridColumnRight as GraffitiStyle = GraffitiStyle.Create( Session, "gridColumnRight", "text-align:right;justify-content:flex-end" )
```
