Custom List
Last updated
Was this helpful?
Last updated
Was this helpful?
(part of package '') Extends designtime/SolutionModel: Extends runtime:
A Custom List Component that displays a list of entries with custom rendering, drag & drop sorting, and dynamic styling.
This is a reference page; many components have detailed usage guides .
When set to true, allows to drag entries into another Custom List element Type: Default Value: false
Customize options for the drag n'drop and sortable Type:
When set to true, allows to drop entries from another Custom List element Type: Default Value: false
Flag indicating whether the Custom List component is enabled for user interaction. Type: Default Value: true
Called when the mouse is clicked on a list entry
Parameters:
Called upon double click on a list entry
Parameters:
Called when entries dragged from another Custom List are dropped into this Custom list element.
Parameters:
Called upon right click on a list entry
Parameters:
Called when Custom List entries are reordered by drag&drop.
Parameters:
Adds the given style class to all items in the list's children that match the selector. Note that tag selectors are not supported.
Parameters:
Clears all entries from the Custom List by setting the `data` model to an empty array. This effectively removes all items in the list.
Retrieves the total number of entries in the Custom List.
Retrieves a specific entry from the Custom List based on the given index.
Parameters:
Creates a new entry in the Custom List and adds it to the `data` model. If the `data` model is uninitialized, it initializes it as an empty array before adding the entry.
Removes a specific entry from the Custom List based on the given index.
Parameters:
Removes the given style class from all items in the list's children that match the selector. Note that tag selectors are not supported.
Parameters:
Replaces the existing entries in the Custom List with the specified array of entries.
Parameters:
Configuration options for sortable behavior in the Custom List. scripting type: CustomType<customrenderedcomponents-customlist.sortableOptions>
animation
Animation duration (in milliseconds) for drag transitions.
handle
A CSS style class used to define the drag handle.
multiDrag
When true, multiple entries can be dragged simultaneously.
Default Value: false
multiDragKey
The key used to enable multiple selection during drag (e.g., CTRL).
Default Value: "CTRL"
A client-side function used to render each entry. It should return HTML for the entry. Type:
A client-side function that returns a CSS style class for a list entry based on its data. Type:
Flag indicating whether the list component should adjust its height dynamically based on its content. Type: Default Value: false
The responsive height for the list component, specified in pixels. Type: Default Value: 500
CSS style classes applied to the selected list entry. Type:
Option whether text is shown as sanitized html or trusted html (as is). Type: Default Value: "html"
When set to true, allows to reorder entries within the Custom List element using drag & drop Type: Default Value: false
CSS style classes applied to the list component. Type:
This is a client side function that gets 2 arguments: first is the data-target (this should be set in the entry renderer) and second is the entry of the data Type:
Flag indicating whether the Custom List component is visible. Type:
{} entry The entry object that was clicked.
{} index The 0-based index of the clicked entry.
{} dataTarget The identifier for the data target set in the entry renderer.
{} event The event object associated with the click.
{} entry The entry object that was double-clicked.
{} index The 0-based index of the double-clicked entry.
{} dataTarget The identifier for the data target set in the entry renderer.
{} event The event object associated with the double-click.
{} event The JSEvent for this element
{} oldIndicies The original indexes, when drag started, of the dropped entries
{} newIndicies The new indexes of entries upon drop
{} entriesMoved The entries dragged and dropped
{} entriesMovedTo The entries whom have been shifted upon drop
{} entry The entry object that was right-clicked.
{} index The 0-based index of the right-clicked entry.
{} dataTarget The identifier for the data target set in the entry renderer.
{} event The event object associated with the right-click.
{} event The JSEvent for this element
{} oldIndicies The original indexes of the moved entries
{} newIndicies The new entries indexes
{} entriesMoved The entries sorted
{} entriesMovedTo The entries whom have been shifted upon sort end
{} selector The CSS selector used to identify items in the list's children. Note: tag selectors are not supported.
{} styleClass The style class to add to the matching items.
Returns: The number of entries in the `data` model. Returns 0 if the `data` model is not initialized.
{} index The 0-based index of the entry to retrieve.
Returns: The entry at the specified index, or null if the index is out of range or the `data` model is not initialized.
Returns: The newly created entry added to the `data` model.
{} index The 0-based index of the entry to remove.
Returns: Returns true if the entry was successfully removed, or false if the index is out of range or the `data` model is not initialized.
{} selector The CSS selector used to identify items in the list's children. Note: tag selectors are not supported.
{} styleClass The style class to remove from the matching items.
{} entries An array of objects representing the new set of entries for the `data` model.
Type:
Type:
Type:
Type: