In this post we will see,

  1. Working with ListView control in WinJS
  2. ItemTemplte in WinJS
  3. Data Binding to ListView
  4. Creating Data Source in WinJS

For purpose of this post I am going to bind name and images of Indian cricket player in ListView. After data binding ListView should look like below,

image

To bind data with ListView you need to follow certain steps.

  1. Create a Data Source
  2. Create ItemTemplate and bind data source properties to Html elements of ItemTemplate
  3. Create ListView and attach ItemTemplate to ListView
  4. Set the DataSource of ListView

Create Data Source

Let us create data to bind to the List View. I have given name of the array as PlayerData. This contains two objects Name and Photo.


var PlayerData = [
{ Name: 'Sachin Tendulkar', Photo: 'images/ST.jpg' },
{ Name: 'Mahender Singh Dhoni', Photo: 'images/MSD.jpg' },
{ Name: 'Saurabh Ganguli', Photo: 'images/SG.jpg' },
{ Name: 'Harbhajan Singh', Photo: 'images/HS.jpg' },
{ Name: 'Youvrah Singh', Photo: 'images/YS.jpg' },
{ Name: 'VVS Laxman', Photo: 'images/VVS.jpg' },
{ Name: 'Virendar Shewag', Photo: 'images/VS.jpg' },
{ Name: 'Zaheer Khan', Photo: 'images/ZK.jpg' },
{ Name: 'Sachin Tendulkar', Photo: 'images/ST.jpg' },
{ Name: 'Mahender Singh Dhoni', Photo: 'images/MSD.jpg' },
{ Name: 'Saurabh Ganguli', Photo: 'images/SG.jpg' },
{ Name: 'Harbhajan Singh', Photo: 'images/HS.jpg' },
{ Name: 'Youvrah Singh', Photo: 'images/YS.jpg' },
{ Name: 'VVS Laxman', Photo: 'images/VVS.jpg' },
{ Name: 'Virendar Shewag', Photo: 'images/VS.jpg' },
{ Name: 'Zaheer Khan', Photo: 'images/ZK.jpg' }
];

To create Data Source, I have put all the images of players in image folder. In real time applications, data must be downloaded from the Service.

Create Item Template

We need to create ItemTemplate to bind with the ListView. There are few points you need to keep in mind while creating ItemTemplate

  • ItemTemplate is a div
  • To convert div as ItemTemplate div need to have attribute data-win-control set to WinJS.Binding.Template
  • Other HTML elements should be inside the template div tag.
  • Data-win-bind is used to bind data to HTML elements.

Below I have put one div to bind name of the player and image to bind image of the player.

image

Create ListView

Data has been created. ItemTemplate has been created. Next you need to create ListView and bind ItemTemplate to that ListView.

  • ListView is a div
  • data-win-control property of div should be set to WinJS.UI.ListView
  • data-win-options take complex values.
  • Value of itemRenderer should be set to id of the div created as ItemTemplate. In our case id of ItemTemplate div is playeritemtemplate. So value of itemRenderer should be playeritemtemplate.
  • Layout should be set.
  • Value of maximum rows can be set.

Below you can find, I have created ListView and bind it to the ItemTemplate.

image

Putting all together HTML should be as below. I have put an output div. Selected value from the ListView will be displayed in output div.

Default.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DataBindingPlayer</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/ui.js"></script>
<script src="/winjs/js/binding.js"></script>
<script src="/winjs/js/controls.js"></script>
<script src="/winjs/js/animations.js"></script>
<script src="/winjs/js/uicollections.js"></script>
<script src="/winjs/js/wwaapp.js"></script>

<!-- DataBindingPlayer references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body>
<h2>Indian Team</h2>
<br />

<div id="playeritemtemplate"
data-win-control="WinJS.Binding.Template">
<div data-win-bind="innerText:Name"
style="height:20px;">
</div>
<img data-win-bind="src:Photo"
style="width:200px;height:150px;"  />
</div>

<div id="PlayerListView"
data-win-control="WinJS.UI.ListView" style="height:185px;"
data-win-options="{itemRenderer:playeritemtemplate,layout:{type:WinJS.UI.GridLayout,maxRows:1}}" >
</div>

<br />
<div id="ouputDiv" >
<span>You Selected </span>
<span id="selectedPlayer" style="height:20px;" ></span> <br />
<img id="selectedPlayerImg" style="width:200px;height:150px;"/>
</div>
</body>
</html>

Binding Data Source to ListView

To bind ListView with data source, first you need to fetch ListView div and then simply set datasource value. Below I am fetching ListView div and then setting data source value to PlayerData. If you remember, I created PlayerData as data source in starting of this post.

image

Attaching event to ListView

As of now you have created ListView and bind data source to that. Next you may want to fetch the selected item. For that you need to attach iteminvoked event to the ListView. You can add that as below. In below SelectItem is a function and it will get called on the item selection

image

In SelectItem function you will have to fetch the value of selected item and set as value of HTML element of output div.

image

Putting all together js file will have below codes

Default.js


(function () {
'use strict';
// Uncomment the following line to enable first chance exceptions.
// Debug.enableFirstChanceException(true);


var PlayerData = [
{ Name: 'Sachin Tendulkar', Photo: 'images/ST.jpg' },
{ Name: 'Mahender Singh Dhoni', Photo: 'images/MSD.jpg' },
{ Name: 'Saurabh Ganguli', Photo: 'images/SG.jpg' },
{ Name: 'Harbhajan Singh', Photo: 'images/HS.jpg' },
{ Name: 'Youvrah Singh', Photo: 'images/YS.jpg' },
{ Name: 'VVS Laxman', Photo: 'images/VVS.jpg' },
{ Name: 'Virendar Shewag', Photo: 'images/VS.jpg' },
{ Name: 'Zaheer Khan', Photo: 'images/ZK.jpg' },
{ Name: 'Sachin Tendulkar', Photo: 'images/ST.jpg' },
{ Name: 'Mahender Singh Dhoni', Photo: 'images/MSD.jpg' },
{ Name: 'Saurabh Ganguli', Photo: 'images/SG.jpg' },
{ Name: 'Harbhajan Singh', Photo: 'images/HS.jpg' },
{ Name: 'Youvrah Singh', Photo: 'images/YS.jpg' },
{ Name: 'VVS Laxman', Photo: 'images/VVS.jpg' },
{ Name: 'Virendar Shewag', Photo: 'images/VS.jpg' },
{ Name: 'Zaheer Khan', Photo: 'images/ZK.jpg' }
];

WinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
WinJS.UI.processAll().then(function () {
var PlayerList = document.getElementById('PlayerListView').winControl;
PlayerList.dataSource = PlayerData;
PlayerList.addEventListener('iteminvoked', SelectItem);
});

}
}

function SelectItem(e) {
var selectedItem = PlayerData[e.detail.itemIndex];
var selecteplayer = document.getElementById('selectedPlayer');
selecteplayer.innerText = selectedItem.Name;
var selecteplayerImg = document.getElementById('selectedPlayerImg');
selecteplayerImg.src = selectedItem.Photo;
}


WinJS.Application.start();
})();



On running you should get ListView bind with players name and image.

image

I hope this post is useful. Thanks for reading.

Advertisements

11 thoughts on “List View Data Binding in Windows 8 JavaScript Metro Application

  1. Excellent article and very helpful. I have a question, can you change the size of the template div for a single item in the list? I would like to expand the selected item to show additional detail and then return it to normal when not selected. Can that be done with ListView or is there another way to accomplish the task?

  2. I compiled it successfully….and ran it but none of the images are getting displayed in the Metro App. is their any constraints regarding the images etc.
    I have selected the images of 100x100px. and the images are of (.png) format.
    Kindly reply ASAP.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s