RadListView trackBy equivalent?

[Josep]

Hi,

I have been using "nativescript-telerik-ui": "^1.5.1" with Angular2 for quite a while and it works great.

Now, we need a list of editable inputs and I was wondering if there was a trackBy equivalent for RadListView. The thing is everytime the list gets updated the TextField loses focus. On a regular Angular2 web it could be solved with an *ngFor directive with a trackBy function returning the item's id, but we need to implement a swipe to execute functionality as well, so using RadListView would be the best option.

I have done some research on the topic but couldn't find any information about it. Could you give me any insights on this? Other workarounds would also be appreciated.

Regards,

Josep

[Nick Iliev]

Hi Josep,

Thank you for your interest in NativeScript and we are really glad to hear that it works great for you!

Regarding your issue - I am not really sure what your specific situation is but I will provide you with a custom scenario describing how to focus wanted text field on demand. Here is how to focus a selected text field in Angular based application.

Working with modified code from this example

Let's assume that we have a scenario with a list-view and a text field which we want to focus when our list view is loaded.
page.component.html

<GridLayout rows="100,*" tkExampleTitle tkToggleNavButton>
    <!-- >> angular-angular-listview-item-loading -->
    <TextField row="0" #myField hint="" text=""></TextField>

    <RadListView row="1" #myRadListView [items]="dataItems" (loaded)="onRadListLoaded()" (itemLoading)="onItemLoading($event)">
        <!-- << angular-angular-listview-item-loading -->
        <template tkListItemTemplate let-item="item" let-i="index">
            <StackLayout orientation="vertical" padding="15">
                <Label class="nameLabel" [text]="item.name"></Label >
                <Label class="descLabel" [text]="item.description"></Label>
            </StackLayout>
        </template>
    </RadListView>
</GridLayout>

page.component.ts

@ViewChild("myField") myField: ElementRef;

focusTextField() {
    let myField = <TextField>this.myField.nativeElement;
    console.log(myField.focus());
}

Now what we can do is to focus our text field when needed e.g on loaded event for our RadListView or on a custom event.

onRadListLoaded() {
    this.listViewComponent.listView.scrollToIndex(5);
    this.focusTextField();
}

Perhaps, in your situation, you would need to focus a specific text field located inside a listview cell.In this case, you can simply assign unique IDs to your text fields (e.g. using the for item templates in Angular and then concatenating the unique index with some readable id prefix)

I want also to mention that it is recommended to use RadListView or core ListView in favor of Angular structural directives (like ngFor). The reason is that in the mobile world memory consumption is still an occurring issue and when working with repeating templates both RadListView and the core ListView are using recycling and virtualization techniques which are greatly improving performance.Great article about this can be found here

I hope the information above will be helpful for you case, but please let me know if you need further assistance on that or other matter.

Regards,
Nikolay Iliev
Telerik by Progress