# Custom List

(part of package '[Advanced Renderers](/reference/servoyextensions/packages/ui-component-packages/advanced-renderers.md)')\
Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\
Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md)

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](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### dragEnabled

When set to true, allows to drag entries into another Custom List element Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false

***

### dragSortableOptions

Customize options for the drag n'drop and sortable Type: [CustomType\<customrenderedcomponents-customlist.sortableOptions>](#sortableoptions)

***

### dropEnabled

When set to true, allows to drop entries from another Custom List element Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false

***

### enabled

Flag indicating whether the Custom List component is enabled for user interaction. Type: [Enabled](/reference/servoy-developer/component_and_service_property_types.md#protected) Default Value: true

***

### entryRendererFunction

A client-side function used to render each entry. It should return HTML for the entry. Type: [Clientfunction](/reference/servoy-developer/component_and_service_property_types.md#clientfunction)

***

### entryStyleClassFunction

A client-side function that returns a CSS style class for a list entry based on its data. Type: [Clientfunction](/reference/servoy-developer/component_and_service_property_types.md#clientfunction)

***

### responsiveDynamicHeight

Flag indicating whether the list component should adjust its height dynamically based on its content. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false

***

### responsiveHeight

The responsive height for the list component, specified in pixels. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 500

***

### selectionClass

CSS style classes applied to the selected list entry. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)

***

### showAs

Option whether text is shown as sanitized html or trusted html (as is). Type: [String](/reference/servoycore/dev-api/js-lib/string.md) Default Value: "html"

***

### sortableEnabled

When set to true, allows to reorder entries within the Custom List element using drag & drop Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false

***

### styleClass

CSS style classes applied to the list component. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#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](/reference/servoy-developer/component_and_service_property_types.md#clientfunction)

***

### visible

Flag indicating whether the Custom List component is visible. Type: [Visible](/reference/servoy-developer/component_and_service_property_types.md#visible)

***

## Events

### onClick(entry,index,dataTarget,event)

Called when the mouse is clicked on a list entry

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} entry The entry object that was clicked.
> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} index The 0-based index of the clicked entry.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} dataTarget The identifier for the data target set in the entry renderer.
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the click.

***

### onDoubleClickMethodID(entry,index,dataTarget,event)

Called upon double click on a list entry

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} entry The entry object that was double-clicked.
> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} index The 0-based index of the double-clicked entry.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} dataTarget The identifier for the data target set in the entry renderer.
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} 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](/reference/servoycore/dev-api/application/jsevent.md)} event The JSEvent for this element
> * {[Array\<Number>](/reference/servoycore/dev-api/js-lib/number.md)} oldIndicies The original indexes, when drag started, of the dropped entries
> * {[Array\<Number>](/reference/servoycore/dev-api/js-lib/number.md)} newIndicies The new indexes of entries upon drop
> * {[Array\<Object>](/reference/servoycore/dev-api/js-lib/object.md)} entriesMoved The entries dragged and dropped
> * {[Array\<Object>](/reference/servoycore/dev-api/js-lib/object.md)} entriesMovedTo The entries whom have been shifted upon drop

***

### onRightClickMethodID(entry,index,dataTarget,event)

Called upon right click on a list entry

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} entry The entry object that was right-clicked.
> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} index The 0-based index of the right-clicked entry.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} dataTarget The identifier for the data target set in the entry renderer.
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} 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:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The JSEvent for this element
> * {[Array\<Number>](/reference/servoycore/dev-api/js-lib/number.md)} oldIndicies The original indexes of the moved entries
> * {[Array\<Number>](/reference/servoycore/dev-api/js-lib/number.md)} newIndicies The new entries indexes
> * {[Array\<Object>](/reference/servoycore/dev-api/js-lib/object.md)} entriesMoved The entries sorted
> * {[Array\<Object>](/reference/servoycore/dev-api/js-lib/object.md)} entriesMovedTo The entries whom have been shifted upon sort end

***

## 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](/reference/servoycore/dev-api/js-lib/string.md)} selector The CSS selector used to identify items in the list's children. Note: tag selectors are not supported.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} 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](/reference/servoycore/dev-api/js-lib/number.md) 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](/reference/servoycore/dev-api/js-lib/number.md)} index The 0-based index of the entry to retrieve.

**Returns:** [Object](/reference/servoycore/dev-api/js-lib/object.md) 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](/reference/servoycore/dev-api/js-lib/object.md) 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](/reference/servoycore/dev-api/js-lib/number.md)} index The 0-based index of the entry to remove.

**Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) 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](/reference/servoycore/dev-api/js-lib/string.md)} selector The CSS selector used to identify items in the list's children. Note: tag selectors are not supported.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} 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>](/reference/servoycore/dev-api/js-lib/object.md)} 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](/reference/servoycore/dev-api/js-lib/number.md)
* handle
  * A CSS style class used to define the drag handle.
  * **Type**: [styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)
* multiDrag
  * When true, multiple entries can be dragged simultaneously.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: false
* multiDragKey
  * The key used to enable multiple selection during drag (e.g., CTRL).
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: "CTRL"

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/ui-components/visualization/custom-list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.