Skip to content

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