locked
Data Binding with Listviews - Clicking item and processing depending on what is clicked.

    Question

  • Anyone able to help with a windows 8 JavaScript app. I have items binded to a listview, and on click i want to run a function() and depending on what was clicked to pass a value to the function. Anyone able to point me in the right direction?


    I am trying to click an item in the data binded list and when it is clicked, I can return some properties such as "id" and then pass this "id" as a parameter to another function. I am only a student developer and any help is much appreciated. 


    <form action="http://www.facebook.com/ajax/ufi/modify.php" class="live_307027136066954_316526391751760 commentable_item autoexpand_mode" data-live="{"seq":0}" id="u_0_3q" method="post" rel="async" style="margin:0px;padding:0px;color:#333333;font-family:'lucida grande', tahoma, verdana, arial, sans-serif;font-size:11px;line-height:14px;"></form>

    Dean Meehan | Student

    Thursday, February 07, 2013 1:51 PM

Answers

  • Dean,

    As mentioned in my previous post, your event handler will receive the index of the item in the list of data that your listview is bound to. Then you need to just get the list item from that index using the function mentioned above.

    So your event handler might look like:

    function itemInvoked(e) {
        var index = e.detail.itemIndex,
            list = document.getElementById("myList").winControl,
            listData = list.itemDataSource,
            listItem = listData.itemFromIndex(index);
    
        // do whatever you need with the item from your list aka listItem
    }

    Thursday, February 07, 2013 9:55 PM

All replies

  • You can attach an event listener to the listview's oniteminvoked event. This will fire each time one of your list items is clicked or tapped.

    As part of the event detail from that event, you get the index of the item invoked. Using that information, you can grab your specific item from the list using the itemFromIndex function.

    • Proposed as answer by got.dibbs Thursday, February 07, 2013 9:11 PM
    Thursday, February 07, 2013 4:19 PM
  • I have the following code to catch the click of an item which does take me to the function i want to run. 

                document.getElementById("maingridview").addEventListener("iteminvoked", itemInvoked, false);

    But the problem is I cannot seem to know what was clicked and how to use data from this item? 


    Dean Meehan | Student

    Thursday, February 07, 2013 9:49 PM
  • Dean,

    As mentioned in my previous post, your event handler will receive the index of the item in the list of data that your listview is bound to. Then you need to just get the list item from that index using the function mentioned above.

    So your event handler might look like:

    function itemInvoked(e) {
        var index = e.detail.itemIndex,
            list = document.getElementById("myList").winControl,
            listData = list.itemDataSource,
            listItem = listData.itemFromIndex(index);
    
        // do whatever you need with the item from your list aka listItem
    }

    Thursday, February 07, 2013 9:55 PM
  • Just coming back to say thanks for this! :) Really made a difference and the apps 100% thus i now understand the concept for future projects! :) 

    Dean Meehan | Microsoft UK Student Partner

    Wednesday, May 08, 2013 12:12 PM