CODEWITHSUNDEEP
listviewwindows-8microsoft-metrowinjs
pho79
pho79

Reputation: 1785

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

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.

Upvotes: 1

Views: 1405

Answers (2)

aLx13
aLx13

Reputation: 781

As @wloescher pointed out, you can use:

listViewElem.layout = new WinJS.UI.GridLayout({ orientation: 'horizontal', maxRows: 1 });

Upvotes: 0

pho79
pho79

Reputation: 1785

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

Upvotes: 2

Related Questions