locked
Programmatically setting semantic zoom zoomedOut property

    Question

  • When programmatically setting the zoomedOut property (to true), before or after setting the datasources for the grouped and plain document list view, I get an exception in ui.js:

    Exception was thrown at line 16431, column 13 in ms-appx://microsoft.winjs.0.6.debug-8wekyb3d8bbwe/js/ui.js
    0x800a138f - JavaScript runtime error: Unable to get value of the property 'cx': object is null or undefined

    There's a layout set on both listviews, zooming manually works just fine. Any tips?

    Best regards

    Marcus

    Friday, April 27, 2012 8:50 AM

Answers

  • Another Forum customer responded to me with this solution.  Thanks Tim!

    I just wanted to let you know that I had the same error. In my case it happend when you have activated the listview but not the surrounding semanticZoom
    In code:

    <div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom"> 
               <div id="aangiftesListView"
                   data-win-control="WinJS.UI.ListView"
                   data-win-options="{itemTemplate:aangifteTemplate,
                       groupHeaderTemplate: headerTemplate,
                       layout: {type: WinJS.UI.GridLayout},
                       selectionMode: 'single' }">
               </div>  
               <div id="zoomedOutListView"
                   data-win-control="WinJS.UI.ListView"
                   data-win-options="{itemTemplate: semanticZoomTemplate, 
                                       selectionMode: 'none', 
                                       tapBehavior: 'invoke', 
                                       swipeBehavior: 'none',
                                       layout: {type: WinJS.UI.GridLayout}}">
               </div>
           </div>
    
                   ListViewModule.listView.forceLayout();
                   ListViewModule.semanticZoom.forceLayout(); // if this line isn't here : layout missing error
    

    In retrospective, the error message is not that bad but a hint about how to solve it would be nice :)
    Grtz,
    Tim.


    Jeff Sanders (MSFT)

    Friday, August 24, 2012 12:28 PM
    Moderator

All replies

  • Hi Marcus,

    I cannot reproduce this.  I used the Listview Grouping & Semantic Zoom Sample and added a button to it.

    function onBtnGoClick(event){
        var semZoom = document.getElementById("semanticZoomDiv").winControl;
        semZoom.zoomedOut = !semZoom.zoomedOut;
    }
    

    Switched to the 2nd scenario and I can toggle the semantic zoom without a problem.


    Jeff Sanders (MSFT)

    Friday, April 27, 2012 2:24 PM
    Moderator
  • Hi Jeff,

    thanks for the quick reply. The problem only seems to occur when trying to programmatically toggle the zoomedOut property immediately after setting the datasources on the listviews. Even just doing a

    msSetImmediate(function() {
      semanticZoom.zoomedOut = true;
    });
    

    is sometimes (though unfortunately not on every run) enough to circumvent the problem. Maybe the SemanticZoom control needs to await some operation in the ListView so it can fetch some data from the datasource?

    Friday, April 27, 2012 2:40 PM
  • Without debugging your code it is difficult to tell.  Do you always want the view zoomed out?  Can you just set the property in your HTML?

    <div data-win-control="WinJS.UI.SemanticZoom" data-win-options="{ zoomedOut : true}" ></div>


    Jeff Sanders (MSFT)


    Friday, April 27, 2012 3:10 PM
    Moderator
  • Hi Jeff,

    unfortunately that is not an option because I want to have different behaviours depending on where the user enters the page from. Currently the zoomedOut property is an option that is passed to the page. For now I'll have to make do with a timeout, I'll look further into it if there are problems with that.

    All the best

    Marcus

    Monday, April 30, 2012 7:09 AM
  • We were just thinking that this problem may be a follow-up problem to where we are occasionally seeing the message "Promise error: Layout is not initialized." repeatedly in the log with no idea where it may originate from.

    Update: I somewhat changed the navigation and application workflow so that it is now ok to always start with a zoomedOut view, so this problem isn't that important anymore.

    I'd still like to know where those "Layout is not initialized" errors could come from. Layout-wise there's nothing special going on here. I tried setting no layout, a new WinSJ.UI.GridLayout() and setting it via "{ layout : {type: WinJS.UI.GridLayout}}" in data-win-options - always the same Promise error gets displayed.

    Monday, April 30, 2012 8:51 AM
  • Hi Marcus,

    I am glad you were able to work around your problem.  Would it be possible for me to get a repro of the problem from you?  You can send me an intial email from here http://blogs.msdn.com/jpsanders/contact.aspx

    -Jeff


    Jeff Sanders (MSFT)

    Monday, April 30, 2012 11:53 AM
    Moderator
  • Another Forum customer responded to me with this solution.  Thanks Tim!

    I just wanted to let you know that I had the same error. In my case it happend when you have activated the listview but not the surrounding semanticZoom
    In code:

    <div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom"> 
               <div id="aangiftesListView"
                   data-win-control="WinJS.UI.ListView"
                   data-win-options="{itemTemplate:aangifteTemplate,
                       groupHeaderTemplate: headerTemplate,
                       layout: {type: WinJS.UI.GridLayout},
                       selectionMode: 'single' }">
               </div>  
               <div id="zoomedOutListView"
                   data-win-control="WinJS.UI.ListView"
                   data-win-options="{itemTemplate: semanticZoomTemplate, 
                                       selectionMode: 'none', 
                                       tapBehavior: 'invoke', 
                                       swipeBehavior: 'none',
                                       layout: {type: WinJS.UI.GridLayout}}">
               </div>
           </div>
    
                   ListViewModule.listView.forceLayout();
                   ListViewModule.semanticZoom.forceLayout(); // if this line isn't here : layout missing error
    

    In retrospective, the error message is not that bad but a hint about how to solve it would be nice :)
    Grtz,
    Tim.


    Jeff Sanders (MSFT)

    Friday, August 24, 2012 12:28 PM
    Moderator