GraffitiSuite Documentation

GraffitiWebGridColumn
GraffitiWebGridRow

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 )

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

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

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

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 )

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.

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.

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.

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

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.

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