ListView.currentItem property

Gets or sets an object that indicates which item should have keyboard focus and the focus state of that item.


    data-win-options="{ currentItem : value}">
var currentItem = listView.currentItem;
listView.currentItem = currentItem;

Property value

Type: Object

An object that contains these properties:


Type: Number

The index of the current item in the itemDataSource , or -1 if there is no currently focused item.


Type: String

The IItem.key that identifies the item in the itemDataSource, or null if there is no currently focused item.


Type: Boolean

When getting this property, this value is true if the item already has focus; otherwise, it's false. When setting this property, set this value to true if the item should get focus immediately; otherwise, set it to false and the item will get focus eventually.


Type: Boolean

true if the item displays the focus rectangle; otherwise, false.


To obtain the items that are currently selected, use the selection property.

Note  When migrating an app from Windows Library for JavaScript 1.0 to Windows Library for JavaScript 2.0, keep in mind that the currentItem property returns some data about the group header as well in Windows Library for JavaScript 2.0.



This example sets the currentItem to the third item in 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" 
                 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},
            currentItem : {index: 2, hasFocus: true, showFocus: true}}"

This 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.)

// 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 dataList = new WinJS.Binding.List(dataArray);

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



Minimum WinJS version

WinJS 3.0



See also