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

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.