locked
Can I add an event listener to the child node of the listView item?

    Question

  • Hi there,

     

     I create a listView with "div" elements inside the items.  I want to add a click event listener to the child element, but it seems that the system won't response to the child element's click. Can some one please tell me why this happens?

     

    Thanks

    Thursday, January 26, 2012 2:03 AM

Answers

  • I used a function to render an item. here is the function:

     itemRender: function (item) {
                    var index = item._value.index;
                    var div = document.createElement("div");

                    // left Div
                    var leftDiv = document.createElement("div");
                    leftDiv.className = "itemLeftContainer";


                    // right Div
                    var rightDiv = document.createElement("div");
                    rightDiv.className = "itemRightContainer";


                    ....

                    // mid 1
                    var mid1 = document.createElement("div");
                    mid1.className = "wideDiv";
                    mid1.id = "mid1";
                    leftDiv.appendChild(mid1);

                    var h4 = document.createElement("h4");
                    h4.className = "item-title";
                    h4.innerText = item._value.data[3].title;
                    mid1.appendChild(h4);

                    // mid 2
                    var mid2 = document.createElement("div");
                    mid2.className = "wideDiv";
                    mid2.id = "mid2";
                    leftDiv.appendChild(mid2);

                    var h4 = document.createElement("h4");
                    h4.className = "item-title";
                    h4.innerText = item._value.data[4].title;
                    mid2.appendChild(h4);


                    // mid 3
                    var mid3 = document.createElement("div");
                    mid3.className = "wideDiv";
                    mid3.id = "mid3";
                    rightDiv.appendChild(mid3);

                    var h4 = document.createElement("h4");
                    h4.className = "item-title";
                    h4.innerText = item._value.data[5].title;
                    mid3.appendChild(h4);

                    div.appendChild(leftDiv);
                    div.appendChild(rightDiv);
                   
        // add event listener to the element
                    mid1.addEventListener("click", this.gridSelect, false);
                    mid2.attachEvent("click", this.gridSelect);
                    mid3.onclick = this.gridSelect;

            
                    return div;

            },

     

    And I replace the template by this function at this line:

    listView.itemTemplate = this.itemRender

     

    What I am trying to achieve is to produce different size grids inside a container.  I can't find a way to produce different size item, all the item are unique, so what I have to do is to produce one item, and render different size grids inside the item. as show on this picture

     


    • Edited by nan0pr0be Thursday, January 26, 2012 6:20 PM
    • Marked as answer by nan0pr0be Thursday, February 2, 2012 8:47 PM
    Thursday, January 26, 2012 6:17 PM
  • Thanks for the code.

    After further research, the answer is that this isn't supported in the Developer Preview bits, but should be later on through styling.

    Tuesday, January 31, 2012 1:01 AM

All replies

  • Can you provide an example of your HTML (the item template for the ListView) as well as the code you're using to hook up the event?
    Thursday, January 26, 2012 3:50 PM
  • I used a function to render an item. here is the function:

     itemRender: function (item) {
                    var index = item._value.index;
                    var div = document.createElement("div");

                    // left Div
                    var leftDiv = document.createElement("div");
                    leftDiv.className = "itemLeftContainer";


                    // right Div
                    var rightDiv = document.createElement("div");
                    rightDiv.className = "itemRightContainer";


                    ....

                    // mid 1
                    var mid1 = document.createElement("div");
                    mid1.className = "wideDiv";
                    mid1.id = "mid1";
                    leftDiv.appendChild(mid1);

                    var h4 = document.createElement("h4");
                    h4.className = "item-title";
                    h4.innerText = item._value.data[3].title;
                    mid1.appendChild(h4);

                    // mid 2
                    var mid2 = document.createElement("div");
                    mid2.className = "wideDiv";
                    mid2.id = "mid2";
                    leftDiv.appendChild(mid2);

                    var h4 = document.createElement("h4");
                    h4.className = "item-title";
                    h4.innerText = item._value.data[4].title;
                    mid2.appendChild(h4);


                    // mid 3
                    var mid3 = document.createElement("div");
                    mid3.className = "wideDiv";
                    mid3.id = "mid3";
                    rightDiv.appendChild(mid3);

                    var h4 = document.createElement("h4");
                    h4.className = "item-title";
                    h4.innerText = item._value.data[5].title;
                    mid3.appendChild(h4);

                    div.appendChild(leftDiv);
                    div.appendChild(rightDiv);
                   
        // add event listener to the element
                    mid1.addEventListener("click", this.gridSelect, false);
                    mid2.attachEvent("click", this.gridSelect);
                    mid3.onclick = this.gridSelect;

            
                    return div;

            },

     

    And I replace the template by this function at this line:

    listView.itemTemplate = this.itemRender

     

    What I am trying to achieve is to produce different size grids inside a container.  I can't find a way to produce different size item, all the item are unique, so what I have to do is to produce one item, and render different size grids inside the item. as show on this picture

     


    • Edited by nan0pr0be Thursday, January 26, 2012 6:20 PM
    • Marked as answer by nan0pr0be Thursday, February 2, 2012 8:47 PM
    Thursday, January 26, 2012 6:17 PM
  • Thanks for the code.

    After further research, the answer is that this isn't supported in the Developer Preview bits, but should be later on through styling.

    Tuesday, January 31, 2012 1:01 AM