RadListView Remove Background color

[Nicola]

I would like the RadListView to not render a background color at all. I've tried setting backgroundColor="transparent" but not luck. is it possible?

<RadListView [items]="letters" rows="0" width="30" backgroundColor="transparent">
      <ng-template tkListItemTemplate let-item="item">
        <Label class="letter" [class.is-active]="item.active" [text]="item.letter" (tap)="onLetterClick(item.letter)" backgroundColor="transparent"></Label>
      </ng-template>
 </RadListView>

[Nikolay Tsonev]

Hi,
Thank you for your interest in UI for NativeScirpt.

Setting up the backgroundColor to transparent should remove the color for Android, unfortunately, this will not be applied, while building the app for iOS.
Regarding that, I logged a new issue in the --feedback repository here. You could keep track on in for further info about the case and when it will be fixed.
As a workaround at this time, you could handle the RadListView itemLoading event and to set a trasperant color for every cell of the view by accessing the native backgroundView property. For example:

HTML

<GridLayout backgroundColor="green" tkExampleTitle tkToggleNavButton>
    <RadListView backgroundColor="transparent" (loaded)="rdlistloaded($event)" (itemLoading)="onItemLoading($event)" [items]="dataItems">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical">
                <Label class="nameLabel" [text]="item.name"></Label>
                <Label class="descriptionLabel" [text]="item.description"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

TypeScript

import { Component, OnInit } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { DataItem } from "../dataItem";
import { DataItemService } from "../dataItem.service";
import {RadListView} from "nativescript-telerik-ui-pro/listview"
import {Color} from "color";
import {isIOS} from "platform"

@Component({
    moduleId: module.id,
    selector: "tk-listview-getting-started",
    providers: [DataItemService],
    templateUrl: "listview-getting-started.component.html",
    styleUrls: ["listview-getting-started.component.css"]
})
// >> listview-getting-started-angular
export class ListViewGettingStartedComponent implements OnInit {
    private _dataItems: ObservableArray<DataItem>;

    constructor(private _dataItemService: DataItemService) {
    }

    get dataItems(): ObservableArray<DataItem> {
        return this._dataItems;
    }

    ngOnInit() {
        this._dataItems = new ObservableArray(this._dataItemService.getDataItems());
    }


    rdlistloaded(args){
    }
    onItemLoading(args){
        console.log("onItemLoading");
        if(isIOS){
            console.log(args.ios);
            var newcolor = new Color(20,255,0,0);
            args.ios.backgroundView.backgroundColor = newcolor.ios;
        }

    }
}

Hope this helps

Regards,
nikolay.tsonev
Progress Telerik

[Nicola]

Nikolay,

Thank you that worked great! Btw on iOS when I call scrollToIndex if I have a lot of items it doesn't scroll consistently to the ones towards the ends. Have you seen this before? Should I create a quick video for it?

[Nikolay Tsonev]

Hello Nicola,

Could you provide some info about the time you are calling the scrollToIndex method? It would help if you could send us sample project, which could be debugged locally or at least some code snippets.

In the meantime, what I could suggest is to scroll to the wanted position on ngAfterViewInit event. For example:

ngAfterViewInit(){
            this.listViewComponent.listView.scrollToIndex(<position>);

    }

This should allow you to scroll in the ListView.

I look forward to hearing from you.
Regards,
nikolay.tsonev
Progress Telerik

[Nicola]

Will do I'll create a separate ticket for it.

[Nikolay Tsonev]

Hi,
Indeed you could open a new ticket. The issue with the scrillToIndex method is not related to the previous one and it will be better if we separate the two cases.

Let me know if this is applicable to you and thank you in advance for your cooperation 


Regards,
nikolay.tsonev
Progress Telerik