Share via


WinJS.UI.ISelection interface

Represents a selection of ListView items.

Members

The ISelection interface has these types of members:

  • Methods

Methods

The ISelection interface has these methods.

Method Description
add

Adds one or more items to the selection.

clear

Clears the selection.

count

Returns the number of items in the selection.

getIndices

Returns a list of the indexes for the items in the selection.

getItems

Returns an array that contains the items in the selection.

getRanges

Gets an array of the index ranges for the selected items.

isEverything

Returns a value that indicates whether the selection contains every item in the data source.

remove

Removes the specified items from the selection.

selectAll

Adds all the items in the ListView to the selection.

set

Clears the current selection and replaces it with the specified items.

 

Remarks

To obtain an ISelection object, call the ListView.selection property.

Examples

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 3.0

Namespace

WinJS.UI