Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

ListView.selectionMode property

Applies to Windows and Windows Phone

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

  • Applies to Windows Phone

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)

 

 

Show: