WinJS, ListViews and Limiting the Number of Items

• Develop a Windows 8 app in 30 days

When working with a Listview in Windows 8 applications using HTML and JavaScript, one of the challenges that is often faced is how to limit the number of items added to ListView control.  There are different reasons to limit the number of items, but the one I am going to focus is where you want to fill the vertical space of the ListView (using the ListLayout render function) with as many items as possible but without causing the ListView to scroll vertically.

This is a common ‘problem’ when building modern UI applications.  Because Windows 8 apps typically pan horizontally, the design guidelines state that you should not have vertically scrollable content.  Looking at the picture to the right, imagine that those "vertical" regions are displaying tweets from various users you are following.  You want to show as many tweets as possible for each user, but you do not want to show so many as to have the ListView enable scrolling.

So solve this problem, use the createFiltered function on the Binding List you are using to put data into the ListView.  For example, I may have setup my ListView of tweets like this in my HTML:

<div id="tweets" data-win-control="WinJS.UI.ListView" 
     data-win-options="{itemTemplate:select('#tweetTemplate'),
                        layout:{type:WinJS.UI.ListLayout},
                        selectionMode:'none',
                        swipeBehavior:'none'}">
</div>

In my page.js file, I need to do a few things.  First, I need to get the height of my ListView.  So after my page has loaded (typically in the ready handler for my Page control), I do this:

var tweetList = document.getElementById('tweets');
var listHeight = tweetList.clientHeight;

with that, I can now setup my Binding List like this:

function displayTweets (tweetArray, listHeight) {
     var count = 0;
     var list = new WinJS.Binding.List(newTweets).createFiltered(
           function (item) {
                 count += 90;
                  return (count < listHeight
           }
     );
     tweets.winControl.itemDataSource = list.dataSource;
}

Now you will always get the correct number of items displayed in your ListView regardless of the screen size.

This blog post was originally posted here: http://www.slickthought.net/post/2013/02/06/WinJS-ListViews-and-Limiting-the-Number-of-Items.aspx