Skip to content

TWebStringGrid

Description

Below is a list of the most important properties methods and events for TWebStringGrid. TWebStringGrid is similar to a VCL TStringGrid.

Designtime Runtime

Set or get the content of grid cells via:

Grid.Cells[col,row]: string;

Set or get the column width in the grid via

Grid.ColWidths[col]: integer;

Set or get the row height in the grid via

Grid.RowHeights[row]: integer

HTML template tag

The HTML tag the component can be associated with in an HTML template. Assign the ID attribute with a unique value and set the identical value to the ElementID property. Detailed information can be found in the Use of HTML templates topic.

HTML tag <SPAN ID=”UniqueID”>
</SPAN> ElementID UniqueID

Properties for TWebStringGrid

Property Description
BorderColor Selects the outer border color of the grid
BorderStyle Selects the border style of the grid
CellsArray: TJSArray Allows access of grid cells as TJSArray
CheckEnabled[ACol,ARow: integer): boolean Gets or sets the enabled state of the checkbox in cell ACol,ARow
CheckState[ACol,ARow: integer): boolean Gets or sets the state of the checkbox in cell ACol,ARow
ColCount Sets the number of columns in the grid
ColAlignments[ACol: integer]: TAlign; (public) Public property to get and set the column alignment. Default alignment is taLeftJustify
ColWidths[ACol: integer]: integer; (public) Public property to get and set the column width in pixels
ComboBoxItems: TStrings Gives access to the items used by a combobox inplace editor
DefaultColWidth Sets the default column width
DefaultRowHeight Sets the default row height
EditAdvance:boolean When true, the next cell in the grid goes automatically in edit mode when the editor is closed with the return key.
EditControl Gets or sets the custom control to use as inplace editor for a cell
EditMask Sets the mask for cells with a mask editor as inplace editor (geMask editor type)
ElementTableClassName Sets the CSS class for the TABLE element used to build up the grid
FixedColor Sets the color of fixed cells
FixedCols Sets the number of fixed columns in the grid
FixedRows Gets or sets the index of the first normal grid column displaying. Use this property to get or set the horizontal scroll position
GridLineColor Sets the color of grid lines
LeftCol Gets or sets the index of the first normal grid column displaying. Use this property to get or set the horizontal scroll position
Options The settings that are supported are: goEditing: enables editing in the grid goHorzLine: enables horizontal grid lines goVertLine: enables vertical grid lines goRowSelect: enables row selection
RangeEdit Holds the settings for the cell editor when it is of the type geRange. It allows to set range minimum, maximum, step.
RowCount Sets the number of rows in the grid
RowHeights[ARow: integer): integer; public Public property to get and set the individual row heights
Selection Gets or selects the range of selected cells in the grid. Selection is of the type TGridRect
SelectionColor Sets the background color of selected cells
SelectionTextColor Sets the text color of selected cells
TopRow Gets or sets the index of the first normal grid row displaying. Use this property to get or set the vertical scroll position
WordWrap: boolean When true, text in cells is displayed as wordwrapped text, otherwise, it is shown as single line text with possible use of ellipsis when the text is too long

Methods for TWebStringGrid

Method Description
AddButton(ACol,ARow: integer; AText: string; AStyle: string = ‘’); Adds a button to cell ACol,ARow with caption text AText. Optionally sets a CSS class AStyle to the button.
AddCanvas(ACol,ARow: integer) Adds a canvas to a cell to perform custom drawing
AddCheckBox(ACol,ARow: integer); Adds a checkbox to cell ACol, ARow
AddProgress(ACol,ARow: integer; APosition: integer; AStyle: string = ‘’); Adds a progress bar to cell ACol,ARow with position set to APosition,. Optionally sets a CSS class AStyle to the progress bar.
AddSortIndicator(ACol,ARow: integer; AIndicator: TGridSortIndicator); Adds a sort indicator to a column header. From the sort indicator click, the sorting of the grid is triggered.
Clear Clears all content of grid cells
ClearSelection Removes the selection from the grid
HasButton(ACol,ARow: integer): boolean Returns true when cell ACol,ARow has a button
HasCanvas(ACol,ARow: integer): boolean Returns true when cell ACol,ARow has a canvas
GetCanvas(ACol,ARow: integer): TJSHTMLCanvasElement Returns the HTML CANVAS element when one was added to a grid cell
HasCheckBox(ACol,ARow: integer): boolean Returns true when cell ACol,ARow has a checkbox
HasProgress(ACol,ARow: integer): boolean Returns true when cell ACol,ARow has a progressbar
HasSortIndicator(ACol,ARow: integer): boolean Returns true when cell ACol,ARow has a sort indicator
InsertColumn(const Index: integer); Inserts a new column in the grid at Index
InsertRow(const Index: integer); Inserts a new row in the grid at Index
IsMergedCell(ACol,ARow: integer): boolean Returns true when the cell ACol,ARow is part of a merged cell.
LoadFromJSON(const AURL: string; ADataNode: string); Load JSON formatted data found a AURL via a HTTP GET in the string grid. The expected data is a JSON array. When the ADataNode parameter is different from empty, it tries to fetch the JSON array from the ADataNode JSON node.
LoadFromJSON(AJSON: TJSObject; ADataNode: string); Load data from a JSON object. The expected data is a JSON array. When the ADataNode parameter is different from empty, it tries to fetch the JSON array from the ADataNode JSON node.
LoadFromJSONAsync(AJSON: TJSObject; ADataNode: string): TJSPromise; Async variant of the LoadFromJSON method. The await response is from the type TJSXMLHttpRequest.
LoadFromCSV(const AURL: string; Delimiter: char = ‘;’; LoadFixed: Boolean = false): TJSPromise; Load CSV formatted data found a AURL via a HTTP GET in the string grid. Optional parameters are the delimiter to use to parse the CSV file and when the LoadFixed parameter is true, the CSV data is also loaded in the fixed cells of the grid.
LoadFromCSVAsync(const AURL: string; Delimiter: char = ‘;’; LoadFixed: Boolean = false) Async variant of the LoadFromCSV method. The await response is from the type TJSXMLHttpRequest.
LoadFromStrings(AStrings: TStrings; Delimiter: char = ‘;’; LoadFixed: Boolean = false); Loads grid cells from a stringlist holding CSV structured data
MergeCells(ACol,ARow: integer; NumCol, NumRow: integer); Merges NumCol and NumRow cells from cell ACol, ARow
MouseToCell(X,Y: integer; var ACol,ARow: integer); Returns the column/row index of the cell found at client coordinates X,Y of the grid
RemoveButton(ACol,ARow:integer); Removes the button from cell ACol, ARow
RemoveCanvas(ACol,ARow:integer); Removes the canvas from cell ACol, ARow
RemoveCheckBox(ACol,ARow:integer); Removes the checkbox from cell ACol, ARow
RemoveColumn(const Index: integer); Removes column Index from the grid
RemoveProgress(ACol,ARow:integer); Removes the progressbar from cell ACol, ARow
RemoveRow(const Index: integer); Removes row Index from the grid
RemoveSortIndicator(ACol,ARow:integer); Removes the sort indicator from cell ACol, ARow
SaveToCSV(AFileName string; Delimiter: char = ‘;’; SaveFixed: boolean = false) Save grid contents to CSV file for download
SaveToString(AStrings: TStrings; Delimiter: char = ‘;’; SaveFixed: boolean = false Save grid contents to CSV structured data in a stringlist
SplitCells(ACol,ARow: integer); Splits merged cells from cell ACol,ARow`

Events for TWebStringGrid

Event Description
OnButtonClick Event triggered when a cell button is clicked
OnCanEditCell Event triggered just before editing starts (when goEditing = true in grid.Options) with a var parameter CanEdit to control whether the cell can be edited or not
OnCheckClick Event triggered when a cell checkbox is clicked
OnClick Event triggered when grid is clicked
OnClickCell Event triggered when a cell is clicked
OnDblClick Event triggered when grid is double-clicked
OnFixedCellClick Event triggered when a fixed cell is clicked
OnGetCellChildren Event triggered when a new cell is rendered during loading date from CSV or JSON in the grid. Passes the HTML element for the grid cell allowing to insert dynamically HTML child elements in the cell
OnGetCellClass Event triggered when a new cell is rendered during loading date from CSV or JSON in the grid. Allows to set the CSS class name for an individual cell allowing customization this way.
OnGetCellData Event triggered when a new cell is rendered during loading date from CSV or JSON in the grid. Allows to dynamically override or customize the values retrieved from the CSV or JSON (or dataset in case of a TWebDBGrid)
OnGetCellEditor Event triggered just before the inplace editing starts to get the cell editor type. The cell editor can be:
geText: normal edit
geNumber: spin edit
geDate: datepicker
geTime: timepicker
geRange: range selector
geColor: color picker
geWeek: week selector
geMonth: month selector
geURL: URL editor
geEmail: Email editor
geTel: Telephone editor
geMask: masked edit control
geCombo: combobox editor
geMemo: memo editor
geNone: read-only cell
OnGetEditText Event triggered when a cell goes to edit mode requesting the value to be edited
OnGetEditControlValue Event triggered when a cell goes to edit mode with a custom inplace editor control requesting the value to be edited
OnHttpRequestError Event triggered when an error occurred with the HTTP GET request used to get data via methods LoadFromJSON()/LoadFromCSV()
OnHttpRequestSuccess Event triggered when the HTTP GET request used to get data via methods LoadFromJSON()/LoadFromCSV()successfully returned
OnValidateEdit Event triggered when editing of a cell ends, allowing to check the new edited value and optionally modify it before it is being saved to the cell.
OnSetEditText Event triggered when a cell goes out of edit mode returned the edited value
OnSetEditControlValue Event triggered when a cell edited with a custom control goes out of edit mode returned the edited value

Sample code for TWebStringGrid

Add a cell with custom drawing

This code snippet adds a custom drawing element to cell 2,2 and performs a custom drawn line from top/left corner to bottom/right corner

procedure TForm1.WebButton1Click(Sender: TObject);
var
  ACanvas: TCanvas;
  el: TJSHTMLCanvasELement;
begin
  webstringgrid1.AddCanvas(2,2);
  el := webstringgrid1.GetCanvas(2,2);
  ACanvas := TCanvas.Create(el);
  ACanvas.MoveTo(0,0);
  ACanvas.LineTo(webstringgrid1.ColWidths[2]-1,webstringgrid1.RowHeights[2]-1);
  ACanvas.Free;
end;

Edit a cell with a custom edit control

This code snippet shows how to use any control as inplace editor for the grid. Implement grid.OnGetCellEditor and return geCustom as editor type and set the control to use as inplace editor via grid.EditControl: TControl.

Example:

procedure TForm1.WebStringGrid1GetCellEditor(Sender: TObject; ACol,
  ARow: Integer; var AEditor: TGridCellEditor);
begin
  if ACol = 2 then
  begin
    AEditor := geCustom;
    WebStringGrid1.EditControl := WebEditDropDownControl1;
  end;
end;
Use the events grid.OnGetEditControlValue / grid.OnSetEditControlValue to set the cell value to the custom inplace editor and vice versa.

procedure TForm1.OnGetEditControlValue(Sender: TObject; ACol, ARow: Longint;
  AControl: TControl; var Value: string);
begin
  Value := WebEditDropDownControl1.Text;
end;

procedure TForm1.OnSetEditControlValue(Sender: TObject; ACol, ARow: Longint;
  AControl: TControl; const Value: string);
begin
  WebEditDropDownControl1.Text := Value;
end;