locked
interactive input element inside listview item behaviour

    Question

  • I have a listview template function with an input element with win-interactive class. Whenever there is a change in the field it updates the bindinglist.

    It works as intended when the input field is changed and triggering the change event by pressing tab key or clicking anywhere else on the screen.

    But when triggering the change event by clicking on another input element, that input is not selected and couldn't enter text in to it.(Can enter text in to the input if I click anywhere outside the input element and click back inside the input element.

    I have modified the HTML ListView item templates sample, scenario 2(template function) as below. When changing the input field and when clicking on another input element, the change event is triggered but the input clicked on is not editable.  What should I do to make it interactive?

    // Custom templating function
    var MyJSItemTemplate = WinJS.Utilities.markSupportedForProcessing(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);
    
            // Build content body
            var body = document.createElement("div");
            body.className = "regularListIconTextItem-Detail";
            body.style.overflow = "hidden";
    
            // Display title
            var title = document.createElement("h4");
            title.innerText = currentItem.data.title;
            body.appendChild(title);
    
            // Display text
            var fulltext = document.createElement("input");//changed to input element
            fulltext.type = "text";
            fulltext.className = "win-interactive";
            fulltext.value = currentItem.data.text;
            body.appendChild(fulltext);
            fulltext.addEventListener("change", handleChange, false);
    
            //put the body into the ListView Item
            result.appendChild(body);
    
            return result;
        });
    });
    
    function handleChange(evt) {
        var current;
        var title = evt.currentTarget.previousElementSibling;
        for (var i = 0; i < myData.length; i++) {
            current = myData.getAt(i);
            if (current.title == title.innerText) current.text = evt.currentTarget.value;
            myData.setAt(i, current);
        }
    
    }
    
    (function () {
        "use strict";
        var page = WinJS.UI.Pages.define("/html/scenario2.html", {
            ready: function (element, options) {
                element.querySelector("#listView").winControl.forceLayout();
            }
        });
    })();

    Tuesday, December 24, 2013 4:54 AM

Answers

  • Hi...

    not sure what could be the reason... but when I set listview currentItem to the same item again, it worked.

    Here is the handleChange event

    function handleChange(evt) {
        var current;
        var title = evt.currentTarget.previousElementSibling;
        for (var i = 0; i < myData.length; i++) {
            current = myData.getAt(i);
            if (current.title == title.innerText) current.text = evt.currentTarget.value;
            myData.setAt(i, current);
        }
        var listView = document.querySelector("#listView").winControl;
        var currentItem = listView.currentItem;
        listView.currentItem = currentItem;
    
      }


    Nazia

    • Proposed as answer by Nazia Firdouse Thursday, December 26, 2013 12:18 PM
    • Marked as answer by ner9G Thursday, December 26, 2013 10:49 PM
    Thursday, December 26, 2013 5:58 AM

All replies

  • Hi...

    not sure what could be the reason... but when I set listview currentItem to the same item again, it worked.

    Here is the handleChange event

    function handleChange(evt) {
        var current;
        var title = evt.currentTarget.previousElementSibling;
        for (var i = 0; i < myData.length; i++) {
            current = myData.getAt(i);
            if (current.title == title.innerText) current.text = evt.currentTarget.value;
            myData.setAt(i, current);
        }
        var listView = document.querySelector("#listView").winControl;
        var currentItem = listView.currentItem;
        listView.currentItem = currentItem;
    
      }


    Nazia

    • Proposed as answer by Nazia Firdouse Thursday, December 26, 2013 12:18 PM
    • Marked as answer by ner9G Thursday, December 26, 2013 10:49 PM
    Thursday, December 26, 2013 5:58 AM
  • Thanks that workaround worked.
    Thursday, December 26, 2013 10:49 PM