ServoyCloudSupportSamplesOpen SourceCommunity

Custom List

(part of package 'Advanced Renderers') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

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 here.

Properties

dragEnabled

When set to true, allows to drag entries into another Custom List element Type: Boolean Default Value: false

dragSortableOptions

Customize options for the drag n'drop and sortable Type: CustomType<customrenderedcomponents-customlist.sortableOptions>

dropEnabled

When set to true, allows to drop entries from another Custom List element Type: Boolean Default Value: false

enabled

Flag indicating whether the Custom List component is enabled for user interaction. Type: Enabled Default Value: true

entryRendererFunction

A client-side function used to render each entry. It should return HTML for the entry. Type: Clientfunction

entryStyleClassFunction

A client-side function that returns a CSS style class for a list entry based on its data. Type: Clientfunction

responsiveDynamicHeight

Flag indicating whether the list component should adjust its height dynamically based on its content. Type: Boolean Default Value: false

responsiveHeight

The responsive height for the list component, specified in pixels. Type: Number Default Value: 500

selectionClass

CSS style classes applied to the selected list entry. Type: Styleclass

showAs

Option whether text is shown as sanitized html or trusted html (as is). Type: String Default Value: "html"

sortableEnabled

When set to true, allows to reorder entries within the Custom List element using drag & drop Type: Boolean Default Value: false

styleClass

CSS style classes applied to the list component. Type: Styleclass

tooltipFunction

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: Clientfunction

visible

Flag indicating whether the Custom List component is visible. Type: Visible

Events

onClick(entry,index,dataTarget,event)

Called when the mouse is clicked on a list entry

Parameters:

  • {Object} entry The entry object that was clicked.

  • {Number} index The 0-based index of the clicked entry.

  • {String} dataTarget The identifier for the data target set in the entry renderer.

  • {JSEvent} event The event object associated with the click.

onDoubleClickMethodID(entry,index,dataTarget,event)

Called upon double click on a list entry

Parameters:

  • {Object} entry The entry object that was double-clicked.

  • {Number} index The 0-based index of the double-clicked entry.

  • {String} dataTarget The identifier for the data target set in the entry renderer.

  • {JSEvent} event The event object associated with the double-click.

onDrop(event,oldIndicies,newIndicies,entriesMoved,entriesMovedTo)

Called when entries dragged from another Custom List are dropped into this Custom list element.

Parameters:

  • {JSEvent} event The JSEvent for this element

  • {Array<Number>} oldIndicies The original indexes, when drag started, of the dropped entries

  • {Array<Number>} newIndicies The new indexes of entries upon drop

  • {Array<Object>} entriesMoved The entries dragged and dropped

  • {Array<Object>} entriesMovedTo The entries whom have been shifted upon drop

onRightClickMethodID(entry,index,dataTarget,event)

Called upon right click on a list entry

Parameters:

  • {Object} entry The entry object that was right-clicked.

  • {Number} index The 0-based index of the right-clicked entry.

  • {String} dataTarget The identifier for the data target set in the entry renderer.

  • {JSEvent} event The event object associated with the right-click.

onSortEnd(event,oldIndicies,newIndicies,entriesMoved,entriesMovedTo)

Called when Custom List entries are reordered by drag&drop.

Parameters:

API

addStyleClassForSelector(selector,styleClass)

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:

  • {String} selector The CSS selector used to identify items in the list's children. Note: tag selectors are not supported.

  • {String} styleClass The style class to add to the matching items.

clear()

Clears all entries from the Custom List by setting the `data` model to an empty array. This effectively removes all items in the list.

getEntriesCount()

Retrieves the total number of entries in the Custom List.

Returns: Number The number of entries in the `data` model. Returns 0 if the `data` model is not initialized.

getEntry(index)

Retrieves a specific entry from the Custom List based on the given index.

Parameters:

  • {Number} index The 0-based index of the entry to retrieve.

Returns: Object The entry at the specified index, or null if the index is out of range or the `data` model is not initialized.

newEntry()

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.

Returns: Object The newly created entry added to the `data` model.

removeEntry(index)

Removes a specific entry from the Custom List based on the given index.

Parameters:

  • {Number} index The 0-based index of the entry to remove.

Returns: Boolean Returns true if the entry was successfully removed, or false if the index is out of range or the `data` model is not initialized.

removeStyleClassForSelector(selector,styleClass)

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:

  • {String} selector The CSS selector used to identify items in the list's children. Note: tag selectors are not supported.

  • {String} styleClass The style class to remove from the matching items.

setEntries(entries)

Replaces the existing entries in the Custom List with the specified array of entries.

Parameters:

  • {Array<Object>} entries An array of objects representing the new set of entries for the `data` model.

Types

sortableOptions

Configuration options for sortable behavior in the Custom List. scripting type: CustomType<customrenderedcomponents-customlist.sortableOptions>

  • animation

    • Animation duration (in milliseconds) for drag transitions.

    • Type: int

  • handle

    • A CSS style class used to define the drag handle.

    • Type: styleclass

  • multiDrag

    • When true, multiple entries can be dragged simultaneously.

    • Type: boolean

    • Default Value: false

  • multiDragKey

    • The key used to enable multiple selection during drag (e.g., CTRL).

    • Type: string

    • Default Value: "CTRL"

PreviousChartNextDBTreeview

Last updated

Was this helpful?