Can one programmatically set the layout of a ListView in WinJS / Windows 8 Apps?

Question

I have a ListView template that's being used in several places and I'd like to change the layout type on the fly:

<div class="sorteditemslist" arial-label="sorted items" 
   data-win-control="WinJS.UI.ListView"
   data-win-options="{layout: { type: WinJS.UI.ListLayout}}"
   data-win-bind="winControl.itemDataSource: items.dataSource; winControl.iteminvoked: ItemInvoked;">

The default layout type is WinJS.UI.GridLayout but in certain cases I'd like to change this to a ListLayout.

Answer 1

Yes, this is possible. I was able to get this to work properly with the following code:

var listView = element.querySelector(".sorteditemslist").winControl;
WinJS.ui.setOptions(listView, { layout: { type: WinJS.UI.ListLayout }});

Also, make sure to either pull out the reference to the layout in the template, or handle both cases in code. For more info on the layouts, see the msdn page