ISelection.clear method

Article
01/26/2017

Clears the selection.

Syntax

iSelection.clear().done( /* Your success and error handlers */ );

Parameters

This method has no parameters.

Return value

Type: Promise**

A Promise that is fulfilled when the clear operation completes.

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

Share via