In this article we will learn about how to get the selected items from a ListView control
Introduction
This is the sixth day of the learning series where we will learn about how to get the selected items from a ListView control.Earlier in one of the previous tutorials, we have already explored about the List View Tutorials
Straight to experiment
Let us first create a "DataSource.js" file where we will define our data-source as under
(function () {
"use strict";
var sourceData = [
{ Name: 'Joshep Joes', Age: "30", Salary: 9000, pic: "images/1.png" },
{ Name: 'Manik Dey', Age: "20", Salary: 6000, pic: "images/2.png" },
{ Name: 'Kiran Reddy', Age: "24", Salary: 19000, pic: "images/3.png" },
{ Name: 'Bhaskar Dey', Age: "40", Salary: 50000, pic: "images/4.png" }
];
var datalist = new WinJS.Binding.List(sourceData);
var dataMembers = { itemList: datalist };
WinJS.Namespace.define("SourceData", dataMembers);
})();
Next visit the "default.html" page and write the below code inside the "body" tag
<body>
<div id="divDisplayItems" data-win-control="WinJS.Binding.Template">
<div>
<table border="1">
<tr>
<td><b>Name</b></td>
<td><b>Age</b></td>
<td><b>Salary</b></td>
<td><b>Image</b></td>
</tr>
<tr>
<td><h4 data-win-bind="innerText: Name"></h4></td> <!-- Displays the "Name" field. -->
<td><h4 data-win-bind="innerText: Age"></h4></td> <!-- Displays the "Age" field. -->
<td><h4 data-win-bind="innerText: Salary"></h4></td> <!-- Displays the "Salary" field. -->
<td><img src="#" style="width: 60px; height: 60px;" data-win-bind="alt: Name; src: pic" /></td> <!-- Displays the "Image" field. -->
</tr>
</table>
</div>
</div>
<div
id="basicListView"
style="width:250px;height:500px"
data-win-control="WinJS.UI.ListView" />
</body>
Till this much we have the same kind of code that we saw in the earlier tutorial with only one exception i.e. we are not setting the "ItemDataSource" at this point of time.
Now let us go to the "default.js" file and write the below piece of code
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();
var itemClick = function (event)
{
var item = SourceData.itemList.getAt(event.detail.itemIndex);
var msg = new Windows.UI.Popups.MessageDialog("Name: " + item.Name + " | Age: " + item.Age + " | Salary: " + item.Salary);
msg.showAsync();
}
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
var listview = document.getElementById("basicListView").winControl;
WinJS.UI.setOptions(listview, {
itemDataSource: SourceData.itemList.dataSource,
itemTemplate: document.getElementById("divDisplayItems"),
oniteminvoked: itemClick
});
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
app.start();
})();
Let us first visit
var listview = document.getElementById("basicListView").winControl;
WinJS.UI.setOptions(listview, {
itemDataSource: SourceData.itemList.dataSource,
itemTemplate: document.getElementById("divDisplayItems"),
oniteminvoked: itemClick
});
Here basically we are setting the source of the ListView and finally we are invoking the "itemClick" event handler "oniteminvoked" event.
Next let us see the below code piece
var itemClick = function (event)
{
var item = SourceData.itemList.getAt(event.detail.itemIndex);
var msg = new Windows.UI.Popups.MessageDialog("Name: " + item.Name + " | Age: " + item.Age + " | Salary: " + item.Salary);
msg.showAsync();
}
The "event.detail.itemIndex" will return the index or Row_Id of the items. So if teh first item is clicked, the value will be 0.For second item, it will be 1 etc.
The "getAt" function, gets the value at the specified index.And once we retrieve the data, we are simply displaying it.An output for this program will be like following:
Conclusion
In this tutorial, we have seen as how to get value of the selected item chosen from a list view item. Experiment file is attached herewith.Thanks for reading