RadListView trackBy equivalent?

Thread is closed for posting
2 posts, 0 answers
  1. Josep
    Josep avatar
    1 posts
    Member since:
    Mar 2017

    Posted 24 Mar 2017 Link to this post

    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

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 27 Mar 2017 Link to this post

    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 let-i="index" 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
    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