Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
web:grid2 [2019/10/08 10:35]
agcyphers [Events]
web:grid2 [2020/05/05 10:46] (current)
agcyphers [Common Problems]
Line 16: Line 16:
 | ::: | Currency | | ::: | Currency |
 | ::: | Double | | ::: | Double |
 +| ::: | TimeWithSeconds |
 +| ::: | TimeWithoutSeconds |
 | FormatTypes | Text | | FormatTypes | Text |
 | ::: | LongText | | ::: | LongText |
Line 31: Line 33:
 | ::: | Tree | | ::: | Tree |
 | ::: | Double | | ::: | Double |
 +| ::: | TimeWithSeconds |
 +| ::: | TimeWithoutSeconds |
 | SelectionTypes | Row | | SelectionTypes | Row |
 | ::: | Cell | | ::: | Cell |
 +| SortDirections | Ascending |
 +| ::: | Descending |
 +| ::: | None |
  
 ==== Constants ==== ==== Constants ====
Line 43: Line 50:
 | CellClick( Row as GraffitiWebGridRow,​ Column as GraffitiWebGridColumn,​ pageX as Integer, pageY as Integer ) | Fired when the user clicks a cell. | | 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. | | 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. | | 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. | | ColumnsReordered() | Fired when the columns are reordered by the end-user. Use methods to determine new order. |
Line 48: Line 57:
 | EditBegin( Row as GraffitiWebGridRow,​ Column as GraffitiWebGridColumn ) | Raised when an edit operation has begun. | | 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. | | 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) | ::: |
 +| 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. | | 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. | | RowExpanded( Row as GraffitiWebGridRow ) | Fired when a tree row is expanded. Children should be added at this point. |
Line 53: Line 76:
 | ScrollPositionChanged( X as Integer, Y as Integer ) | The user has scrolled the display. | | 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. | | SelectionChanged() | Fired when the user changes the row selection. Use methods to determine new selection. |
-| 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. |+| 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 ==== ==== Methods ====
 ^ Definition ​     ^ Description ​      ^ ^ 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. | | 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. | | AddColumn( Column as GraffitiWebGridColumn ) | Add a header to the grid. |
Line 96: Line 118:
 | ScrollToRow( Row as GraffitiWebGridRow ) | ::: | | 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. | | 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. | | toCSV() as String | Returns a CSV string of the current grid contents. |
 | UpdateDisplay( InvalidateAllRows as Boolean = False ) | Force an update of the grid display. | | UpdateDisplay( InvalidateAllRows as Boolean = False ) | Force an update of the grid display. |
Line 118: Line 143:
 | SelectedRows ''​Read-Only''​ | Array of GraffitiWebGridRow | Nil | The currently selected rows 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. | | 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. |
 | StyleCellBorder | WebStyle | Nil | WebStyle applied to row cells' border. If Nil, uses default Bootstrap style. | | 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. | | StyleHeader | WebStyle | Nil | WebStyle applied to column headers. If Nil, uses default Bootstrap style. |
Line 124: Line 150:
 | StyleRowSelected | WebStyle | Nil | WebStyle applied to selected rows/cells. 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. | | 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 ==== ==== Examples ====
  
Line 147: Line 173:
 End Sub</​code>​ End Sub</​code>​
  
 +=== Retrieving Value from Selected Row ===
 +This is done by reading the SelectedRows array:
 +<code xojo>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</​code>​
 ==== Notes ==== ==== Notes ====
 === Column Direct Modification === === Column Direct Modification ===
Line 171: Line 210:
  
 ==== Common Problems ==== ==== 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:
 +<code xojo>​myDatabase.SQLExecute("​set names utf8 collate utf8_general_ci"​)
 +myDatabase.SQLExecute("​set character set utf8"​)</​code>​
 +
 +=== 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! === === 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 your row data matches up to your column IDs.