Differiante each alternating item in a MobileListView

[Per Lindsø]

Hi,

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

[Alexander Valchev]

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.

Regards,
Alexander Valchev
the Telerik team

[Jim]

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. 

 

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

[Petyo]

Hi,

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. 

Regards,
Petyo
Telerik