<TextArea> tag in ListView problems RRS feed

  • Question

  • I have a list view which has multiple textarea tags. There is 1 textarea which is drawn when the application is loaded (using drawonediv() below) and the app gives the functionality to add more textareas if a user needs.


    1. In the drawonediv() function, I use the push method to get the first div in. When I run the code nothing shows up though. But as soon as I add another new textarea using “createnote()”, the new one shows up along with the one which was supposed to show up when drawonediv was called. Should I be drawing the first div somewhere in the code which I am not?


    var list_view = new WinJS.UI.ListView();

    list_view = document.getElementById('basicListView').winControl;

    list_view.itemTemplate = document.getElementById("notesTemplate");

    list_view.itemDataSource = DataExample.itemList.dataSource;

    //This function is executed as soon as the app loads but nothing gets drawn on the canvas

    function drawonediv


    var onediv = document.createElement('textarea');

    onediv.className = 'firstnote'

    onediv.id = 'id0';

    onediv.innerHTML = "Write your note here";

    DataExample.itemList.push({ name: ('id' + (0)), data: "Starting", noteindex: 1 });


    //This is the function which is called when a user clicks “Add” in the command bar. When this function is called it draws the div along with the ones which was supposed to show up when drawonediv() was called.

    function createNote()


    var array_length = DataExample.itemList.length;

    DataExample.itemList.splice(0, 0, { name: ('id' + (array_length)), data: "Start noting", noteindex: 1 });



    2. The second problem is that when I type something in the textbox (e.g. “Redmond”), and when I query what is in the text box, I get the default text (“Start noting” or “Write your note here”) and not the one which was typed in the box. I assume that the array is not being updated when something is typed in the box. How do I get the new text from the array?

    var textinside = DataExample.itemList.getAt(i).innerHTML;

    DataExample.js file

    var dataArray = new Array();

           var dataList = new WinJS.Binding.List(dataArray);


           var publicMembers =


                itemList: dataList,

                data_array: dataArray



           WinJS.Namespace.define("DataExample", publicMembers);


    Looks like I have to implement 2 way binding but I have no idea how to do that. Could someone help please
    • Edited by Utkarsh Seth Thursday, August 16, 2012 4:42 PM information
    Thursday, August 16, 2012 4:19 PM

All replies

  • There is not enough information here to determine what your problem could be.  Can you provide a project that is a complete sample?

    Jeff Sanders (MSFT)

    Thursday, August 16, 2012 6:16 PM