Semantic zoom & ListView zoomed out mode, add a header?

Question

Hi,

I'm using a lot of semantic zoom options. But i have a special case where i want to drill down into the data. So i'm starting out in the zoomed out mode, with all groups on screen. Now i would like to add a header in the same style as in the zoomed in view.

i've bound my data like so:

  this.listViewZoomOut.itemDataSource = datasource.groups.dataSource;

datasource being the same datasource as in the zoomed in view bound like:

 this.listView.itemDataSource = ds.dataSource;
 this.listView.groupDataSource = ds.groups.dataSource;

Has anyone done anything like this and how?

i've tried a couple of things like setting groupheadertemplate on the zoomed out view. but that would need a bound groupdatasource, which i don't have.

Cheating that datasource causes errors on clicking, etc.

All i need is a header, which describes the groups that your seeing (i can't use the page header, since the header needs to scroll along )

thanks

Answer 1

Hi,

I would like to know whether you want is to show a header together with a body for each group in the zoomed out view. If so, you can style the zoomed out view so that it displays two divs. One for header and one for body.

If I have any misunderstood, it would be better if you can provide more information.

Best Regards,

Ming Xu.

---

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact [e-mail].
Microsoft One Code Framework

Answer 2

Hi,

The header that i want to show in the zoomed out view is actually a description of the items(Groups) displaying in the zoomed out view.

So its not a header per group, but just a additional header underneath the page header.

You could almost say in the zoomed out view the groups are the items within a group which has a title. and that one i want to display

Basically i want to have:

(backbutton) PageTitle

Description

Item Item etc

Item Item etc

my html:

 <div id="CatagoryTile" class="" data-win-control="WinJS.Binding.Template">
        my html styling for the group
    </div>

    <div class="fragment groupeditemspage">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">PAGETITLE</span>
            </h1>
        </header>



        <section aria-label="Main content" role="main">
            <div class="sezoDiv GridViewContainer" data-win-control="WinJS.UI.SemanticZoom" data-win-options="{ zoomFactor: 1, initiallyZoomedOut: true }">
                <div class="groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none', itemTemplate: select('.excludedtemplate') ,
                    groupHeaderTemplate: select('.headerTemplate')  }">
                </div>
                <div class="groupeditemslistZoomOut groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none', itemTemplate: select('.CatagoryTile')  
                     }">
                </div>
            </div>
        </section>
    </div>

Answer 3

Hi,

So do you mean you only need a single title? Then you can put the title out of the semantic view. This will make the solution much easier. 

 
<header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">PAGETITLE</span>
            </h1>
            <h1 class="titlearea win-type-ellipsis">
                <span class="youradditionaltitle">Your Additional Title</span>
            </h1>
        </header>

Best Regards,

Ming Xu.

---

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact [e-mail].
Microsoft One Code Framework

Answer 4

Hi,

If you want the group header to scroll in the zoomed out view, you will need to group all of your items into one group. You are correctly using the dataSources in the sense that the zoomed in groupDataSource must match the zoomed out itemDataSource.

What you can do is take the datasource.groups list and call createGrouped on it. Return a constant group key and all the items will be placed into the same group. This will give you a new list, let's call regroupedList.

You will need to configure your zoomed in listview like so:
  itemDataSource: datasource.dataSource; groupDataSource: regroupedList.dataSource

The zoomed out view should have:
  itemDataSource: regroupedList.dataSource; groupDataSource: regroupedList.groups.dataSource

Hope this helps!