Ability to style ListView's loading indicator, while using load on demand

[LSmint]

How to change the loading item background to transparent in the Radlistview? Currently it set white color in [email protected], only happen in ListViewGridLayout.

[tsonevn]

Hi @LSmint, You can try setting up the backgroundColor property to the RadListView and the Layout used inside the template. For example:

    <RadListView backgroundColor="transparent" (itemLoading)="onItemLoading($event)"  [items]="dataItems">
        <ng-template tkListItemTemplate let-item="item">
            <GridLayout backgroundColor="transparent" class="listItemTemplateGrid">
               <Label [text]="item.title" textWrap="true"></Label>
                        
            </GridLayout>
        </ng-template>

        <ListViewGridLayout backgroundColor="transparent" tkListViewLayout scrollDirection="Vertical" ios:itemHeight="200" spanCount="2"></ListViewGridLayout>
    </RadListView>

For iOS you might need to clear up the color for the item view in code behind as well.

import {Color} from "tns-core-modules/color";
import {isIOS} from "tns-core-modules/platform"
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;
        }
 
    }

[LSmint]

@tsonevn

I have created a sample which include the method you suggested. The item background has changed to the custom colour. However, the loading indicator seems like contains another layer of view with white background colour.

https://play.nativescript.org/?template=play-ng&id=geJdht Step to reproduce:

• Click 'Load more items', you will see the loading indicator background

[tsonevn]

Hi @LSmint, Thank you for the sample project, I reviewed it, and it seems that this is related to a missing functionality, which prevents from setting up the backgroundColor of the indicator, which is shown when the load on demand is used. I will mark this one as a feature request.

[Ahnert1]

I'm not sure if this is a related issue: it seems to be impossible to customize the "Load on Demand" template.

The directive *tkListLoadOnDemandTemplate is supposed to be utilized to customize the template. No matter what you put in this layout, there will still be another "Load More Items" Label with a white background behind your customized layout.

So for example: assuming your RadListView's loadOnDemandMode="Manual", add the following code somewhere in between the <RadListView></RadListView> tags

<GridLayout *tkListLoadOnDemandTemplate <Label text="My Custom Message" horizontalAlignment="center" verticalAlignment="center" style="background-color:transparent;"></Label> </GridLayout>

You will see that there is a some default text "Load More Items" BEHIND "My Custom Message". Basically, using a transparent customized LoadOnDemand template is not possible at the moment. Sure, I could add a background to the template, but even that looks super ugly. Developers need to be able to customize margins/padding/height/width etc, but doing so will unveil the ugly white background.

I assume the issue is that the custom template is being placed on top of some default template, and the solution would be to have the custom template REPLACE the default template.

Thanks in advance for any advice on workarounds.

[LSmint]

any update on this issue?

[LSmint]

Found a workaround solution to overlay the original template, it is quite simple: <GridLayout *tkListLoadOnDemandTemplate backgroundColor="#ebebeb" height="400"> </GridLayout>

[yassernasc]

it could be more friendly with the pullToRefreshStyleProperty way to customize colors

[kokosky93]

Have you finally figured out how to style spinner on load demand action? I am working with Angular project too. I want to remove this loading indicator area or move the loading indicator to the center of the screen

[keithgulbro]

I was able to update the color of the loading indicator via using the color property set to a hex value...

<RadListView color="#000000">