See Also

Enumerations

Name Values
This class exposes no enumerations.

Constants

Name Type Value
EditTypeLongText Integer 2
EditTypeCheckbox Integer 5
EditTypeColor Integer 9
EditTypeCurrency Integer 7
EditTypeDate Integer 4
EditTypeFontAwesome Integer 6
EditTypeHTML Integer 8
EditTypeNone Integer 0
EditTypePassword (NOTE: THIS IS NOT A SECURE IMPLEMENTATION) Integer 11
EditTypePercentage Integer 3
EditTypePicture Integer 10
EditTypeText Integer 1
SelectionCells Integer 1
SelectionRows Integer 0

Events

Definition Description
CellChange( Row as Integer, Column as Integer, NewValue as Variant ) This event is fired when the value of a cell has been edited.
CellClick( Row as Integer, Column as Integer ) This event is fired when a cell has been clicked.
CellDoubleClick( Row as Integer, Column as Integer ) This event is fired when a cell has been double-clicked.
ColumnReordered( theColumn as GraffitiWebGridColumn, oldIndex as Integer, newIndex as Integer ) Event is raised when a column is dragged by the user. Will fire for both the column moved and the column in the target position.
RowSelectionChanged() This event is fired rows in the grid are either selected or deselected.
ScrollPositionChanged( X as Integer, Y as Integer ) This event is fired when the viewing port has been scrolled to X and Y positions.
Sorted( ByColumnName as String, Ascending as Boolean ) This event is fired when the user has changed the sort order of the grid.

Methods

Definition Description
AddCellStyle(Row as Integer, Column as Integer, newStyle as WebStyle) Adds the specified WebStyle to the cell identified by Row and Column.
AddHeader( newHeader as GraffitiWebGridColumn ) This method is used to add a new column to the grid.
AddRow(d as Dictionary ) This method is used to add a new row of data to the grid.
CellValue(Row as Integer, Column as Integer) as Variant Returns the current value of the specified cell.
CellValue(Row as Integer, Column as String) as Variant) as Variant
DeleteAllRows() This method will delete all rows from the grid. Use LockUpdate property when performing such operations if your grid contains a lot of data.
DeselectAllRows() Deselects all rows.
EditActiveCell() When the grid is set to Editable, this method will open the editor for the currently selected cell.
GetColumn(atIndex as Integer) as GraffitiWebGridColumn Returns the column at the defined index.
GetColumn(ColumnField as String) as Integer Returns the column with the key specified by ColumnField.
GetColumn(theHeader as GraffitiWebGridColumn) as Integer Returns the index of the specified column.
GetRow(RowIndex as Integer) Returns the row at the specified index.
GetRowIndex(theRow as Dictionary) Returns the index of the provided row.
HeaderCount() as Integer Returns the count of all current headers.
HeaderStyle( theHeader as GraffitiWebGridColumn, Assigns theStyle as WebStyle ) Used for changing single header styles on-the-fly.
HideColumn( atIndex as Integer ) Hides the column at the specified index.
HideColumn( ColumnField as String Hides the column with the matching field value.
HideColumn( theColumn as GraffitiWebGridColumn ) Hides the specified column from the display.
InsertRow( d as Dictionary, intIndex as Integer ) This method will insert a new row in to the grid at intIndex.
NextCell() Will navigate to the next cell in left-to-right then top-to-bottom fashion.
NextRow() Will navigate to the next row from top-to-bottom.
PreviousCell() Will navigate the the cell to the right of the current cell in the grid.
PreviousRow() Will navigate to the next row above the currently selected row.
RemoveCellStyle(Row as Integer, Column as Integer, theStyle as WebStyle) Removes the defined style from the specified cell.
RemoveHeader(headerIndex as Integer) Removes the specified header from the grid.
RemoveHeader(theHeader as GraffitiWebGridColumn)
RemoveRow( intIndex as Integer ) This method will remove the row at intIndex.
RowCount() as Integer This method will return the number of rows in the grid (that’s UBound + 1).
RowTag(Row as Integer) as Variant Returns the current Tag property of the specified row.
RowTag(Row as Integer, assigns newValue as Variant) Sets the Tag property of the specified row to newValue.
ScrollTo( X as Integer, Y as Integer ) Scrolls the display to the specified (X, Y) coordinates.
ScrollToCell( Row as Integer, Cell as Integer Scroll the display to the specified row and cell.
ScrollToRow( Row as Integer ) This method will scroll the grid’s viewing port to the specified row.
Selected(theRow as Dictionary) as Boolean Returns True if the specified row is selected.
Selected(theRowIndex as Integer) as Boolean
SelectRows( SelRows() as Integer ) Will select all of the rows in the SelRows array that are present in the grid.
SetActiveCell( Row as Integer, Cell as Integer, ForceEdit as Boolean = False ) Will select the specified cell while optionally opening the editor for that cell.
ShowColumn( atIndex as Integer ) Shows the column at the specified index.
ShowColumn( ColumnField as String Shows the column with the matching field value.
ShowColumn( theColumn as GraffitiWebGridColumn ) Shows the specified column in the display.
UpdateCell( Row as Integer, Cell as Integer, NewValue as Variant ) Updates the value of the cell at the coordinates (Row,Cell). Honors the LockUpdate property for modifying large amounts of cells at a time.
UpdateColumnWidth(theCol as Integer, theWidth as Integer) Resizes the column to the specified width (in pixels)
UpdateColumnWidth(theColID as String, theWidth as Integer)
UpdateDisplay() For use in long operations or when the grid will otherwise not update properly. This method forces the grid to be re-rendered.
UpdateHeader(theHeader as GraffitiWebGridColumn) After making changes to a header's object, call this method to update the display. Useful for changing a header's title or tooltip.

Properties

Name Type Default Value Description
AutoEdit Boolean False Determines whether cells will automatically display their editor when they receive focus while Editable is True.
Editable Boolean False Determines whether cells are editable. When true while AutoEdit is false, double-clicking or clicking the edit icon at the right of the cell will display the cell’s editor.
EnableCellNavigation Boolean False Determines whether users can navigate through the cells using the keyboard.
EnableColumnReorder Boolean False Determines whether users can reorder the columns in the grid.
ForceFitColumns Boolean False When true, columns will automatically resize to fill the display.
HeaderRowHeight Integer 25 Determines the height of the header row.
HeaderRowVisible Boolean True If false, the column headers will not be visible in the display.
LockUpdate Boolean False Keeps the grid from updating while long operations are carried out.
MultiSelectRows Boolean False Determines if the user will be allowed to select more than one row at a time.
RenderedBottomRow(READ-ONLY) Integer -1 The bottom-most row currently rendered. May be outside the viewport by 1 to 2 rows.
RenderedTopRow(READ-ONLY) Integer -1 The top-most row currently rendered. May be outside the viewport by 1 to 2 rows.
RowHeight Integer 25 Sets the displayed height of each row.
SelectedCell Integer -1 The currently selected cell index.
SelectedRows() Integer Nil An array of row indices corresponding to those currently selected in the grid.
SelectionType Integer SelectionRows Determines how selections will be handled, either by cell or row. Constants provided.
StyleCellBorder WebStyle Nil Style applied to cell borders when using SelectionType = SelectionCell
StyleHeader WebStyle Nil Style applied to the header row of the grid.
StyleRowEven WebStyle Nil Style applied to even rows.
StyleRowOdd WebStyle Nil Style applied to odd rows.
StyleRowSelected WebStyle Nil Style applied to selected rows when using SelectionType = SelectionRow
StyleTextEditor WebStyle Nil Style applied to the short text editor.

Examples

Disable Column Sorting

Column sorting is controlled per-column. To disable column sorting you must set the Sortable property of your GraffitiWebGridColumn instance to False before adding:

dim newColumn as new GraffitiWebGridColumn( "columnID", "Column Text", "columnField" )
newColumn.Sortable = False
me.AddHeader( newColumn )

Edit Selected Cells

If you don't want all cells to be editable, you should set the Editable property of the GraffitiWebGrid instance to True, the AutoEdit property to false, then use logic in the CellClick event (or elsewhere) to trigger the Edit.

For using column indices:

Sub CellClick(Row as Integer, Column as Integer) Handles CellClick
  If Column = 1 Then me.EditActiveCell
End Sub

For using column fields or other properties:

Sub CellClick(Row as Integer, Column as Integer) Handles CellClick
  dim thisColumn as GraffitiWebGridColumn = me.GetColumn( Column )
  if thisColumn.Field = "columnFieldValue" then me.EditActiveCell()
End Sub

Notes

Header/Cell Dimensions

When applying WebStyles to your grid elements, you must remember that header style dimensions must match cell style dimensions. For example, if you are using a WebStyle for your grid's cells that has a border-left value of 1px, your header cell WebStyle must match this. Failure to do this will result in headers and columns not lining up correctly in the display. Remember that borders may be a transparent color if you do not wish to display a border on one of these two elements.

This also applies to other dimension-altering properties like margins and padding.