Semantic zoom not working in HTML/JS Windows 8 list view

Question

Hi,

I am trying to implement semantic zoom using WINJS(HTML/JS) list view. But I am unable to implement semantic zoom functionality. here is what I have followed as per instrunctions in different sites and codeShow http://codeshow.codeplex.com/SourceControl/changeset/view/68a76f3ddca1650a339e39f4f0950296ed36cc67#codeSHOW/demos/semanticzoom/semanticzoom.css

1. Open VS 2012

2. Create a new Windows 8 Java script "Grid App" project.

3. Run the app and you should see the basic grid layout with static data.

4. Now, In the groupedItems.html file, I have added the semantic zoom control as per the article.

 <div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom"> 
                <div class="groupeditemslist win-selectionstylefilled" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>

                <div id="zoomedOutListView" data-win-control="WinJS.UI.ListView" 
                    style="border:solid 1px green;" data-win-options="{selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }"
                ></div>
            </div>

 5. Add this HTML after the "itemTemplate" div

 <!-- Template for the zoomed out view of the semantic view. -->
    <div id="semanticZoomTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
        <div class="semanticZoomItem">
            <h1 class="semanticZoomItem-Text" data-win-bind="innerText: title"></h1>
        </div>
    </div>

In groupedItems.Js file, in _initialize_Layout function, add the below data binding source to semantic zoom

var semanticZoom = document.getElementById('zoomedOutListView');
                semanticZoom.itemDataSource = Data.groups.dataSource;
                semanticZoom.itemTemplate = document.getElementById('semanticZoomTemplate');
                semanticZoom.layout = new ui.ListLayout();

Finally, add this css to your groupedItems.css file:

groupeditemspage .semanticzoom .win-semanticzoom,
groupeditemspage .semanticzoom .win-listview {
    height: 100%;
}

groupeditemspage .semanticzoom #zoomedinlist .win-item img {
    width: 140px;
    height: 105px;
}

groupeditemspage .semanticzoom #zoomedoutlist .win-item {
    width: 200px;
    height: 200px;
    background-color: green;
    color: white;
    font-weight:bold;
    font-size: large;
    padding: 10px;
}

After that, run the app and you will see the grid showing half of the page (Not sure why the layout is changing). Now, click on "-" symbol which is equivalent to semantic zoom in windows 8 at the right. That's it...the app crashes and breaks in UI.js file with an error.

Any help is appreciated..I have searched many forums and couldn't get any help. Everywhere I could see samples with some static data, but couldn't find anywhere with Grip App approach.

Answer 1

Hello,

I am taking a look at the repro and will get back on this thread...

---

@prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz

Answer 2

The issue happens because of binding the data to the Semantic Zoom rather than the ZoomedOut ListView. If the following JS code is used, the SemanticZoom will work as expected:

            var zoomedOutList = document.getElementById("zoomedOutListView").winControl;
            zoomedOutList.itemDataSource = Data.groups.dataSource;
            zoomedOutList.itemTemplate = document.getElementById("semanticZoomTemplate");

---

@prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz

Answer 3

Thanks Prashant. Appreciate your help.

After adding ".WinControl" attribute to the zoomedOutList and making the group.Key from Integer to string, semantic zoom is working fine.