This is a migrated thread and some comments may be shown as answers.

JSON, Templates, and Binding to Kendo Mobile Lists

1 Answer 78 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Damien
Top achievements
Rank 1
Damien asked on 03 Feb 2013, 08:27 AM
Hi,

When looking at the Twitter example I have adapted it with my own data.

http://demos.kendoui.com/mobile/listview/pull-with-endless.html

I need to make a slight change:
1. When tapping each 'row' I want it to highlight blue (is there a way I can get this to happen?)
2. When tapping anywhere on the row, it needs to run a function based on id="1" id="2" etc. How do I wrap the entire row with an a href="#" ???? 

Thanks.

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 06 Feb 2013, 05:41 AM
Hi Damien,

Straight to your questions:

  1. When tapping each 'row' I want it to highlight blue (is there a way I can get this to happen?)

    To do that please hook up to the click event of the widget and modify the style of the clicked item. As an example:
    function onClick(e) {
        e.item.toggleClass("listview-selected"); //toggle selection
    }

    You may test this approach here: http://jsbin.com/igolev/2/edit

  2. When tapping anywhere on the row, it needs to run a function based on id="1" id="2" etc. How do I wrap the entire row with an a href="#" ?

    As I explained tapping on an item triggers click event of the ListView. You may obtain the name via e.dataItem parameter of the click event or via custom data attribute. Example of the first approach is presented in the corresponding documentation. The following code snippet demonstrates the second approach:
    <script type="text/x-kendo-template" id="listview-template">
        <a href="\#foo" data-id="#: id #">#: name #</a>
    </script>

    This code snippet also demonstrates how to wrap the entire ListView item in an <a> tag with href attribute.

I hope this helps. 

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ListView (Mobile)
Asked by
Damien
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or