Question

I am using the JQuery initialization syntax.

As of now, I create my desired listview links like this:

<li data-icon="featured"><a>My Listview Item Link</a></li>

This gives me a listview link with the “featured” font icon on the left, followed by the link text, followed by a small arrow on the right.

What I am trying to do is convert to using templates, but I’m having trouble achieving the same result as describe above. Here’s what I have so far:

<script type="text/x-kendo-template" id="mListviewTemplate">
    <a data-role="listview-link">${name}</a>
</script>

This results in what I need, except for the missing font icon. The documentation states I can add an <img> element to get a font icon, but it’s a bit vague and with no example.

Thank you!

Answer 1

Just choose an element and add the .km-icon and .km-featured css classes to it.

<script type="text/x-kendo-template" id="mListviewTemplate">
    <span class="km-icon km-featured"></span><a data-role="listview-link">${name}</a>
</script>

You can inspect the icons at kendo’s mobile demo page and see that this is exactly how it is rendered.