ListView doesn't fire selectionchanged
My HTML:
<div id="listViewBoxOffice"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemTemplate: select('#movieThumbnailTpl'), selectionMode: 'single' }">
</div>
My javascript:
WinJS.UI.Pages.define("/pages/home/home.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) {
api.getBoxOffice().done(this.boxOffice, this.errBoxOffice);
listViewBoxOffice.winControl.addEventListener('selectionchanging', this.selectionchanging);
listViewBoxOffice.winControl.addEventListener('selectionchanged', this.selectionchanged);
},
boxOffice: function (movies) {
var list = new WinJS.Binding.List(movies);
listViewBoxOffice.winControl.itemDataSource = list.dataSource;
},
errBoxOffice: function (err) {
debugger;
},
selectionchanged: function (evt) {
console.log('changed');
},
selectionchanging: function (evt) {
console.log('changing');
}
});
My problem:
the event selectionchanged is never fired. The event selectionchanging is fired but with bad value in newSelection
Answers:
While the documentation isn't as clear about this as I think it should be, you'll need to set the tapBehavior property to "toggleSelect" so that an item is fully selected. By default, the behavior is invokeOnly and with that it doesn't fully select the item. It clicks, but isn't selected.
There's a decent example located in the MSDN documentation.
If you store off a copy of the listViewBoxOffice instance, then from the events, you can get the current list via a promise:
listViewBoxOffice.selection.getItems().done(function(items) {
// do something with the items...
});
To check wheather the selectionchanged event is working or not Right click on the listview item.I think when we just only click on the listview item it needs iteminvoke event and for selection we need to right click on the item. Following is the code snipet which is firing the selectionchanged event
<div id="UserListView" data-win-control="WinJS.UI.ListView" style="border-top: 5px solid #000; min-width:500px;"
data-win-options="{
selectionMode:'multi',
itemTemplate:select('#itemsList'),
layout:{
type:WinJS.UI.GridLayout}}"
>
</div>
and in the js
UserListView.addEventListener("selectionchanged", selection);
function selection(evt) {
var test = "testing";
}
set the breakpoint and you can check in the evt the type="selectionchanged"
please try using Item invoked. Here's the Msdn link Item invoked Winjs Listview
And try changing the selection accordingly. Also if this does not work or you want selection changed only then Please post in the Template that you have designed. Will need to go through the entire code :)