Get selected items from List View Control in Metro Style Apps - DAY 6

Niladri.Biswas
Posted by in Windows Metro category on for Beginner level | Points: 250 | Views : 4954 red flag
Rating: 3 out of 5  
 1 vote(s)

In this article we will learn about how to get the selected items from a ListView control


 Download source code for Get selected items from List View Control in Metro Style Apps - DAY 6

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

Page copy protected against web site content infringement by Copyscape

About the Author

Niladri.Biswas
Full Name: Niladri Biswas
Member Level: Platinum
Member Status: Member
Member Since: 10/25/2010 11:04:24 AM
Country: India
Best Regards, Niladri Biswas
http://www.dotnetfunda.com
Technical Lead at HCL Technologies

Login to vote for this post.

Comments or Responses

Posted by: Kundan64 on: 1/31/2013 | Points: 25
nice article.

Login to post response

Comment using Facebook(Author doesn't get notification)