GraffitiGridColumn

Enumerations #

Name	Values
DateTimeEditorLocales	EN DE NL RO RU ES IT
WidthTypes	Pixels Percentage

Constants #

Name	Type	Value
		This class exposes no constants.

Events #

Definition	Description
	This class does not expose any events.

Methods #

Definition	Description
Constructor( colID as String, colTitle as String )	Creates an instance of this class with the parameters as property values.

Properties #

Name	Type	Default Value	Description
ContextMenu	GraffitiMenuItem	Nil	Enables the automatic display of already configured and added GraffitiMenuItems instances without a round-trip to the server
DateTimeEditorLocale	DateTimeEditorLocales	EN	Locale used in the column’s editor is the Editor property is set to DateTime.
DecimalPlacesMax	Integer	4	Applies only to columns with FormatType and EditType = Double or Currency.
DecimalPlacesMin	Integer	0	Applies only to columns with FormatType and EditType = Double or Currency.
Editor	GraffitiWebGrid.EditTypes	None	Determines the editor type to be used. See EditTypes Enumeration of GraffitiWebGrid.
EditorButtonCaption	String	“”	Caption to display in the button of the EditTypes.TextWithButton editor. Supports FontAwesome icons in the format <fas fa-search>
EditorButtonIndicator	WebUIControl.Indicators	Default	Bootstrap indicator to apply to the button of an editor that possesses one.
EditorButtonTooltip	String	“”	Tooltip to display when the user hovers their mouse over the button of an editor that possesses one.
EditorFieldReadOnly	Boolean	False	When True and column is of type EditTypes.TextWithButton, the text field will be read only.
Focusable	Boolean	True	Determines whether this column’s cells will accept focus.
Formatter	GraffitiWebGrid.FormatTypes	Text	Determines how the values for this column are formatted for display.
FormatterJavaScript	String	“”	JavaScript function used to format cell values when Formatter = FormatTypes.JavaScript.
Group	GraffitiGridColumnGroup	Nil	Column group in which to include this column.
HeaderButtonCaption	String	“”	Supplying anything other than an empty string for this property will display a button in the column’s header.
HeaderButtonIndicator	WebUIContro.Indicators	Default	Bootstrap indicator applied to the header button.
HeaderButtonTooltip	String	“”	Tooltip for the header button.
HeaderStyle	WebStyle	Nil	Overrides the default style and the StyleHeader property of the containing Grid.
ID	String	“”	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	100	Maximum value allowed in the Integer editor.
IntegerValueMin	Integer	0	Minimum value allowed in the Integer editor. Negative numbers are supported.
MaxWidth	Integer	0	The maximum width this column can have within the display.
MinWidth	Integer	0	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.
PercentScale	GraffitiGridPercentScale	Nil	GraffitiGridPercentScale object that is applied to cell values when using FormatTypes.Percentage.
PopupMenuAllowEmpty	Boolean	False	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()	Empty Array	Possible values for the user to select in the 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	False	Determines whether this column can be resized.
Selectable	Boolean	False	Determines whether this column can be selected by clicking the header.
Sortable	Boolean	True	Determines whether the user can sort the rows by clicking this column’s header.
SortDirection ReadOnly	GraffitiWebGrid.SortDirections	None	Returns the current sort direction value.
Sorter	String	“”	JavaScript sort method to use for sorting grid rows by column data.
Style	WebStyle	Nil	Style applied to row cells in this column. Overrides everything except for style specified by AddCellStyle.
Tag	Variant	Nil	Use for storing things like your database field key. This value has no functional application beyond being used for your reference.
Title	String	“”	The displayed title for the column in the header.
Tooltip	String	“”	The tip text displayed when the mouse hovers over the column header.
Visible	Boolean	True	The current visible state of the column.
Width	Integer	0	The width for the column.
WidthType	WidthTypes	Pixels	Determines whether the Width property will be interpreted as a pixel value or a percentage.
ZeroValueOverride	String	“”	String to display when Double or Currency cell values are equal to 0.0. Leave empty to display actual value.

Examples #

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

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.