ListView.itemDataSource property

Gets or sets the data source that provides the ListView with items.

Syntax

<div 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ itemDataSource : value}">
</div>

var itemDataSource = listView.itemDataSource;
listView.itemDataSource = itemDataSource;

Property value

Type: IListDataSource**

An IListDataSource that represents the data source from which the data-bound control retrieves its data. The default value is null.

Remarks

The Windows Library for JavaScript provides several types of IListDataSource objects:

• You can use a List to create an IListDataSource from an array of data.
• You can use a StorageDataSource to access info about files and directories.
• You can also create your own custom data source that connects to some other type of data provider, such as a web service or database. For instructions, see How to create a custom data source.

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

Examples

This example defines the data for the ListView in a separate JavaScript file. It creates a List ("itemList") from an array of data. Then it uses the WinJS.Namespace.define method to publicly expose the List as a part of the "DataExample" namespace.

For the ListView to access the data, add a reference to the JavaScript file to the HTML page that contains the ListView.

// data.js
(function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    var itemList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: itemList
        };
    WinJS.Namespace.define("DataExample", publicMembers);

})();

This example creates an item template and a ListView. Because itemList is a List and not an IListDataSource, it uses the itemList object's dataSource property to retrieve an IListDataSource version of the List.

<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    <div style="width: 282px; height: 70px; padding: 5px; overflow: hidden; display: -ms-grid;">

        <!-- Displays the "picture" field. -->
        <img data-win-bind="alt: title; src: picture"
            src="#"
            style="width: 60px; height: 60px; margin: 5px; -ms-grid-column: 1;" />
        <div style="margin: 5px; -ms-grid-column: 2">

            <!-- Displays the "title" field. -->
            <h4 data-win-bind="innerText: title"></h4>

            <!-- Displays the "text" field. -->
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<div id="basicListView" data-win-control="WinJS.UI.ListView"
    data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
    itemTemplate: select('#mediumListIconTextTemplate'),
    layout : {type: WinJS.UI.GridLayout}}">
</div>

For a full walkthrough of the code and more info about creating your first ListView, see Quickstart: Add a ListView.

Requirements

See also

ListView

Quickstart: Adding a ListView

HTML ListView essentials sample (Windows)

HTML ListView item templates sample (Windows)

How to create a custom data source