Change Background Colour of Listview Item dependent on value


#1

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" >
				<ListView.itemTemplate>
					<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" />
							</GridLayout>
						</StackLayout>
					</StackLayout>
				</ListView.itemTemplate>
			</ListView>
		</ScrollView>
		</StackLayout>

My Javascript is here

exports.pageLoaded = function (args) {
    page = args.object;
    var league = args.object.page.getViewById("leagueheader");
    league.text = "Monday Division "+appSettings.getString("Div");
    if (fixtureList.length > 0) {
        while (fixtureList.length) {
            fixtureList.pop();
        }
    }
    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++) {
            fixtureList.push({
                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) {
        alert(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.


#2

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.


#3

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.


#4

Got it sorted thanks for your help.


#5

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!