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.

WinJS.UI.ISelection interface

Applies to Windows and Windows Phone

Represents a selection of ListView items.

Members

The ISelection interface has these types of members:

Methods

The ISelection interface has these methods.

MethodDescription
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 supported client

Windows 8 [Windows Store apps only]

Minimum supported server

Windows Server 2012 [Windows Store apps only]

Minimum supported phone

Windows Phone 8.1

Namespace

WinJS.UI

 

 

Show:
© 2014 Microsoft