locked
How to catch button click event in listview? RRS feed

  • Question

  • Hi all

    I want to give each items in listview a button , When I click this button, I can edit the related item fields.

    So how can I retrieve that?

    Please help~


    • Edited by KMoon Tuesday, July 31, 2012 11:12 AM
    • Changed type Dino He Wednesday, August 1, 2012 9:48 AM
    Tuesday, July 31, 2012 11:12 AM

Answers

  • Hi

    You can use a templating function for your project:

    Please refer to this SDK Sample:

    http://code.msdn.microsoft.com/windowsapps/ListView-item-templates-7d74826f

    In scenario 2:

    HTML:
    <div id="listView" 
                data-win-control="WinJS.UI.ListView" 
                data-win-options="{ 
                    itemDataSource: myData.dataSource, 
                    itemTemplate: MyJSItemTemplate, 
                    selectionMode: 'none', 
                    tapBehavior: 'none', 
                    swipeBehavior: 'none', 
                    layout: { type: WinJS.UI.GridLayout } 
                }"
            ></div>

    function MyJSItemTemplate(itemPromise) { return itemPromise.then(function (currentItem) { // Build ListView Item Container div var result = document.createElement("div"); result.className = "regularListIconTextItem"; result.style.overflow = "hidden"; // Build icon div and insert into ListView Item var image = document.createElement("img"); image.className = "regularListIconTextItem-Image"; image.src = currentItem.data.picture; result.appendChild(image); //add your button here. and add listener here.

    //var Button = document.createElement("button"); //Button.innerText = "button";

    return result; }); }

    Hope it helpful.


    • Proposed as answer by famingyuan Friday, August 3, 2012 1:48 AM
    • Marked as answer by KMoon Friday, August 3, 2012 5:42 AM
    • Edited by Dino He Tuesday, August 7, 2012 2:21 PM give more details
    Wednesday, August 1, 2012 1:23 PM

All replies

  • Try adding the "win-interactive" style to the root element of your item template. This instructs the listview to let the controls in the rendered template handle input events rather than having the listview handle them itself.

    .Kraig

    Wednesday, August 1, 2012 4:45 AM
  • Hi Kraig Brockschmidt

    Thanks for your advice but my question is:

    I have a listView embed button control for each line, and I want to get catch the button click event, and output this item's other element input.

    Code like this:

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
                <div class="mediumListIconTextItem">
                    <img src="#" class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
                    <div class="mediumListIconTextItem-Detail">
                        <h4 data-win-bind="innerText: title"></h4>
                        <h6 data-win-bind="innerText: text"></h6>
                        <button id="btn" onclick="handleClick(event)"></button>
                    </div>
                </div>
            </div>
            <div id="listView" 
                class="win-interactive"
                data-win-control="WinJS.UI.ListView" 
                data-win-options="{ 
                    itemDataSource: myGroupedList.dataSource, 
                    itemTemplate: mediumListIconTextTemplate, 
                    groupDataSource: myGroupedList.groups.dataSource,
                    groupHeaderTemplate: headerTemplate, 
                    selectionMode: 'none', 
                    tapBehavior: 'none', 
                    swipeBehavior: 'none'
                }"
            ></div>

    How could I get the  data-win-bind="innerText: title and data-win-bind="innerText: text

    in Click event?

    Can I get the index in this event?

    Wednesday, August 1, 2012 10:22 AM
  • Hi

    You can use a templating function for your project:

    Please refer to this SDK Sample:

    http://code.msdn.microsoft.com/windowsapps/ListView-item-templates-7d74826f

    In scenario 2:

    HTML:
    <div id="listView" 
                data-win-control="WinJS.UI.ListView" 
                data-win-options="{ 
                    itemDataSource: myData.dataSource, 
                    itemTemplate: MyJSItemTemplate, 
                    selectionMode: 'none', 
                    tapBehavior: 'none', 
                    swipeBehavior: 'none', 
                    layout: { type: WinJS.UI.GridLayout } 
                }"
            ></div>

    function MyJSItemTemplate(itemPromise) { return itemPromise.then(function (currentItem) { // Build ListView Item Container div var result = document.createElement("div"); result.className = "regularListIconTextItem"; result.style.overflow = "hidden"; // Build icon div and insert into ListView Item var image = document.createElement("img"); image.className = "regularListIconTextItem-Image"; image.src = currentItem.data.picture; result.appendChild(image); //add your button here. and add listener here.

    //var Button = document.createElement("button"); //Button.innerText = "button";

    return result; }); }

    Hope it helpful.


    • Proposed as answer by famingyuan Friday, August 3, 2012 1:48 AM
    • Marked as answer by KMoon Friday, August 3, 2012 5:42 AM
    • Edited by Dino He Tuesday, August 7, 2012 2:21 PM give more details
    Wednesday, August 1, 2012 1:23 PM
  • Thanks very much Dino and Kraig

    Friday, August 3, 2012 5:43 AM
  • I found this thread and tried implementing the solution, but I found that the ListView's oniteminvoked function is triggered before the button's onclick function so I don't have any good way to prevent the item from being activated if they selected the button.  I was hoping to have the onclick function call event.preventDefault() and that would magically prevent oniteminvoked from being triggered.  Has anyone been able to get a button embedded in a ListView item and be able to click it without triggering oniteminvoked?
    Tuesday, October 9, 2012 9:05 PM
  • Hi Adam,

    As mentioned above you can add "win-interactive" to the element class - this way the list-view know that this element have its own click method.

    To bind your element with a click method Microsoft recommended on the templating function as mentioned above.

    I'm hoping that this information is useful.

    Thursday, February 14, 2013 3:18 PM