# ListView

The **Wisej.Web.ListView** is a control used to display a list of items through one of four predefined views.

![](/files/lijVR1ldBl7cVmf8iXS1)

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation](https://docs.wisej.com/api/wisej.web/lists-and-grids/listview).
{% endhint %}

## Features

### Data Binding

Data binding is fully supported, including formatting and conversion of the value, through the default [data binding](/docs/controls/general/data-binding.md) infrastructure.

### Virtual Mode

Setting the **VirtualMode** property to `true` puts the ListView into virtual mode. In Virtual mode, the normal Items collection is unused. Instead, items are created dynamically as the ListView requires them.

Virtual mode can be useful under many circumstances. If a ListView object must be populated from a very large collection already in memory, creating a ListViewItem object for each entry can be wasteful. In virtual mode, only the items required are created. In other cases, the values of the ListViewItem objects may need to be recalculated frequently, and doing this for the whole collection would produce unacceptable performance. In virtual mode, only the required items are calculated.

In order to use virtual mode, you must handle the RetrieveVirtualItem event, which is raised every time the ListView requires an item. This event handler should create the ListViewItem object that belongs at the specified index. In addition, the VirtualListSize property must be set to the size of the virtual list.

### Views

The ListView control contains four main views for displaying list items: `LargeIcon`, `SmallIcon`, `Details`, and `Tile`.

**LargeIcon**

* Each item appears as a fully-sized icon with a label below it.

<div align="left"><img src="/files/-MdYtBJgVGWhO3Ctj6N5" alt="Icons from icons8.com."></div>

**SmallIcon**

* Each item appears as a small icon with a label to its right.

<div align="left"><img src="/files/-Mdbs3A9JrlqLoKJd33e" alt="Icons from icons8.com"></div>

**Details**

* Each item appears on a separate line with further information about each item arranged in columns.

<div align="left"><img src="/files/-MdcbRlcoBaMfTc-IqOH" alt="Icons from icons8.com"></div>

**Tile**

* Each item appears as a full-sized icon with the item label and sub item information below the label.

<div align="left"><img src="/files/-Mdccj8b72C_kTZ1Zv_X" alt="Icons from icons8.com"></div>

## Advanced

### JavaScript Widget

| Item                | Description                                                                                                                                                                                                                                                                                                                                                                                                          |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Class name          | wisej.web.ListView                                                                                                                                                                                                                                                                                                                                                                                                   |
| Theme appearance    | "listview" is the entire widget, "item-view" is the container for the items, "grid-view" is the container for the items when the view is "Details", "grid-row" is the item when the view is "Details", "grid-cell" is one cell in the grid when view is "Details", "item" is the list item, "tools" is the container for the tool icons. See [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements). |
| Child components    | See [JavaScript](/docs/concepts/javascript-object-model.md).                                                                                                                                                                                                                                                                                                                                                         |
| ToolContainer state | "listview", see [Embedded Tools](/docs/controls/general/embedded-tools.md).                                                                                                                                                                                                                                                                                                                                          |
| Source code         | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                                                                                                                                                                                                                                                                                  |


---

# 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.wisej.com/docs/controls/lists/listview.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.
