Is there an example of multiple ListView elements on one page?

Question

I'm trying to create a UI that looks like a grouped listview, however each of the groups is really coming from a different datasource.  Since a listview can have only one datasource, it seems I'll need multiple listviews.  Are there any examples of this?  When I start to put multiple listviews on a single page, it appears I've signed up for wading through miles of CSS that assume I'm not doing that.

Thanks!

Tom

Answer 1

Hi Tom,

I do not know of any examples showing this, however you can just place them in your HTML.  If you wish to have different styling you can use CSS class selectors or use the ID.  What trouble are you having with CSS?

Also, have you considered combining the datasources and using the group items key to group them?

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Maybe also post a wireframe/mockup of your UI. Show us the flow of things.

Answer 3

Hi Tom,

I do not know of any examples showing this, however you can just place them in your HTML.  If you wish to have different styling you can use CSS class selectors or use the ID.  What trouble are you having with CSS?

Also, have you considered combining the datasources and using the group items key to group them?

-Jeff

I've considered that (combining datasources), but I think waiting for everything to load would be a pretty bad user experience, when I'll be able to get some groups to load faster than others.  So, basically I'd rather not do that for the same reasons AJAX is useful in the browser.

What I'm trying to do is have multiple listviews that look like groups, however when I do the markup to try to make that happen, I'm doing this:

<section aria-label="Main content" role="main">
            <div class="groupeditemslist win-groups" aria-label="List of groups" data-win-options="{ selectionMode: 'none' }">

                <div id="my-container">
                    <h2 class="group-title" role="link">Group One</h2>
                    <div id="my" class="groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
                </div>

                <div>
                    <h2 class="group-title" role="link">Group </h2>
                    <div id="channel" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
                </div>
            
                <!-- there will be more groups -->

     </div>
</section>

What I'm finding is that though I want the groups to be limited to two columns (like the default grouped listview seems to be) each group winds up stacked on top of each other, with the items scrolling up and down (one column) but taking the full width of the page.

Before I started diving in to learning about ms-grid-columns and starting to hard-code fixed widths everywhere (which seems like it might be okay, since the default 'groupedItemsPage.css' stylesheet is full of hard-coded widths). I wanted to see if there was an example of the "right" way to do it. 

Thanks!

Tom

Answer 4

If I change the groups to layout as WinJs.UI.GridView, and then float each of the div's left, I *almost* get what I'm looking for, except now the whole body doesn't scroll horizontally (I have 4 individual scrolling win-surfaces instead of 4 panels in one scrolling surface).  So, my first thought was to put each of my hand-written lists into a parent listview, but then everything disappears, per this issue/question: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/f6005de9-4a45-4b93-97b3-9c11c28dc856

So, again I feel like I'm going down the wrong path.

Answer 5

Do you know ahead of time how many groups you will have?

---

Jeff Sanders (MSFT)

Answer 6

Sounds like he has multiple vertical-scroll lists along with the whole page scrolling horizontally? Not really a Windows 8 experience.

Use iCookbooks Windows 8 app as a good reference for flow: http://icookbook.com/products/icookbook-for-windows8/

I'm always going to it for when I need to think about how things are laid out. Why I said a wireframe/mockup might help...help us see host much "stuff" is going to be in the page.

Answer 7

I think what you are trying to achieve can be now achieved in windows 8.1 by using a Hub control. The Hub Control makes laying an app out like the Bing apps very easy.

Have a look at the documentation on the microsoft website called: Herarchical Navigation, Start To Finish.

ps: Sorry I can't post a link