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:
Set or get the column width in the grid via
Set or get the row height in the grid via
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”> |
---|
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 geUR L: URL editor geEmail : Email editor geTel : Telephone editor geMask : masked edit control geCombo : combobox editor geMemo : memo editorgeNone : 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;