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:

Answer

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...
});
Answer

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"

Answer

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 :)

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.