Search code examples
kendo-mobile

Kendo grouped-listview


I would like to know how to modify the example grouped listview that comes with kendo mobile. The list view shows both flat view and grouped view. How do you make the items in the list view clickable so they will navigate to a different web page when clicked?

I've tried creating a template with an anchor tag and href and it works in IE but does nothing when clicked on the android phone.

//The Template

<script type="text/x-kendo-tmpl" id="template">
    <div class="myclass">
        <a href="TenantView.html">#:name#</a>
    </div>
</script>


//The data binding

function mobileListViewDataBindInitGrouped() {
        $("#grouped-listview").kendoMobileListView({
            dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),
            template: kendo.template($("#template").html()),
            fixedHeaders: true
        });
    }

Thanks


Solution

  • After some trial and error I have found that if i remove the div tag in the template, the anchor tags work correctly. Not sure if this is a bug or by design. Thanks Whizkid747 for your help.

    //Updated Template (removed <div>)
    <script type="text/x-kendo-tmpl" id="template">
       <a href="TenantView.html">#:name#</a>
    </script>