WinJS Repeater and ms-grid: Add ms-grid-row value with JavaScript - microsoft-metro

Question

I have a series of divs which are displayed as an -ms-grid. These are outputted using the WinJS.UI.Repeater object.
I need to assign the -ms-grid-row value for the current iteration dynamically.
How would I go about doing this?
Repeater
<div data-win-control="WinJS.UI.Repeater" data-win-options="{template: select('.template')}">
</div>
Repeater Template
<div class="template" data-win-control="WinJS.Binding.Template">
<div class="col1" style="-ms-grid-row:"></div>
<div class="col2" style="-ms-grid-row:"></div>
<div class="col3" style="-ms-grid-row:"></div>
<div class="col4" style="-ms-grid-row:"></div>
</div>
CSS
.grid {
display: -ms-grid;
-ms-grid-columns: (1fr)[4];
-ms-grid-rows: (auto)[1000];
}
.grid .col1 {
-ms-grid-column: 1;
}
.grid .col2 {
-ms-grid-column: 2;
}
.grid .col3 {
-ms-grid-column: 3;
}
.grid .col4 {
-ms-grid-column: 4;
}
Because there could be up to 1000 rows, I need to assign the style inline like this:
Rendered Markup
<div class="col1" style="-ms-grid-row: 1">test</div>
<div class="col2" style="-ms-grid-row: 1">test</div>
<div class="col3" style="-ms-grid-row: 1">test</div>
<div class="col4" style="-ms-grid-row: 1">test</div>
<div class="col1" style="-ms-grid-row: 2">test</div>
<div class="col2" style="-ms-grid-row: 2">test</div>
<div class="col3" style="-ms-grid-row: 2">test</div>
<div class="col4" style="-ms-grid-row: 2">test</div>
But I have no idea how to do this inside the repeater?
Many thanks
Chris

Answer 1

You could try using a converter function like explained here:
http://msdn.microsoft.com/en-us/library/windows/apps/br229809.aspx
for example you can assign a function to the colour of a span and calculate that colour in a function:
<span id="loginName"
data-win-bind="innerText: name; style.color: userType LoginData.userTypeToColor">
</span>
...
WinJS.Binding.processAll(document.getElementById("loginDisplay"), LoginData.login);
WinJS.Namespace.define("LoginData", {
//Data Object
login : { name: "myname", id: "12345678", userType: "admin" },
//Converter function
userTypeToColor: WinJS.Binding.converter(function (type) {
return type == "admin" ? "Green" : "Red";
})
});
I did not test this code with the -ms-grid-row property, but it is worth a try.