Question

I am trying to create a grid app with various sections and each section is being fetched to a specific listview however I have encountered a problem where you can only have one listview covering the entire page in order to properly horizontally scroll the objects inside the list which means there’s no room for another one. This is the code I am using right now:

WinJS.xhr({ url: "http://search.twitter.com/search.json?q=%23windows8&rpp=100}).then(

            function (response) {
                var json = JSON.parse(response.responseText.toString());
                var list = new WinJS.Binding.List(json.result);
                gridView1.winControl.itemDataSource = list.dataSource;

                //gridView1 is ID of listview 

            }

With the above code I can easily show grids of objects containing result array and then bind em to the list. However now I want multiple similar listviews for different URLs that are displayed like the one shown as default interface in WinJS grid app.

To be more clear, this is what I want – Twitter usernames in first section of grid by using Twitter API URL1 and then I want twitter search results in adjacent grid so I have to use another listview b using URL2.

How do I find a fix for this. Appreciate your help.

Answer 1

Yeah, coming up with what all of the disparate items from the different lists have in common and projecting your data up to a single grouped list is one option. You might not want to give up on what you were trying to do though. If you put multiple ListViews on a page wrapped in a flexbox, you shouldn’t have any trouble with scrolling. If you look at my codeSHOW app at the ListView demo, you’ll see that I have the rough equivalent. Windows is actually really smart about the way it handles the panning.

** EDIT **

Here’s a rough example of what I’m talking about. Again, you can find a working example of this in the ListView demo of codeSHOW.

<!-- HTML snippet -->
<div class="hub">
  <div>
    <div id="list1" data-win-control="WinJS.UI.ListView"></div>
  </div>
  <div>
    <div id="list2" data-win-control="WinJS.UI.ListView"></div>
  </div>
  <div>
    <div id="list3" data-win-control="WinJS.UI.ListView"></div>
  </div>
</div>

/* CSS snippet */
.hub {
  display:-ms-flexbox; /* this will lay the lists out horizontally */
  overflow-x:auto; /* set the flexbox to scroll its overflow */
}

/* select each of the sections */
.hub > div {
  padding-right:80px; /* 80px of space between "sections" */
}

/* choose whatever sizes you want for your list views. You may want to make them wide
enough that they don't scroll because it can get a little awkward to have scrolling
within scrolling */
[data-win-control=WinJS.UI.ListView] {
  width: 640px;
  height: 480px;
}