'Grid Application' HTML/JavaScript template with support for 'Semantic Zoom'?

Question

I started build a prototype using the 'Grid Application' HTML/JavaScript template.  At this point I would like to a semantic zoom to the 'groupedItemsPage.html'.

I see a couple of examples showing off semantic zoom, including 'JS\HTML ListView grouping and SemanticZoom sample\JavaScript\Controls_GroupingandSemanticZoom.jsproj'

But these examples use 

Is there an example that would show how to implement semantic zoom through JavaScript, as the data binding in a 'Grid Application' HTML/JavaScript template is done in groupedItemsPage.html ?

Such sample code would answer questions like:

1. Do we need two separate listviews in groupedItemsPage.html?
2. In JavaScript, how do I detect when the user activated 'semantic zoom' (two finger pinch or ctrl + "+/-", or ctrl + mouse wheel)
3. In JavaScript, what should I update in groupedItemsPage.js / updateLayout?

Thanks for any help -
e

Answer 1

Hi Emmanuel,

There are some good samples for Semantic Zoom:

HTML ListView grouping and SemanticZoom sample

HTML SemanticZoom for custom controls sample

1. yes

2. the control handles this for you

3. see the sample and you can integrate this with you code.

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Hi Jeff,

Thanks, but those are the two examples I mentioned in my question. Both of these examples use html directly.

I am wondering how to make a semantic zoom control work in JavaScript, since the 'Grid Application' template binds the items to the appropriate listview in Javascript in groupedItemsPage.html and groupedItemsPage.js.

Answer 3

I don't believe we have a pure JS example of this, sorry!

---

Jeff Sanders (MSFT)