TWebListControl
Description
Below is a list of the most important properties methods and events for TWebListControl
. TWebListControl
represents a HTML <UL>
list structure. The TWebListControl
is also especially designed to be able to use Bootstrap
CSS styles for effects like banding, hovering,… and much more. Find more information about Bootstrap list styles at:
https://getbootstrap.com/docs/4.0/components/list-group/
In this example, the ElementListClassName
was set to: "list-group” and the ItemClassName
was set to: “list-group-item d-flex justify-content-between align-items-center list-group-item-action”
 |
 |
Designtime |
Runtime |
Items are added to the list via the Items collection. The Item class is defined as:
Properties for TListItem
Property |
Description |
Active |
When true, the item is shown as active item in the list (when the CSS defines the Active style) |
AutoCollaps |
When true, the item click will collapse / uncollapse the sub items (when the CSS defines the Collapse style) |
Enabled |
When true, the item is enabled and can be clicked and will trigger the OnItemClick event |
ItemClassName |
Optionally sets the CSS classname for the item when styling via CSS is used |
Items |
Collection of sub items for an item. The sub items collection is exactly the same as the main items collection. Note that items in sub items can also have sub items etc.. |
Link |
Sets the optional URL for the item text when it needs to be clickable with an URL reference |
LinkClassName |
Optionally sets the CSS classname for the item link when styling via CSS is used |
Tag |
Integer tag property associated with the item |
Text |
Text of the item |
Methods for TListItem
Property |
Description |
Expand |
When the item has subitems, expands the subitems |
Collapse |
When the item has subitems, collapses the subitems |
IsCollapsed |
When true, the subitems of the item are in collapsed state |
RemoveFilter |
Removes any active filter and undoes filtering on the list |
SetFilter(Condition: string; CaseSensitive: Boolean = true) |
Applies the Condition as filter for the items in the list, effectively only showing the items in the list that match the filter. Optionally can make the filter case sensitive or not. Note that for the filter, wildcards such as ‘*’ and ‘%’ can be used |
Properties for TWebListControl
Property |
Description |
DefaultItemClassName |
Sets the CSS class that is automatically applied to an item ItemClassName when a new item is created. The DefaultItemClassName is only used upon creation of new TLinkItem instances |
DefaultItemLinkClassName |
Sets the CSS class that is automatically applied to an item LinkClassName when a new item is created. The DefaultLinkClassName is only used upon creation of new TLinkItem instances |
ElementClassName |
Optionally sets the CSS classname for the label when styling via CSS is used |
ElementID |
Optionally sets the HTML element ID for a HTML element in the form HTML file the label needs to be connected with. When connected, no new label is created but the Delphi class is connected with the existing HTML element in the form HTML file |
ElementListClassName |
Optionally sets the CSS classname for the list when styling via CSS is used |
Items |
Collection of TListItem instances and possibly sub items making up the list |
Style |
When Style is set, this presets the CSS DefaultItemClassName , DefaultItemLinkClassName , ElementListClassName to match popular Bootstrap list styles. Sets the style of the list to:
lsBreadCrumb : list of items makes up a breadcrumb
lsListGroup : vertical list of items
lsPagination : list makes up items of a paging control, like a control to select a page of rows to show in a grid
lsTabs : list makes up items of tab group |
Events for TWebListControl
Event |
Description |
OnGetItemChildren |
Event triggered when the list item is rendered allowing to insert child HTML elements in the list element |
OnGetItemClass |
Event triggered when the list item is rendered allowing to customize the CSS class of the list element |
OnItemClick |
Event triggered when a list item is clicked |
OnItemDblClick |
Event triggered when a list item is double-clicked |