Differiante each alternating item in a MobileListView

4 posts, 0 answers
  1. Per Lindsø
    Per Lindsø avatar
    21 posts
    Member since:
    Jul 2007

    Posted 14 Mar 2013 Link to this post


    Can't see "altTemplate" implemented in MobileListView. What is the proper way to give each second row a diffenrent color?

  2. Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 18 Mar 2013 Link to this post

    Hi Per,

    I am afraid that the mobile ListView does not support altRowTemplate, however you can easily give each second row a different colour via CSS.
    .km-listview > li:nth-child(2n) {
        background-color: #CCCCCC;

    In case you need a more complex customization, such as displaying different dataItem fields, you may use JavaScript condition inside the mail template. For more information please check the template overview topic.

    I hope this will help.

    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. Jim
    Jim avatar
    6 posts
    Member since:
    Apr 2014

    Posted 06 Mar 2016 in reply to Alexander Valchev Link to this post

    I have a similar issue, but my listview is the 2nd view on a page that is dynamically created, so I want to do this with jquery.  I tried this:

    $('#tasklist-listview li:nth-child(odd)').addClass('myaltclass');

    But the class was applied to all li's.  I ran just $('#tasklist-listview li:nth-child(odd)') in the chrome console, and it appeared to return just the alternate li's.    Below is the code I use to create the listview. 


            dataSource: dataSource,
            template: kendo.template($("#listviewtemplate").text()),
            headerTemplate: "<h3>#:value#</h3>",
            filterable: {
                field: "Regarding",
                operator: "startswith"

  4. Petyo
    Petyo avatar
    2444 posts

    Posted 09 Mar 2016 Link to this post


    the approach should work in general. Perhaps this is some sort of a timing issue? The jQuery command should be executed after the listview is bound. Another thing which may be a problem in this approach is the filterable - the filtering may leave only certain items, resulting in uneven distribution of alternating items. If possible, please use the CSS-only approach we gave below. 

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top