How to display a listView vertically with multi columns?

Question

Hi,
Refer to the sample HTML
ListView item templates sample. If I want to display the listView (in scenario1.html) in three columns with vertical scroll bar, what should  I do?
I try to change 'layout' property of listView from 'GridLayout' to 'ListLayout' in scenario1.html, like this:
<div id="listView"
class="win-selectionstylefilled"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: myData.dataSource,
itemTemplate: regularListIconTextTemplate,
selectionMode: 'none',
tapBehavior: 'none',
swipeBehavior: 'none',
layout: { type: WinJS.UI.ListLayout }
}">
</div>
The listView will be vertical but with only one column. 

Answer 1

You should modify your Template to something like:
<table >
<tbody>
<tr data-win-control="WinJS.Binding.Template" id="regularListIconTextTemplate" >
<td data-win-bind="textContent:a"></td>
<td data-win-bind="textContent:b"></td>
<td data-win-bind="textContent:c"></td>
</tr>
</tbody>
</table>
And position that Table where you want the items to appear. I put some binding examples (attributes a,b and c) but you use whatever attributes and content you need in each column.
For a working example I used the following HTML on an empty "default.html":
<div id="listView" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ layout: { type: WinJS.UI.ListLayout } }">
</div>
<table >
<tbody>
<tr data-win-control="WinJS.Binding.Template" id="regularListIconTextTemplate" >
<td data-win-bind="textContent:a"></td>
<td data-win-bind="textContent:b"></td>
<td data-win-bind="textContent:c"></td>
</tr>
</tbody>
</table>
Then on the default.js I used:
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
args.setPromise(WinJS.UI.processAll());
var chartlines = new Array();
chartlines.push({a: '1-1', b: '1-2', c: '1-3' });
chartlines.push({ a: '2-1', b: '2-2', c: '2-3' });
chartlines.push({a: '3-1', b: '3-2', c: '3-3' });
chartlines.push({a: '4-1', b: '4-2', c: '4-3' });
var listView = document.getElementById("listView").winControl;
listView.itemTemplate = document.getElementById("regularListIconTextTemplate");
listView.itemDataSource = (new WinJS.Binding.List(chartlines)).dataSource;
Hi,
Essentially, this method creates an one-column listView, too. My purpose is to create a vertical listView with three items in each row.
If I add a rotation style to the listView in 'scenario1.html' of the  sample HTML
ListView item templates sample, like this:
<div style ="transform:rotate(90deg)" id="listView"
class="win-selectionstylefilled"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: myData.dataSource,
itemTemplate: regularListIconTextTemplate,
selectionMode: 'none',
tapBehavior: 'none',
swipeBehavior: 'none',
layout: { type: WinJS.UI.GridLayout }
}">
</div>
The listView seems to 'vertical', and is like what I want. But, I do not change the listView essentially. The listView I want is that which layouts vertically and has three separated items in each row.