Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

WinJS: use the same data in the zoomed out and zoomed in view.

DZone's Guide to

WinJS: use the same data in the zoomed out and zoomed in view.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

The Semantic zoom let you display your data in a zoomed out and zoomed in way. It’s really fine when your data is grouped but sometimes you need to display a non-grouped data just in a different way with a different template.

For example, we did it in the Larousse Illustré Windows 8 app to display media in a different way when zoomed in than zoomed out :zoomedInOut

This is exactly the same data but shown in a different fashion. The user choose the one it prefers.

But, if you try to set the same data source to the both listview in your semantic zoom, your app will crash.

An exception is raised because a method “itemFromDescription” is not defined.

The solution to make everything works is to define this method as below:

var zoomedInListView = document.getElementById("zoomedInListView").winControl;
var zoomedOutListView = document.getElementById("zoomedOutListView").winControl;
 
zoomedInListView.itemDataSource = myList.dataSource;
zoomedInListView.itemDataSource.itemFromDescription
    = function (it) { return WinJS.Promise.wrap({ index: 0 }); };
 
zoomedOutListView.itemDataSource = myList.dataSource;
zoomedOutListView.itemDataSource.itemFromDescription
    = function (it) { return WinJS.Promise.wrap({ index: 0 }); };

I hope this will help you :)

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}