ListView.currentItem property

Article
01/26/2017

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

Syntax

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

var currentItem = listView.currentItem;
listView.currentItem = currentItem;

Property value

Type: Object

An object that contains these properties:

index

Type: Number

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

key

Type: String

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

hasFocus

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.

showFocus

Type: Boolean

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

Remarks

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.

Examples

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" 
                 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},
            currentItem : {index: 2, hasFocus: true, showFocus: true}}"
        >
    </div>

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);

})();

Requirements

Minimum WinJS version	WinJS 3.0
Namespace	WinJS.UI

Partager via