List View Data Binding in Windows 8 JavaScript Metro Application


In this article 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 the purpose of this article I am going to bind the name and some images of an Indian cricket player in a ListView. After data binding the ListView should look like below:

image1.png

To bind data to a 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 the name of the array 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 the Data Source, I have put all the images of the players in the image folder. In real-world applications, data must be downloaded from the Service.

Create Item Template

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

  • ItemTemplate is a div

  • To convert the div to an ItemTemplate div we 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.


In the following I am using one div to bind the name of the player and image to bind image of the player.

image2.png

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.


In the following you can find, I have created ListView and bound it to the ItemTemplate.

image3.png

Putting it all together, the 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 the ListView with a data source, first you need to fetch the ListView div and then simply set the datasource value. In the following I am fetching ListView div and then setting data source value to PlayerData. If you remember, I created PlayerData as data source in the beginning of this article.

image4.png

Attaching event to ListView

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

image5.png

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

image6.png

Putting it all together, the js file will have the codes shown below:
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 a ListView bound with the player's name and image.

image7.png

I hope this article is useful. Thanks for reading.
 

Next Recommended Readings