Dynamic CSS for ListItems in RadListView

uiux

#1

Hi,

I am trying to implement a ticker as shown below using RadListView. In the Listview, based on the %change, say if it is +ve i want to make it green and red if it is -ve.

I tried to implement this using the itemLoading event, but it seems to be not working as desired as you can see in my above screenshot. Also, when I scroll, some of the greens and reds are flickering between green or red. Can anyone let me know what’s going wrong

Below is my code

function onItemLoading(args)
{
    //console.log(args);
    var percentChange = args.object.getItemAtIndex(args.index);

    var label = args.object.getViewById('percentchange');
    var border = args.object.getViewById('borderColor');

    if(Number(percentChange.percent_change_24h) > 0)
    {
        border.borderColor = '#00A86B';
        label.color = '#00A86B';
    }else
    {
        border.borderColor = '#FF0000';
        label.color = '#FF0000';
    }
    
}
<lv:RadListView id="marketview" class="list-group" items="{{ coinlist }}" row="0" loadOnDemandMode="Auto" loadMoreDataRequested="onLoadMoreItemsRequested" pullToRefresh="true" row="1" pullToRefreshInitiated="onPullToRefreshInitiated" itemLoading="onItemLoading"> 


            <StackLayout orientation="vertical">
                <GridLayout class="coin-list-grid" rows="auto" columns="auto, *, auto, auto">

                    <Label id="rank" class= "label-rank coin-list-txt" text="{{ rank }}" row="0" col="0" width="40"/>
                    <StackLayout orientation="horizontal" row="0" col="1" textAlignment="left">
                        <Image src="{{ '~/icons/' + id + '.png'}}" height="16" width="16" class="coin-list-logo"></Image>
                        <Label text="{{ name }}" class="label-coin-name coin-list-txt"  />
                    </StackLayout>
                    <Border id="borderColor" borderRadius="0" borderWidth="2" borderColor="#FF0000" row="0" col="2" width="100">
                        <Label text="{{ price_usd }}" class="label-price coin-list-txt"  textAlignment="center"/>
                    </Border>
                    <Label id="percentchange" text="{{ percent_change_24h + '%' }}" class="label-24hr coin-list-txt" row="0" col="3" textAlignment="right" width="70"/>

                </GridLayout>
                <StackLayout height="2" backgroundColor="#d9d9db"/>
            </StackLayout>  
            
        </lv:RadListView.itemTemplate>

Thanks for your help


#2

Transform your data object with all required properties / values, then simply bind it in template.


#3

For anyone looking for similar functionality, I was able to solve this using expressions in my UI XML file.

<Border id="borderColor" borderRadius="0" borderWidth="2" borderColor="{{ (percent_change_24h > 0)? '#00A86B': '#FF0000' }}" row="0" col="2" width="100">
                        <Label text="{{ price_usd }}" class="label-price coin-list-txt"  textAlignment="center"/>
                    </Border>
<Label id="percentchange" text="{{ percent_change_24h + '%' }}" color="{{ (percent_change_24h > 0)? '#00A86B': '#FF0000' }}" class="label-24hr coin-list-txt" row="0" col="3" textAlignment="right" width="70"/>