Table of Contents
See Also
Enumerations
Name | Values |
---|---|
EditTypes | None |
Text | |
LongText | |
Integer | |
YesNoSelect | |
Checkbox | |
Percent | |
Date | |
Password | |
Currency | |
Double | |
TimeWithSeconds | |
TimeWithoutSeconds | |
FormatTypes | Text |
LongText | |
Currency | |
YesNo | |
Checkbox | |
Percent | |
ProgressBar | |
FontAwesome | |
Date | |
Color | |
Picture | |
HTML | |
Password | |
Tree | |
Double | |
TimeWithSeconds | |
TimeWithoutSeconds | |
SelectionTypes | Row |
Cell | |
SortDirections | Ascending |
Descending | |
None |
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. |
CellMouseEnter(row as GraffitiWebGridRow, column as GraffitiWebGridColumn) | Raised when the mouse enters a grid cell. |
CellMouseExit(row as GraffitiWebGridRow, column as GraffitiWebGridColumn) | Raised when the mouse exits a grid 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. |
EditKeyPress(Row as GraffitiWebGridRow, _ | Raised when the user presses a key while editing. |
Column as GraffitiWebGridColumn, _ | |
KeyCode as Integer, _ | |
AltKey as Boolean, _ | |
CtrlKey as Boolean, _ | |
ShiftKey as Boolean, _ | |
MetaKey as Boolean, _ | |
EditorValue as String) | |
HeaderClicked(Column as GraffitiWebGridColumn) | Raised when the user clicks a column while the grid's Sortable property is False. |
KeyPress(Row as GraffitiWebGridRow, _ | Raised when the user presses a keyboard key on the grid, but not when editing. |
Column as GraffitiWebGridColumn, _ | |
KeyCode as Integer, _ | |
AltKey as Boolean, _ | |
CtrlKey as Boolean, _ | |
ShiftKey as Boolean) | |
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. |
ScrollPositionChanged( X as Integer, Y as Integer ) | The user has scrolled the display. |
SelectionChanged() | Fired when the user changes the row selection. Use methods to determine new selection. |
Sorted( ByColumn as GraffitiWebGridColumn ) | When the user changes the sort order of the display, after the rows have been sorted by the new sort order. |
Methods
Definition | Description |
---|---|
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. |
SetCellStyle( Row as GraffitiWebGridRow, Column as GraffitiWebGridColumn, newStyle as WebStyle ) | Add a WebStyle to a cell. |
SortBy( Column as GraffitiWebGridColumn, _ | Sort the specified column. |
Direction as SortDirections | |
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. |
Sortable | Boolean | True | When True, users may sort the grid by clicking column headers. This also disable Tree functionality. |
SortedColumn | GraffitiWebGridColumn | Nil | The column by which the grid's rows are currently sorted. |
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. |
TreeView | Boolean | False | When True, the Grid can contain tree row. Setting to True disables column sorting. |
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
Retrieving Value from Selected Row
This is done by reading the SelectedRows array:
Sub SelectionChanged() Handles SelectionChanged if me.SelectedRows.Ubound >= 0 then dim selRow as GraffitiWebGridRow = me.SelectedRows(0) dim firstColumn as GraffitiWebGridColumn = me.Column(0) dim rowColumnValue as String = selRow.Cell( firstColumn ) '// Do something with rowColumnValue here. Note that GraffitiWebGridRow.Cell ' returns a variant which matches the data type of that column, so String ' may not be the correct data type depending on what you're project is ' doing. end if 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" ) cololColumn.Visible = False
Row Direct Modification
As with Column Direct Modification above, Rows are implemented in the same fashion, allowing:
dim colorColumn as GraffitiWebGridColumn = gridInstance.Column( "colorval" ) dim rowZero as GraffitiWebGridRow = 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
I receive the following Runtime Exception: The data could not be converted to text with this encoding.
This is a common error when you're loading non-UTF8 data from MySQL for use in Xojo Web projects. To address this issue, you should execute the following commands upon connecting:
myDatabase.SQLExecute("set names utf8 collate utf8_general_ci") myDatabase.SQLExecute("set character set utf8")
The grid doesn't scroll on Firefox for Android
Due to an incompatibility in Firefox for Android, the Grid's drag scrolling does not function. Attempts to rectify this have failed. For the time being you can workaround this by detecting the device and browser and adding only those rows that would be visible and using pagination.
It is likely that this will be addressed soon either by an update to GraffitiWebGrid or a new release of the browser.
Columns are rendered, but I don't see any rows!
Make sure that your row data matches up to your column IDs.
I do not receive events, or receive action-related NilObjectExceptions!
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