See Also

Enumerations

Name Values
EditTypes None
Text
LongText
Integer
YesNoSelect
Checkbox
Percent
Date
Password
Currency
Double
FormatTypes Text
LongText
Currency
YesNo
Checkbox
Percent
ProgressBar
FontAwesome
Date
Color
Picture
HTML
Password
Tree
Double
SelectionTypes Row
Cell

Constants

Name Type Value
This class exposes no constants.

Events

Definition Description
CellChange( Row as GraffitiWebGridRow, Column as GraffitiWebGridColumn, NewValue as Variant ) Fired when the value of a cell has been edited by the user.
CellClick( Row as GraffitiWebGridRow, Column as GraffitiWebGridColumn, pageX as Integer, pageY as Integer ) Fired when the user clicks a cell.
CelDoubleClick( Row as GraffitiWebGridRow, Column as GraffitiWebGridColumn ) Fired when the user double-clicks a cell.
ColumnResized( Column as GraffitiWebGridColumn ) Fired when a column is resized in the display by the user.
ColumnsReordered() Fired when the columns are reordered by the end-user. Use methods to determine new order.
ContextClick( Row as GraffitiWebGridRow, Cell as GraffitiWebGridColumn, X as Integer, Y as Integer ) Fired when the user right-clicks on a cell.
EditBegin( Row as GraffitiWebGridRow, Column as GraffitiWebGridColumn ) Raised when an edit operation has begun.
EditEnd( Row as GraffitiWebGridRow, Column as GraffitiWebGridColumn ) Raised when an edit operation has ended, either by saving or canceling.
RowCollapsed( Row as GraffitiWebGridRow ) Fired when a tree row is collapsed. Children should be removed at this point.
RowExpanded( Row as GraffitiWebGridRow ) Fired when a tree row is expanded. Children should be added at this point.
RowReordered( Row as GraffitiWebGridRow, oldIndex as Integer, newIndex as Integer ) Fired when the user drag reorders a row.
RowSelectionChanged() Fired when the user changes the row selection. Use methods to determine new selection.
ScrollPositionChanged( X as Integer, Y as Integer ) The user has scrolled the display.
Sorted( ByColumn as GraffitiWebGridColumn, Ascending as Boolean ) When the user changes the sort order of the display, after the rows have been sorted by the new sort order.

Methods

Definition Description
AddCellStyle( Row as GraffitiWebGridRow, Column as GraffitiWebGridColumn, newStyle as WebStyle ) Add a WebStyle to a cell.
AddChild( ParentRow as GraffitiWebGridRow, ChildRow as GraffitiWebGridRow ) Add a child to a parent tree row.
AddColumn( Column as GraffitiWebGridColumn ) Add a header to the grid.
AddRow( newRow as GraffitiWebGridRow ) Adds a new row to the grid's data.
Column( atIndex as Integer ) as GraffitiWebGridColumn Retrieve a Column object by the specified criteria, check for Nil after.
Column( ID as String ) as GraffitiWebGridColumn
ColumnCount() as Integer Retrieve the number of columns currently added to the Grid (ColumnCount - 1 for iteration).
ColumnIndex( ID as String ) Returns the index of the column, useful for interation.
ColumnIndex( Column as GraffitiWebGridColumn )
DeleteAllRows() Remove all rows from the grid.
DeselectAllRows() Clear the grid's selection.
EditActiveCell() Edit the cell that is currently selected.
EditCancel() Cancels the current edit operation.
EditCell( Row as Integer, Column as Integer ) Edit the defined cell.
EditCell( Row as GraffitiWebGridRow, Column as GraffitiWebGridColumn )
EditCommit() Commits the current edit operation.
InsertChild( ParentRow as GraffitiWebGridRow, ChildRow as GraffitiWebGridRow, atIndex as Integer ) Insert a child row of a tree row at a given index.
InsertRow( Row as GraffitiWebGridRow, intIndex as Integer ) Insert a row in the display.
NextCell() Navigate selection to the next cell.
NextRow() Navigate selection to the next row.
PreviousCell() Navigate selection to the previous cell.
PreviousRow() Navigate selection to the previous row.
RemoveCellStyle( Row as GraffitiWebGridRow, Column as GraffitiWebGridColumn, theStyle as WebStyle ) Remove a WebStyle from a cell.
RemoveChild( ParentRow as GraffitiWebGridRow, ChildRow as GraffitiWebGridRow ) Remove the defined child row from the parent row.
RemoveColumn( Column as GraffitiWebGridRowColumn ) Remove the specified column from the display.
RemoveColumn( columnIndex as Integer )
RemoveRow( intIndex as Integer ) Remove the specified row.
RemoveRow( Row as GraffitiWebGridRow )
ResetGrid() Removes all Rows and Columns from the Grid. Do not execute when LockUpdate = True, execute before.
Row( RowID as String ) as GraffitiWebGridRow Finds the row matching the criteria, check for Nil after.
Row( RowIndex as Integer ) as GraffitiWebGridRow
RowCount() as Integer Returns the number of rows currently added, for iteration use RowCount - 1.
RowIndex( Row as GraffitiWebGridRow ) as Integer Returns the current index of the row in the display.
ScrollTo( PositionX as Integer, PositionY as Integer ) Scrolls the display to the specified coordinates.
ScrollToCell( Row as Integer, Column as Integer ) Scrolls the specified Row/Cell in to view.
ScrollToCell( Row as GraffitiWebGridRow, Column as GraffitiWebGridColumn )
ScrollToRow( Row as Integer ) Scrolls the display along the Y-axis to the specified row.
ScrollToRow( Row as GraffitiWebGridRow )
SetActiveCell( Row as Integer, Cell as Integer = 0, ForceEdit as Boolean = False ) Sets the grid selection to the Row and Cell specified. If ForceEdit = True and the Grid is editable, the cell be put in edit mode.
toCSV() as String Returns a CSV string of the current grid contents.
UpdateDisplay( InvalidateAllRows as Boolean = False ) Force an update of the grid display.

Properties

Name Type Default Value Description
AutoEdit Boolean False When True and Editable = True, navigating/clicking the cells in the grid will automatically put them in edit mode.
Editable Boolean False When True, cells can be made editable using the EditActiveCell and EditCell methods.
Editing Read-Only Boolean False Returns True when the user is currently editing a cell.
EnableColumnReorder Boolean False Allow users to drag reorder columns in the display.
EnableRowReorder Boolean False Allow users to drag reorder rows.
ForceFitColumns Boolean False When True, columns are forced to stay inside the viewable area. Resizing one column will resize other proportionally to maintain visibility.
HeaderRowHeight Integer 25
HeaderRowVisible Boolean True Determines if the columns header row is displayed.
ListIndex Read-Only Integer Returns the index of the currently selected row.
LockUpdate Boolean False When True, certain actions are buffered until value is set to False again. This is used to increase the speed at which grids render as lengthy operations (like adding large numbers of rows) are deferred until all of the relevant data for the update is available.
MultiSelectRows Boolean False When True, more than one row may be selected at a time in the display.
RenderedBottomRow Integer -1 The bottom-most row that is currently rendered in the display. This may be a row that is outside the display, but is rendered ahead for scrolling continuity.
RenderedTopRow Integer -1 The top-most row that is currently rendered in the display. This may be a row that is outside the display, but is rendered ahead for scrolling continuity.
RowHeight Integer 25 Height of all rows.
SelectedCell Read-Only Integer -1 The column index of the currently selected cell in the display.
SelectedRows Read-Only Array of GraffitiWebGridRow Nil The currently selected rows in the display.
SelectionType SelectionTypes SelectionTypes.Row Determines how focus on the grid is displayed, either by Row or Cell.
StyleCellBorder WebStyle Nil WebStyle applied to row cells' border. If Nil, uses default Bootstrap style.
StyleHeader WebStyle Nil WebStyle applied to column headers. If Nil, uses default Bootstrap style.
StyleRowEven WebStyle Nil WebStyle applied to even rows. If Nil, uses default Bootstrap style.
StyleRowOdd WebStyle Nil WebStyle applied to odd rows. If Nil, uses default Bootstrap style.
StyleRowSelected WebStyle Nil WebStyle applied to selected rows/cells. If Nil, uses default Bootstrap style.
StyleTextEditor WebStyle Nil WebStyle applied to editor for columns using EditTypes.Text.

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:

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 GraffitiWebGridRow, Column as GraffitiWebGridColumn, pageX as Integer, pageY as Integer) Handles CellClick
    if Column.ID = "columnFieldValue" then me.EditActiveCell()
End Sub

Notes

Column Direct Modification

For GraffitiWebGrid 2.0, much of the functionality for manipulating Column properties has been moved from the GraffitiWebGrid class to GraffitiWebGridColumns. This allows you to do things like:

dim colorColumn as GraffitiWebGridColumn = gridInstance.Column( "colorval" ).Visible = False

Row Direct Modification

As withe Column Direct Modification above, Rows are implemented in the same fashion, allowing:

dim colorColumn as GraffitiWebGridColumn = gridInstance.Column( "colorval" )
dim rowZero as GraffitiWebGridColumn = gridInstance.Row( 0 )
rowZero.Cell( colorColumn ) = RGB( 0, 0, 0 )

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.

Sorting and Tree Rows

Tree children are independent rows, and will be sorted as such. At the time of this writing (R27) sorting should, in most scenarios, be disabled on Tree grids.

Hidden Columns and Resizing

If you use hidden columns in the grid, you must set their Resizeable property to False. Failure to do so will result in header-column resizing that doesn't match row-column resizing.

Common Problems

Columns are rendered, but I don't see any rows!

Make sure that your row data matches up to your column IDs.

Make sure that none of your column definitions uses id as the column ID. This is used internally to track the rows, and will cause problems. Alternatively, use something like myID or rowID. Other strings to avoid are:

  • name
  • field
  • editor
  • formatter
  • sorter
  • focusable
  • minWidth
  • resizable
  • selectable
  • cssClass
  • headerCssClass
  • toolTip
  • _decimalPlaces
  • _decimalPlacesMin
  • _nilDateOverride
  • Last modified: 6 weeks ago
  • by agcyphers