locked
*Simple* List view example

Answers

  • If you just want a quick sanity check, you can build a ListView imperatively:

     

    var listView = new WinJS.UI.ListView(document.getElementById('myListView'),
        {
            dataSource : ['hello', 'world']
        }
    );
    

    Assuming you added some minor HTML

    <div id="myListView"></div>
    

    and some CSS so the ListView items aren't tiny

     

    .win-item {
        height: 100px;
        width: 100px;
    }

    Does that help at all? Also you may want to try looking at the DOM Explorer while your app is running to see if the ListView is getting added correctly.

     

    Cheers,

    -Jeff

    Friday, September 23, 2011 8:06 PM
  • A couple of quick gotcha's:

    a) Make sure you are looking for exceptions. Put the following as one of the first js statements: Debug.enableFirstChanceException(true);

    b) Make sure the listview has a size specified for it (using css)

    c) Make sure the itemTemplate has a size specified for it (again using css). These are required so it can measure the item and itself and know how many items to fetch, and render etc.

    d) Use the dom explorer in VS to verify what is in the DOM under the list-view. If the scrollable region doesn't have items, then that's a problem. Check its size too as that may indicate a problem with b) or c) above.

    Wednesday, September 28, 2011 12:29 AM

All replies

  • If you just want a quick sanity check, you can build a ListView imperatively:

     

    var listView = new WinJS.UI.ListView(document.getElementById('myListView'),
        {
            dataSource : ['hello', 'world']
        }
    );
    

    Assuming you added some minor HTML

    <div id="myListView"></div>
    

    and some CSS so the ListView items aren't tiny

     

    .win-item {
        height: 100px;
        width: 100px;
    }

    Does that help at all? Also you may want to try looking at the DOM Explorer while your app is running to see if the ListView is getting added correctly.

     

    Cheers,

    -Jeff

    Friday, September 23, 2011 8:06 PM
  • A couple of quick gotcha's:

    a) Make sure you are looking for exceptions. Put the following as one of the first js statements: Debug.enableFirstChanceException(true);

    b) Make sure the listview has a size specified for it (using css)

    c) Make sure the itemTemplate has a size specified for it (again using css). These are required so it can measure the item and itself and know how many items to fetch, and render etc.

    d) Use the dom explorer in VS to verify what is in the DOM under the list-view. If the scrollable region doesn't have items, then that's a problem. Check its size too as that may indicate a problem with b) or c) above.

    Wednesday, September 28, 2011 12:29 AM