Over a million developers have joined DZone.

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

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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;
    = function (it) { return WinJS.Promise.wrap({ index: 0 }); };
zoomedOutListView.itemDataSource = myList.dataSource;
    = function (it) { return WinJS.Promise.wrap({ index: 0 }); };

I hope this will help you :)

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}