Share via

WinJS.UI.IListDataSource interface

Provides access to a data source and enables you to bind, change, add, remove, and move items in that data source.

IListDataSource is an interface. To create an IListDataSource, you create an object that implements this interface. For more info, see the Remarks section.


The IListDataSource interface has these types of members:

  • Events
  • Methods


The IListDataSource interface has these events.

Event Description

Occurs when the status of the IListDataSource changes.



The IListDataSource interface has these methods.

Method Description

Notifies the IListDataSource that a sequence of edits is about to begin. The IListDataSource will defer notifications until endEdits is called.


Overwrites the data of the specified item.


Creates an IListBinding that can retrieve items from the IListDataSource, enumerate the contents of the IListDataSource object's data, and optionally register for change notifications.


Notifies the IListDataSource that the batch of edits that began with the last beginEdits call has completed. The IListDataSource will submit notifications for any changes that occurred between the beginEdits and endEdits calls as a batch and resume normal change notifications.


Retrieves the number of items in the data source.


Inserts a new item after another item.


Adds an item to the end of the data source.


Adds an item to the beginning of the data source.


Inserts an item before another item.


Indicates that all previous data obtained from the IListDataAdapter is invalid and should be refreshed.


Retrieves the item that has the specified description.


Retrieves the item at the specified index.


Retrieves the item with the specified key.


Moves an item to just after another item.


Moves an item before another item.


Moves an item to the end of the data source.


Moves the specified item to the beginning of the data source.


Removes the specified item from the data source.



A IListDataSource connects a control (such as a ListView) to an IListDataAdapter. The IListDataSource manipulates the IListDataAdapter, which does the work of actually manipulating and retrieving data.

The Windows Library for JavaScript provides several types of IListDataSource objects that you can use:

  • You can use a List to create an IListDataSource from an array of data by calling the List object's dataSource property.
  • You can use a StorageDataSource to access information 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.


This example creates a List ("itemList") from an array of items. 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);


The next 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:

itemDataSource : DataExample.itemList.dataSource

Here's the full code:

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

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


Minimum WinJS version

WinJS 3.0



See also




How to create a custom data source

Quickstart: Add a ListView

HTML ListView item templates sample

HTML ListView working with data sources sample