How to fetch selected item of ListView in HTML based Windows 8 Metro Application

I had tough time get the value of selected item of a ListView. So in this post I am sharing the code snippet required to fetch selected item from the ListView.

Read this article for ListView Binding with Grouping and Semantic Zoom in Windows 8 JavaScript Metro Application

I strongly suggest you to read the above article for more detail on ListView. If you continue with above article and want to get the value of selected item you can do that as below,

lstMovies = document.getElementById("movieListView").winControl;  
lstMovies.addEventListener("iteminvoked", function (e) {
                e.detail.itemPromise.then(function (invokedItem) {


                    var titleOfData = invokedItem.data.title;
                    var selecteplayerImg = invokedItem.data.picture;
                });
            }, false);

In above code snippet

• lstMovies is name of the ListView.
• Iteminvoked is name of the event. This event gets fire when an item in the ListView is being selected.
• There are two data bind to the List View item. They are Title and Picture. Any data can be fetched as following snippet. invokedItem is parameter of itemPromise.

Title and Picture are properties of the datasource bind to the ListView.

In this way you can fetch selected item from ListView in HTML based Windows 8 Metro Application. I hope this post is useful. Thanks for reading!