This is a migrated thread and some comments may be shown as answers.

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

2 Answers 107 Views
ListView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Clarence
Top achievements
Rank 2
Clarence asked on 07 Feb 2017, 09:48 AM

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 Answers, 1 is accepted

Sort by
0
Nick Iliev
Telerik team
answered on 07 Feb 2017, 11:54 AM
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.
0
Nick Iliev
Telerik team
answered on 05 Jul 2017, 12:58 PM
Hello Clarence,

Just for your information - the issue is now fixed and is no longer reproducible with the latest version of nativescript-telerik- plugin.

Regards,
Nikolay Iliev
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.
Tags
ListView
Asked by
Clarence
Top achievements
Rank 2
Answers by
Nick Iliev
Telerik team
Share this question
or