locked
ListView does not load when placed in a Flyout

    Question

  • Hi,

    I had a piece of code that worked perfectly in Win8 and VS Release Preview but that does not work anymore in RTM.

    The scenario is the following: I have a button in the appbar and when I click on it I open a Flyout that contains a ListView. The same piece of code works if I put the ListView control and its template outside the flyout. Very strange behavior....

    I have a VS 2012 solution that shows this behavior.

    Any idea of what could have changed since the RP bits?

    Thanks.


    Omid Bayani - KwypeSoft


    • Edited by Omid Bayani Monday, August 20, 2012 10:11 AM
    Monday, August 20, 2012 10:09 AM

Answers

  • Hi Omid,

    Posting for others to see:

    before:

       ready: function (element, options) {
    
                //This ListView (outside of the Flyout) works perfectly.
                var outsideFlyoutListView = element.querySelector("#outsideFlyoutListView").winControl;
                outsideFlyoutListView.itemTemplate = element.querySelector("#colorsTemplate");
                
                //This ListView (inside the Flyout) doesn't work while it worked perfectly in the Win8/VS12 RP version.
                //I tested by putting the values of the template and datasource directly in the HTML without success.
                //It does not work neither when setting the value in the Javascript directly.
                var insideFlyoutListView = element.querySelector("#insideFlyoutListView").winControl;
                insideFlyoutListView.itemTemplate = element.querySelector("#colorsTemplate");
                insideFlyoutListView.itemDataSource = Test.Data.colors.dataSource;
                insideFlyoutListView.layout = new WinJS.UI.GridLayout();
                insideFlyoutListView.forceLayout();
            }


    ready: function (element, options) {
    
                //This ListView (outside of the Flyout) works perfectly.
                var outsideFlyoutListView = element.querySelector("#outsideFlyoutListView").winControl;
                outsideFlyoutListView.itemTemplate = element.querySelector("#colorsTemplate");
                
                //This ListView (inside the Flyout) doesn't work while it worked perfectly in the Win8/VS12 RP version.
                //I tested by putting the values of the template and datasource directly in the HTML without success.
                //It does not work neither when setting the value in the Javascript directly.
                var insideFlyoutListView = element.querySelector("#insideFlyoutListView").winControl;
                insideFlyoutListView.itemTemplate = element.querySelector("#colorsTemplate");
                insideFlyoutListView.itemDataSource = Test.Data.colors.dataSource;
                insideFlyoutListView.layout = new WinJS.UI.GridLayout();
                
                element.querySelector("#colorFlyout").addEventListener("beforeshow", function (event) {
                    var insideFlyoutListView = element.querySelector("#insideFlyoutListView").winControl;
                    insideFlyoutListView.forceLayout();
                });
    
            }
    

    The change is the forceLayout() when the listview is shown. For efficiency the list view is not laid out if it is not visilble. That is why you now have to do this in RTM.

    -Jeff


    Jeff Sanders (MSFT)

    Monday, August 20, 2012 7:49 PM
    Moderator

All replies

  • Nope!

    Can you share a simple repro of this?

    -Jeff


    Jeff Sanders (MSFT)

    Monday, August 20, 2012 2:21 PM
    Moderator
  • Hi Jeff,

    I have a VS solution that shows the issue. Can I post it somewhere or send it to an email address?


    Omid Bayani - KwypeSoft


    • Edited by Omid Bayani Monday, August 20, 2012 3:33 PM
    Monday, August 20, 2012 2:28 PM
  • Sure!

    Contact me here http://blogs.msdn.com/jpsanders/contact.aspx


    Jeff Sanders (MSFT)

    Monday, August 20, 2012 2:46 PM
    Moderator
  • Jeff,

    I posted a request on the blog but I could not join the zip file.


    Omid Bayani - KwypeSoft


    • Edited by Omid Bayani Monday, August 20, 2012 3:33 PM
    Monday, August 20, 2012 2:56 PM
  • Hi Omid,

    Posting for others to see:

    before:

       ready: function (element, options) {
    
                //This ListView (outside of the Flyout) works perfectly.
                var outsideFlyoutListView = element.querySelector("#outsideFlyoutListView").winControl;
                outsideFlyoutListView.itemTemplate = element.querySelector("#colorsTemplate");
                
                //This ListView (inside the Flyout) doesn't work while it worked perfectly in the Win8/VS12 RP version.
                //I tested by putting the values of the template and datasource directly in the HTML without success.
                //It does not work neither when setting the value in the Javascript directly.
                var insideFlyoutListView = element.querySelector("#insideFlyoutListView").winControl;
                insideFlyoutListView.itemTemplate = element.querySelector("#colorsTemplate");
                insideFlyoutListView.itemDataSource = Test.Data.colors.dataSource;
                insideFlyoutListView.layout = new WinJS.UI.GridLayout();
                insideFlyoutListView.forceLayout();
            }


    ready: function (element, options) {
    
                //This ListView (outside of the Flyout) works perfectly.
                var outsideFlyoutListView = element.querySelector("#outsideFlyoutListView").winControl;
                outsideFlyoutListView.itemTemplate = element.querySelector("#colorsTemplate");
                
                //This ListView (inside the Flyout) doesn't work while it worked perfectly in the Win8/VS12 RP version.
                //I tested by putting the values of the template and datasource directly in the HTML without success.
                //It does not work neither when setting the value in the Javascript directly.
                var insideFlyoutListView = element.querySelector("#insideFlyoutListView").winControl;
                insideFlyoutListView.itemTemplate = element.querySelector("#colorsTemplate");
                insideFlyoutListView.itemDataSource = Test.Data.colors.dataSource;
                insideFlyoutListView.layout = new WinJS.UI.GridLayout();
                
                element.querySelector("#colorFlyout").addEventListener("beforeshow", function (event) {
                    var insideFlyoutListView = element.querySelector("#insideFlyoutListView").winControl;
                    insideFlyoutListView.forceLayout();
                });
    
            }
    

    The change is the forceLayout() when the listview is shown. For efficiency the list view is not laid out if it is not visilble. That is why you now have to do this in RTM.

    -Jeff


    Jeff Sanders (MSFT)

    Monday, August 20, 2012 7:49 PM
    Moderator