Access data array in Kendo template

Question

I have a Kendo mobile view that takes data in the form of a JSON feed, and then displays it using a Kendo template.

I want to create a fairly complex grid out of this JSON feed, and the only way I can think to do that is to wrap certain items in a div with a class name that varies depending on its position in the array.

How can I access the array object inside a Kendo template?

The docs give this example:

For example, to display a list of items using JavaScript and Kendo UI templates, we use the following syntax:

<script id="javascriptTemplate" type="text/x-kendo-template">
    <ul>
    # for (var i = 0; i < data.length; i++) { #
        <li>#= data[i] #</li>
    # } #
    </ul>
</script>

If I do a console.log like this within my template:

# console.log(data); #

I can see that data does reference the JSON, but it's not usable (data.length) returns undefined, so that example does nothing.

Answer 1

You're treating the JSON object like a list. It's an object.

var count = Object.keys(data).length;
alert(count);

So we know that Object.keys(data).length counts all of the keys. So its stand to reason we can select those keys individually. Object.keys(data)[i]. You can loop over it and wrap it with an IF for every 2n+2 items.

for (var i = 0; i < Object.keys(data).length; i++) {
    if (i%2 == 0) {
        # this will do something for every even element
    };
}

I would suggest wrapping everything with a class (so no if statement). And then using the CSS selector 2n+2 (if you're trying to accomplish something with CSS).

Answer 2

I suggest you use CSS selector nth-child.

div:nth-child(2n){
 ...
}