# Foundset 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 foundset of records with custom rendering, drag & drop sorting, and HTML customization.

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 records into another FoundSet 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-foundsetlist.sortableOptions>](#sortableoptions)

***

### dropEnabled

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

***

### enabled

Flag indicating whether the list 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 in the list. Type: [Clientfunction](/reference/servoy-developer/component_and_service_property_types.md#clientfunction)

***

### entryStyleClassDataProvider

Data provider used to determine the CSS style class for each list entry. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)

***

### firstItemHtml

Optional HTML content to be displayed for the first item in the list. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)

***

### foundset

The foundset of records bound to this component. Type: [JSFoundset](/reference/servoycore/dev-api/database-manager/jsfoundset.md) Default Value: {"foundsetSelector":""}

***

### lastItemHtml

Optional HTML content to be displayed for the last item in the list. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)

***

### responsiveDynamicHeight

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

***

### responsiveHeight

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

***

### reverseOrder

When true, the list displays records in reverse order. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false

***

### selectionClass

CSS style class applied to a 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 records within the FoundSet 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)

***

### tooltipDataProvider

Data provider used to determine the tooltip content for each list entry. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)

***

### 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 list component is visible. Type: [Visible](/reference/servoy-developer/component_and_service_property_types.md#visible)

***

## Events

### onClick(record,foundSetIndex,dataTarget,event)

Called when the mouse is clicked on a list entry

**Parameters:**

> * {[JSRecord](/reference/servoycore/dev-api/database-manager/jsrecord.md)} record The record corresponding to the clicked entry.
> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} foundSetIndex The index of the clicked entry in the foundset.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} dataTarget The data target identifier set in the entry renderer.
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the click.

***

### onDoubleClickMethodID(record,foundSetIndex,dataTarget,event)

Called upon double click on a list entry

**Parameters:**

> * {[JSRecord](/reference/servoycore/dev-api/database-manager/jsrecord.md)} record The record corresponding to the double-clicked entry.
> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} foundSetIndex The index of the entry in the foundset.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} dataTarget The data target identifier 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,recordsMoved,recordsMovedTo)

Called when records dragged from another FoundSet List are dropped into this FoundSet list element. You are responsible to persist the changes for the affected records. Make sure to persist any change for the affected record and call loadRecords for the affected foundsets. If you don't the FoundSet List may go into an incosistent state.

**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 records
> * {[Array\<Number>](/reference/servoycore/dev-api/js-lib/number.md)} newIndicies The new indexes of records upon drop
> * {[Array\<JSRecord>](/reference/servoycore/dev-api/database-manager/jsrecord.md)} recordsMoved The records dragged and dropped
> * {[Array\<JSRecord>](/reference/servoycore/dev-api/database-manager/jsrecord.md)} recordsMovedTo The records whom have been shifted upon drop

***

### onFirstItemClick(event,dataTarget)

Called when the mouse is clicked on the optional firstItemHtml

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the click.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} dataTarget The data target identifier defined in the entry renderer.

***

### onLastItemClick(event,dataTarget)

Called when the mouse is clicked on the optional lastItemHtml

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the click.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} dataTarget The data target identifier.

***

### onRightClickMethodID(record,foundSetIndex,dataTarget,event)

Called upon right click on a list entry

**Parameters:**

> * {[JSRecord](/reference/servoycore/dev-api/database-manager/jsrecord.md)} record The record corresponding to the right-clicked entry.
> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} foundSetIndex The index of the entry in the foundset.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} dataTarget The data target identifier 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,recordsMoved,recordsMovedTo)

Called when FoundSet List records are reordered by drag\&drop. You are responsible to persist the changes for the affected records. Make sure to persist any change for the affected record and call loadRecords for the affected foundsets. If you don't the FoundSet List may get into an incosistent state

**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 records
> * {[Array\<Number>](/reference/servoycore/dev-api/js-lib/number.md)} newIndicies The new record indexes
> * {[Array\<JSRecord>](/reference/servoycore/dev-api/database-manager/jsrecord.md)} recordsMoved The records sorted
> * {[Array\<JSRecord>](/reference/servoycore/dev-api/database-manager/jsrecord.md)} recordsMovedTo The records 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.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} styleClass The style class to add to or remove from the matching items.

***

### 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.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} styleClass The style class to add to or remove from the matching items.

***

## Types

## sortableOptions

Configuration options for sortable behavior in the FoundSet List. scripting type: CustomType\<customrenderedcomponents-foundsetlist.sortableOptions>

* animation
  * Animation duration in milliseconds for drag transitions.
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* handle
  * CSS style class used to define the drag handle.
  * **Type**: [styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)
* multiDrag
  * When true, allows multiple records to 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/foundset-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.