Change Background Colour of Listview Item dependent on value


I have a ListView which loads teams from a database and shows the fixture list and works well.

However I would like to change the background colour of all list items if they match a particular team so highlight the fixtures in the list for a particular team.

What event is triggered that would allow be to do this.

My Listview is here;-

<StackLayout orientation="vertical" backgroundColor="#cccccc" width="100%">
			<Label id="leagueheader" text="" class="h1" height="50" horizontalAlignment="center" />
		<ScrollView row="0">
			<ListView id="fixtures" items="{{ fixtures }}" height="100%" width="100%" class="listitem" marginTop="10px" itemLoading="onItemLoading" >
					<StackLayout orientation="horizontal" class="item" horizontalAlignment="left" id="match" class="match">
						<StackLayout id="{{ post_title }}" orientation="vertical" margin="10px">
							<GridLayout id="teams" columns="auto * *" rows="40,25,25" margin="20px" backgroundColor="#eeeeee" height="180">
								<Label text="{{ start }}" class="h2" row="0" col="0" />
								<Label text="{{ post_title }}" class="h2" row="1" col="0" id="title"/>
								<Label text="{{ venue }}" class="h3" row="2" col="0" />

My Javascript is here

exports.pageLoaded = function (args) {
    page = args.object;
    var league ="leagueheader");
    league.text = "Monday Division "+appSettings.getString("Div");
    if (fixtureList.length > 0) {
        while (fixtureList.length) {
    var unixtime = Math.round(+new Date() / 1000);
    var viewModel = new observable.Observable();
    var Div = appSettings.getString("Div");
    var sqlstr = "https://myURL/getFilterCalendar.php?day=Monday&mytime=1522316312&show=no&div="+Div
    http.getJSON(sqlstr).then(function (r) {
        for (i = 0; i < r.length; i++) {
                post_title: r[i].post_title,
                start: r[i].start,
                venue: r[i].venue,
                unixstart: r[i].unixstart
            const source = fromObject({
                fixtures: fixtureList
           source.set = ("fixtures", fixtureList);
            page.bindingContext = source;
    }, function (e) {

start contains the match date
post_title contains the match details so would be something like “Div 2 Team A v Team B”
venue contains the match venue.

I would like all occurrences of Team B highlighted in the listview by a change of background colour if possible.


Usually for this kind of thing you use conditional logic to set the css class. For example:

<Label class="{{ rideWithGpsInstalled ? 'appstatus-installed' : 'appstatus-absent'}}" text="{{ rideWithGpsInstalled ? 'Installed' : 'Not Installed' }}" />

If necessary, you could add a property to compare against.


Thanks for your help.

In this instance is rideWithGpsInstalled a call to a function that returns true or false, I’ve not used this logic before so could you expand on the detail.


Got it sorted thanks for your help.


For the benefit of others… RideWithGPSInstalled is a boolean that’s part of the ViewModel. This example is not from a ListView, however. In a ListView the binding context is the array entry, so you could either test existing array attributes, or add a property to the array object specifically for such tests.

And something else I’ve found… ListViews have problems with formatting on iOS. In multiple cases I was able to replace a ListView with a Repeater and bypassed the formatting problems.

Good luck!