locked
Semantic zoom with grouped items for the zoomed-out view

    Question

  • Hi,

    I'm adding semantic zoom to my application and I'm having issues with the data binding in the zoomed out listview.
    In the normal (zoomed in) listview I'm binding grouped data and it renders fine. 
    For the zoomed out listview I would like to render the same grouped data (same itemDataSource and groupDataSource) , but with different itemTemplate and groupTemplate (the same as the normal view but smaller).

    The problem I'm having is that when I zoom out I get an error at ui.js line 2117 saying "0x800a138f - JavaScript runtime error: Object.defineProperty: argument is not an Object".

    I've tryed binding the zoomed out listview itemDataSource property to the groups.dataSource collection and not set the groupDataSource property (like all the examples I found on the web) and I works fine.

    Why is the zoomed out view not rendering grouped items like the normal view?

    Thanks.
    Diego

     

    Friday, July 06, 2012 9:46 PM

Answers

  • Diego,

    The itemDataSource of the zoomed out view must match the groupedDataSource of the zoomed in view. This is the nature of SemanticZoom with ListView, since we rely on the key-map between the data sources to tell us where to zoom.

    It is still possible to achieve what you want. One easy way to do this with a Binding.List is to use the zoomed-out itemTemplate function to sync up the layout for the items in the zoomed-out view (which actually are the "groups" of the zoomed-in view). The zoomed-out itemTemplate should use the "group" data to render the items of that group in the smaller size. You can figure out what's in that group either by simply keeping a separate array of the items, or you can ask the itemDataSource of the zoomed in view.

    Alternately, you can write your own VirtualizedDataSource to forward the data from the items to the groups, and you can get the correct information in the zoomed out view without using another data structure to sync up the views.

    Hope this helps,

    -Sean Lee

    Tuesday, July 10, 2012 11:00 PM

All replies

  • If you are using a custom IListDataSource, make sure that you implement itemFromKey method.
    • Proposed as answer by Yasser Makram_ Saturday, July 07, 2012 6:54 AM
    Saturday, July 07, 2012 6:35 AM
  • Hi Yasser. 

    No, I'm not using a custom IListDataSource. I'm using the default WinJS.Binding.List with its own dataSource property.

     I edited the Microsoft Official Semantic Zoom Sample (scenario2.html) and seems like the zoomed out view behaves in a different way than the normal (zoomed in) listview. While the zoomed in view accepts both itemDataSource and groupDataSource, the zoomed out view only accepts itemDataSource.
    I changed the zoomedOutListView to use myGroupedList.dataSource as itemDataSource and the same issue arises.

    Code before:

    <div id="zoomedOutListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ 
    itemDataSource: myGroupedList.groups.dataSource, 
            itemTemplate: semanticZoomTemplate, 
            selectionMode: 'none', 
            tapBehavior: 'invoke', 
            swipeBehavior: 'none' 
    }"></div>


    Code after (which reproduces the issue):

    <div id="zoomedOutListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ 
    itemDataSource: myGroupedList.dataSource, //originally was myGroupedList.groups.dataSource
            itemTemplate: semanticZoomTemplate, 
            selectionMode: 'none', 
            tapBehavior: 'invoke', 
            swipeBehavior: 'none' 
    }"></div>

    Is this a bug with the semantic zoom control or am I doing something wrong?

    Thanks.
    Diego.

    Monday, July 09, 2012 2:35 PM
  • Hi,

    Base on my understanding, since the list itself is a grouped list, its items are the groups instead of items of each group. So this is a desired behavior. We can only bind a ListView’s itemDataSource to the groups, not a list of items inside a particular group.

    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 msdnmg@microsoft.com.
    Microsoft One Code Framework

    Tuesday, July 10, 2012 10:40 AM
    Moderator
  • Thanks for replying.

    What I'm not understanding is why that works for a "normal" listview (e.g. one that's not part of the semantic zoom control, or the zoomed in (normal) view for the semantic zoom control.

    Sorry I didn't fully explain what I was after with the code above. The correct code would also have the groupDataSource and groupTemplate bindings for the zoomed out view. In that case I would have the same data bindings as the zoomed in listview, which works fine for it but not for the zoomed out view.

    Ok, so if I'm understanding you correctly you mean that the desired behavior for the zoomed out view is to bind groups to the itemDataSource?.

    I'm still not sure how they implemented the semantic zoom in the start menu. When you zoom out you get the same content but in smaller tiles.

    Thanks,
    Diego.

    Tuesday, July 10, 2012 12:56 PM
  • Diego,

    The itemDataSource of the zoomed out view must match the groupedDataSource of the zoomed in view. This is the nature of SemanticZoom with ListView, since we rely on the key-map between the data sources to tell us where to zoom.

    It is still possible to achieve what you want. One easy way to do this with a Binding.List is to use the zoomed-out itemTemplate function to sync up the layout for the items in the zoomed-out view (which actually are the "groups" of the zoomed-in view). The zoomed-out itemTemplate should use the "group" data to render the items of that group in the smaller size. You can figure out what's in that group either by simply keeping a separate array of the items, or you can ask the itemDataSource of the zoomed in view.

    Alternately, you can write your own VirtualizedDataSource to forward the data from the items to the groups, and you can get the correct information in the zoomed out view without using another data structure to sync up the views.

    Hope this helps,

    -Sean Lee

    Tuesday, July 10, 2012 11:00 PM