locked
ListItem having Multiple Click Events? RRS feed

  • Question

  • In a metro style app (JS); I have ListView having multiple ListItems. 

    Now in listItems I have added some text and two images (Consider box Blue and Box Green) on which I require to have a "click" event listener. However its not fired in ListView as only InvokeItem event works.. (I tried disabling it as well to check normal click events but failed)

    

    Can I have a separate click event inside any element present in ListItem?

    One more question is; is multiple ellipsis possible ?

    Thanks 

    Wednesday, July 25, 2012 10:14 AM

Answers

  • HI

    I think you mis-understand my post here.

    You need to create the image element in your js file like this:

    var image = document.createElement("img");
            image.className = "regularListIconTextItem-Image";
            image.src = currentItem.data.picture;
            image.addEventListener("click",function(){
                details.innerText = "this img src:" + image.src;
            })
            result.appendChild(image);

    Please read this SDK smaple:

    1 download this sample:http://code.msdn.microsoft.com/windowsapps/ListView-item-templates-7d74826f

    2 In scenario2.html: add a id to <P>:<p id="details">

    3 In scenario2.js: Add this code under this line:  image.src = currentItem.data.picture;

    image.addEventListener("click",function(){
                details.innerText = "this img src:" + image.src;
            })

    Then when you click the image in scenario two you will get diffrent path for your different image.

    Hope it helpful.


    • Edited by Dino He Tuesday, August 7, 2012 2:45 PM
    • Marked as answer by Sameer Ahmed Khan Wednesday, August 8, 2012 7:09 AM
    Tuesday, August 7, 2012 2:41 PM

All replies

  • Hi,

    I had similar situation that I wanted to add one more box in a list item. I added it as part of list view and in  onitemInvoked identified it with the type property of the box I added.

    var more_button = {
    id: 0,
    category: cat_arr,
    title: "",
    more_label: more_vids + " more",
    backgroundImage: "../images/more.png",
    type: "more"
    };

    added the above button using listView.push.

    not sure about the questions you asked.

    Thanks,

    Sree

      



    • Edited by sreejith.k Wednesday, July 25, 2012 7:57 PM
    Wednesday, July 25, 2012 7:22 PM
  • You may be missing the class win-interactive per Kraig's reply to this post: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/b99082ed-1dd8-4654-b38a-dfcd2eeb65a7


    Jeff Sanders (MSFT)

    Thursday, July 26, 2012 1:06 PM
    Moderator
  • Hello Sreejith,

    I guess this won't be a good idea if we have multiple icons (say 5+) each hold a reference to some activity of ListItem.
    And these ListItems can be numerous and dynamically loaded...

    Thanks,

    Sameer Ahmed Khan

    Wednesday, August 1, 2012 5:54 AM
  • Well, I had already tested that but it didn't invoke the click event on images (In ListItem), it only worked on INPUT fields.

    Thanks,

    Sameer Ahmed Khan

    Wednesday, August 1, 2012 5:55 AM
  • Friday, August 3, 2012 7:32 AM
  • Thanks KMoon for replying, but I had tested that, however the click event doesn't occur on it. I modified my itemtemplate and attached an img there having a "click" listener. However when I click on it, the whole ListItem is invoked, not just that img.

    Friday, August 3, 2012 8:20 AM
  • HI

    Have you add "win-interactive" style?

    I just try the button control , but I think image should work too.

    Monday, August 6, 2012 2:44 PM
  • <a  id="deleteUpdate" class="win-interactive ">
                 <img  class="win-interactive"  style="margin-top: 5px;" src="/images/watchList/delete.png" />

    </a>

    JS Code in bits:
     document.getElementById("deleteUpdate").addEventListener("click", deleteUpdateClick, false);


     function deleteUpdateClick(args) {

            var sam = 1;
        }

    KMoon, it still doesn't work...

    Am I missing something ?


    Tuesday, August 7, 2012 6:11 AM
  • HI

    I think you mis-understand my post here.

    You need to create the image element in your js file like this:

    var image = document.createElement("img");
            image.className = "regularListIconTextItem-Image";
            image.src = currentItem.data.picture;
            image.addEventListener("click",function(){
                details.innerText = "this img src:" + image.src;
            })
            result.appendChild(image);

    Please read this SDK smaple:

    1 download this sample:http://code.msdn.microsoft.com/windowsapps/ListView-item-templates-7d74826f

    2 In scenario2.html: add a id to <P>:<p id="details">

    3 In scenario2.js: Add this code under this line:  image.src = currentItem.data.picture;

    image.addEventListener("click",function(){
                details.innerText = "this img src:" + image.src;
            })

    Then when you click the image in scenario two you will get diffrent path for your different image.

    Hope it helpful.


    • Edited by Dino He Tuesday, August 7, 2012 2:45 PM
    • Marked as answer by Sameer Ahmed Khan Wednesday, August 8, 2012 7:09 AM
    Tuesday, August 7, 2012 2:41 PM
  • Thanks Dino!!

    This did work! I'm quite uncertain why previously used method failed. Any specific reasons for it, just to have information of what went wrong...

    Thanks

    Wednesday, August 8, 2012 7:10 AM