JSON, Templates, and Binding to Kendo Mobile Lists

2 posts, 0 answers
  1. Damien
    Damien avatar
    8 posts
    Member since:
    Jan 2013

    Posted 03 Feb 2013 Link to this post

    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.
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 05 Feb 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top