ListView.selectionMode property

  • Article

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

Syntax

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

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".

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

Examples

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

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

(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>
<html>
<head>
    <meta charset="utf-8" />
    <title>selectionExample</title>

    <!-- 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>
</head>
<body>
        <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="selectionExampleListView" data-win-control="WinJS.UI.ListView"
            data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'),
            tapBehavior: 'toggleSelect',
            layout : {type: WinJS.UI.GridLayout}}">
        </div>

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

(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) {
            lView.selection.selectAll();
        },

        clearSelection: function (eventInfo) {
            lView.selection.clear();
        },

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

})();

Requirements

Minimum WinJS version

WinJS 4.0

Namespace

WinJS.UI

See also

ListView

SelectionMode Enumeration

XAML ListView and GridView customizing interactivity sample (Windows)