selectionMode property
Collapse the table of content
Expand the table of content

ListView.selectionMode property

Applies to Windows and Windows Phone

Gets or sets a value that specifies how many ListView items can be selected.


    data-win-options="{ selectionMode : 'value'}" >

var selectionMode = listView.selectionMode;
listView.selectionMode = selectionMode;

Property value

Type: SelectionMode

One of the values defined by the SelectionMode enumeration. The default value is multi.

Do not set the TapBehavior property to "directSelect" when the SelectionMode is set to "none".

  • Applies to Windows Phone

Note  The SelectionMode value single is not supported for Windows Phone Store apps.


The following example sets the selection mode so that only a single item can be selected.

<div id="basicListView" 
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
    itemTemplate: mediumListIconTextTemplate, 
    selectionMode: 'single'}">

(For the complete code that creates the ListView in this example, see the Quickstart: Adding a ListView topic.)

The next example shows how to set the selectionMode of the ListView in JavaScript.

var myListView = document.getElementById("basicListView1").winControl;
myListView.selectionMode = WinJS.UI.SelectionMode.single;

This example demonstrates how to use the selection property to select all items in a ListView, clear the selection, and display the number of items selected.

<!DOCTYPE html>
    <meta charset="utf-8" />

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="selectionExample.css" rel="stylesheet" />
    <script src="selectionExample.js"></script>
    <script src="/js/data.js"></script>
        <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="selectionExampleListView" data-win-control="WinJS.UI.ListView"
            data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'),
            tapBehavior: 'toggleSelect',
            layout : {type: WinJS.UI.GridLayout}}">

        <button id="selectAllButton">Select all</button>
        <button id="clearSelection">Clear selection</button>
        <p>Items selected:</p>
        <p id="outputParagraph"></p>

(function () {
    "use strict";

    var lView;
    var outputParagraph;

    WinJS.UI.Pages.define("/pages/selection/selectionExample.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {

            lView = element.querySelector("#selectionExampleListView").winControl;
            outputParagraph = element.querySelector("#outputParagraph");
            lView.addEventListener("selectionchanged", this.selectionChanged); 

            element.querySelector("#selectAllButton").addEventListener("click", this.selectAllClicked);
            element.querySelector("#clearSelection").addEventListener("click", this.clearSelection);

        unload: function () {

        updateLayout: function (element, viewState, lastViewState) {

        selectAllClicked: function (eventInfo) {

        clearSelection: function (eventInfo) {

        selectionChanged: function (eventInfo) {
            outputParagraph.innerText = lView.selection.count(); 



Minimum WinJS version

WinJS 4.0



See also

SelectionMode Enumeration
XAML ListView and GridView customizing interactivity sample (Windows)



© 2017 Microsoft