WinJS.UI.ISelection interface
.png)
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 |