Nativescript-ui-feedback: RadListView ScrollToIndex in horizontal mode

[tigrenok00]

Hi,

Is there an issue with ScrollToIndex when using angular RadListView with ListViewLinearLayout with scrollDirection="Horizontal"?
The list doesn't seem to scroll to index this way.

Thank you

[VladimirAmiorkov]

Hi @tigrenok00 ,

Can you you be a bit more specific, note that the feedback repository is for general feedback and issue reporting. While some questions may be raised during those kinds of reports, direct questions are best to be submitted to our forum (here) or support channels.

In both of our sdk and Angular sdk repositories we have examples showing the scroll to index for both horizontal and vertical RadListView. You can find them for vanila here and for Angular here.

If you find an issue can you use the "New Issue" template when reporting it as that makes it a lot faster for researching the exact scenario you are observing and leads to faster bug fixes and solutions from our end.

[tigrenok00]

Hi,
I posted here because it looks like a bug, not a question.
Thank you for the example code, I adjusted my code to be the same and it still won't scroll to index.
Here's the code:

<RadListView row="3" #catListView tkExampleTitle tkToggleNavButton [items]="categories">
            <ng-template tkListItemTemplate let-item="item">
                <Button class="btn btn-rounded-sm btn-primary category-btn"
                [class.bg-primary]="isCategorySelected(item)"
                [class.category-default]="!isCategorySelected(item)"
                (tap)="onCategorySelectedBtn(item)" 
                text="{{item.orderCategoryDescr}} [{{countItemsInCategory(item)}}]"></Button>
            </ng-template>
            <ListViewLinearLayout tkListViewLayout scrollDirection="Horizontal"></ListViewLinearLayout>
    </RadListView>

@ViewChild('catListView') catListViewComponent: RadListViewComponent;

ngAfterViewInit() { this.catListViewComponent.listView.scrollToIndex(7); }

[tigrenok00]

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

CLI: 3.0.1
Cross-platform modules: 3.0.0
Runtime(s): 3.0.0
Plugin(s): "nativescript-telerik-ui": "2.0.1"

[tigrenok00]

Note that this happens when the code for scroll is in ngAfterViewInit.
When I call the same code afterwards, on any other event, the scroll works correctly.
I thought that at this point (during ngAfterViewInit) the view is ready for the scroll (obviously I bind it before), isn't it so? Is there any other event of "list loaded" that you can suggest me to use for this?

[ginev]

@tigrenok00 it seems the ngAfterViewInit is a point too early to call scrollToIndex as the data is not there yet and the cells in the list are not visualized. Can you try using the ViewBase.loaded event instead?: https://docs.nativescript.org/api-reference/classes/_ui_core_view_base_.viewbase.html#loadedevent

[ginev]

@tigrenok00, you can actually set a timeout for about 10-100 milliseconds and call the scrollToIndex method when it elapses. This approach works on our side.

[tigrenok00]

This is what I ended up doing, closing this issue

[spwinner2017]

@tigrenok00 worked for me thank you !!!!!