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

Answer 1

Nope!

Can you share a simple repro of this?

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

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

Answer 3

Sure!

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

---

Jeff Sanders (MSFT)

Answer 4

Jeff,

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

---

Omid Bayani - KwypeSoft

Answer 5

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)