TWebResponsiveGrid
Description
Below is a list of the most important properties methods and events for TWebResponsiveGrid.
TWebResponsiveGrid represents a HTML table structure with a responsive behavior of
configuration of columns and rows in relationship to the screen size the control is rendered on.
 |
 |
| Designtime |
Runtime |
The TWebResponsiveGrid renders items from its Items collection in columns and rows. The
number of columns and rows can dynamically adapt to the size of the screen on which the
control is rendered.
To add items to TWebResponsiveGrid, use the Items collection and set the HTML content for
each item via WebResponsiveGrid.Items[index].HTML: string;
For each item, there is also a Tag: integer property and ItemObject: TObject property for setting
information associated with the item.
The HTML element in the grid via which the item is rendered is also accessible via public
property WebResponsiveGrid.Items[index].ElementHandle: TJSHTMLElement.
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 |
<DIV ID=”UniqueID”></DIV> |
| ElementID |
UniqueID |
Options properties for TWebResponsiveGrid
| Property |
Description |
| ItemBorderColor |
Sets the border color of an item in normal state |
| ItemClassName |
Sets the CSS class name for an item |
| ItemColor |
Sets the background color of an item in normal state |
| ItemGap |
Sets the gap (horizontally and vertically) in pixels between items in the grid |
| ItemHeight |
Sets the height of an item in pixels |
| ItemHoverBorderColor |
Sets the border color of an item in hovered state |
| ItemHoverColor |
Sets the background color of an item in hovered state |
| ItemPadding |
Sets the padding internally in an item in pixels |
| ItemSelectedBorderColor |
Sets the border color of an item in selected state |
| ItemSelectedColor |
Sets the background color of an item in selected state |
| ItemSelectedTextColor |
Sets the text color of an item in selected state |
| ItemTemplate |
Sets an optional HTML template to be usedwhen data for the responsive grid is dynamically loaded from CSV or JSON. Use (%FIELDNAME%) place-holders in the HTML template to define which data should be used in what parts of the HTML for the item. |
| ItemMinWidth |
Sets the minimum width of an item in pixels. This will determine the number of columns that can be rendered in the grid. |
| MultiSelect: boolean |
When true, multiple grid items can be set in selected state by clicking. Otherwise, one item can be selected and is reflected in the ItemIndex property |
| Order |
Sets the flow order of items in the grid, either toColumn for a by-column order or toRow for a by-row order |
| ScrollVertical |
When true, a vertical scrollbar will be used when the number of items exceeds the height of the control. Otherwise, the height will automatically increase to enable to display of all items in the list. |
Methods for TWebResponsiveGrid
| Method |
Description |
| 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. |
| LoadFromCSV(const AURL: string;Delimiter: char = ‘;'; LoadFixed: Boolean = false) |
Load CSV formatted data found a AURL via a HTTP GET in the table contro. 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 table control. |
| ItemByTag(ATag: integer): TResponsiveGridItem |
Returns the item with the specified tag value when it exists or nil when not |
| ListElementHandle: TJSElement |
Returns the DIV HTML element that is the container element of the responsive grid HTML elements |
Events for TWebResponsiveGrid
| Event |
Description |
| OnClick |
Event triggered when the grid is clicked |
| OnDblClick |
Event triggered when the grid is double-clicked |
| OnHttpRequestError |
Event triggered when there is a HTTP errorrelated to loading data from CSV or JSON. |
| OnHttpRequestSuccess |
Event triggered when the HTTP get request to get data from CSV or JSON was successful. |
| 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) |
| OnHttpRequestError |
Event triggered when an error occurred with the 109 HTTP GET request used to get data via methods LoadFromJSON()/LoadFromCSV() |
| OnHttpRequestSuccess |
Event triggered when the HTTP GET request used to get data via methodsLoadFromJSON()/LoadFromCSV() successfully returned |
| OnItemClick |
Event triggered when an item in the grid is clicked |
| OnItemCreated |
Event triggered when an item in the grid is created as a result of loading data from a CSV file or JSON file. The Item can be accessed via WebResponsiveGrid.Items[index] and the HTML element in which the item is rendered via WebResponsiveGrid.Items[index].ElementHandle: TJSHTMLElement |
| OnItemDblClick |
Event triggered when an item in the grid is double-clicked |
| OnItemGetFieldValue |
Event triggered when a value from a CSV column or JSON field is going to be replaced in the HTML template and via this event, the data can be dynamically customized. |
| OnItemGetTemplate |
Event triggered for each JSON object or row in CSV file added allow customization of the item template per item in the grid |
Properties for TWebResponsiveGridItem
Public properties
| Property |
Description |
| ElementHandle: TJSHTMLElement |
Access to the HTML DIV container element of the item |
| JSONElement: JSValue |
JSON object associated with the item in case items were loaded from a JSON array |
| JSONElementValue[‘name’]: string |
Gets the JSON object ‘name’ attribute value as string |
| Selected: boolean |
When Options.MultiSelect is set to true, this holds the selection state of a single item |
Published properties
| Property |
Description |
| HTML |
HTML content of the item |
| Tag |
Integer property |
| Visible |
Sets whether the item is visible or not in the responsive grid |