listview-load-on-demand-custom-view doesn't support property binding on label text

2 posts, 0 answers
  1. Clarence
    Clarence avatar
    12 posts
    Member since:
    Nov 2016

    Posted 07 Feb Link to this post

    Found that the custom load-on-demand view in the RadListView component doesn't support Angular's property binding on the text property.

    Issue can be reproduced as follows:

    • Clone the SDKAngular examples repo (https://github.com/telerik/nativescript-ui-samples-angular.git)
    • Modify the file nativescript-ui-samples-angular/sdkAngular/app/listview/load-on-demand/listview-load-on-demand.component.ios.html as follows (try to bind the label's text property to component's property):
    <GridLayout tkExampleTitle tkToggleNavButton>
        <!-- >> angular-listview-load-on-demand -->
        <RadListView [items]="dataItems" loadOnDemandMode="Manual" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)" [listViewLayout]="layout">
            <!-- << angular-listview-load-on-demand -->
            <template tkListItemTemplate let-item="item">
                <StackLayout class="itemTemplateStackLayout" orientation="vertical">
                    <StackLayout class="innerOtemTemplateStackLayout" orientation="horizontal">
                        <Image [src]="item.image" stretch="aspectFit" height="100" width="100"></Image>
                        <StackLayout class="labelsStackLayout" orientation="vertical">
                            <Label class="labelName" [text]="item.name"></Label>
                            <Label class="labelTitle" [text]="item.title" textWrap="true"></Label>
                            <Label class="labelText" [text]="item.text" textWrap="true"></Label>
                        </StackLayout>
                    </StackLayout>
                </StackLayout>
            </template>
            <!-- >> listview-load-on-demand-custom-view -->
            <GridLayout *tkListLoadOnDemandTemplate class="loadOnDemandItemGridLayout">
                <Label [text]="loadMoreText" horizontalAlignment="center" verticalAlignment="center"></Label>
            </GridLayout>
            <!-- << listview-load-on-demand-custom-view -->
        </RadListView>
    </GridLayout>
    • Add the following property declaration to the component class nativescript-ui-samples-angular/sdkAngular/app/listview/load-on-demand/listview-load-on-demand.component.ts:
    loadMoreText='Load More';
    • tns run ios
    • The result is that the label was not shown in the "Load More" bar at the bottom

    Kindly advice

    Clarence

     

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    140 posts

    Posted 07 Feb Link to this post

    Hello Clarence,

    Once again thank you for your activity and for reporting this one. I can confirm that indeed this is unexpected behaviour and I've logged it as a bug in this issue. Any information about the fix provided by our developers will be updated in the logged issue and in the release notes of the release that includes the fix.
    We really appreciate your reports and will work on releasing a fix as soon as possible.
    I am giving you 1000 Telerik points for discovering this bug.

    Regards,
    Nikolay Iliev
    Telerik by Progress
    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