Raised when the ListView is a drop target and the onitemdragenter has been disabled. This is raised every time the cursor is moved between a new pair of items. If you call preventDefault on this event, then the ListView doesn't move the items slightly above/below the cursor to provide visual feedback for a drop.

Gets or sets the Template or function that creates the DOM elements for each group header in the groupDataSource. Each group header can contain multiple elements, but it must have a single root element.

Gets or sets the WinJS.Binding.Template or templating function that creates the DOM elements for each item in the itemDataSource. Each item can contain multiple elements, but it must have a single root element.

Gets or sets the threshold (in pages) for initiating an incremental load. When the last visible item is within the specified number of pages from the end of the loaded portion of the list, and if automaticallyLoadPages is true and loadingBehavior is set to "incremental", the ListView initiates an incremental load.

Gets a ZoomableView that supports semantic zoom functionality. This API supports the semantic zoom infrastructure and is not intended to be used directly from your code.

Remarks

The ListView can accept data from several different types of sources, such as Really Simple Syndication (RSS) feeds or lists of images. To learn how to create your first ListView, see the Add a ListView Quickstart.

Items in a ListView control can contain other controls, but they can't contain a FlipView or another ListView.

Asynchronous function issue

ListView can be used in an asynchronous environment except when using embedded components that only support synchronous functionality (such as Repeater).

Styling the ListView

CSS classes

To customize the ListView, you can define your own styles for these Cascading Style Sheets (CSS) classes (defined by the Windows Library for JavaScript style sheets):

Note

Windows 8.1 In previous versions of Windows, ListView items can be styled using the CSS selector .win-container .win-item. Starting with Windows 8.1, another element contains items within the ListView, and so CSS selectors to style items need to be written as .win-container .win-itembox .win-item.

Styles the group headers of a ListView that contains group information.

win-item

Styles items in the ListView.

win-listview

Styles the entire ListView.

win-progress

Styles the progress indicator of the ListView.

win-selectionbackground

Styles the background of an item's selection checkmark.

win-selectioncheckmark

Styles an item's selection checkmark.

win-surface

Styles the scrollable region of the ListView.

win-viewport

Styles the viewport of the ListView.

Note Some of these classes (such as win-item) are used by multiple WinJS controls. To apply a style to just the ListView, add .win-listview to the style selector. For more info, see Styling the ListView and its items.

Setting the ListView control's height

The ListView does not dynamically adjust its height to fit your content. For a ListView to render, you must specify an absolute value for its height. The WinJS style sheets set the ListView control's height to 400 pixels.

This example overrides the default style for ListView controls and sets their height to 500 pixels.

.win-listview
{
height: 500px;
}

The win-listview class is a class defined by the WinJS that you can use to style the ListView. The example you just saw changes the height of every ListView to 500 pixels. To change just one ListView, add the ID of the ListView control's hosting div element to the selector. This example changes the height of the ListView with the ID "basicListView".

#basicListView.win-listview
{
height: 500px;
}

Maximum number of items

The ListView doesn't support more than 1.5 million pixels worth of items.

Detaching the ListView from the DOM

Don't use a ListView control after you've detached it from the DOM. When you detach a ListView from the DOM, it starts releasing resources to free up memory and won't work properly anymore.

Using a ListView in a PageControl

When you use a ListView inside a PageControl, add this code to your PageControl object's ready method to ensure that the ListView gets the correct reading order:

The next example defines the data for the ListView in a separate JavaScript file. For the ListView to access the data, add a reference to the JavaScript file to the HTML page that contains the ListView.