RadListView Remove Background color

Thread is closed for posting
6 posts, 0 answers
  1. Nicola
    Nicola avatar
    13 posts
    Member since:
    Mar 2017

    Posted 29 May 2017 Link to this post

    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>
  2. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 30 May 2017 Link to this post

    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 nativescript-ui-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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Nicola
    Nicola avatar
    13 posts
    Member since:
    Mar 2017

    Posted 07 Jun 2017 in reply to Nikolay Tsonev Link to this post

    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?

  4. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 07 Jun 2017 Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  5. Nicola
    Nicola avatar
    13 posts
    Member since:
    Mar 2017

    Posted 07 Jun 2017 in reply to Nikolay Tsonev Link to this post

    Will do I'll create a separate ticket for it.
  6. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 08 Jun 2017 Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top