RadListView LoadOnDemand when Scrolling Up

2 posts, 0 answers
  1. Dynamic
    Dynamic avatar
    4 posts
    Member since:
    Dec 2005

    Posted 15 Sep Link to this post

    Hello  I am  developing a chat application. I have used RAD listview in my chat screen. We are loading last few messages on screen and when user scrolls UP, we need load the earlier messages. In order to achieve it,I have written following code:

    // in Html
    <GridLayout tkExampleTitle tkToggleNavButton>
        <RadListView [items]="dataItems" loadOnDemandMode="Auto" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)">
            <ng-template tkListItemTemplate let-item="item">
                <StackLayout class="itemTemplateStackLayout" orientation="vertical">
                    <StackLayout class="innerOtemTemplateStackLayout" orientation="horizontal">
                        <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>
            </ng-template>
            <ListViewLinearLayout *tkIfIOS tkListViewLayout itemHeight="120"></ListViewLinearLayout>
        </RadListView>
    </GridLayout>



     //in component
     public onLoadMoreItemsRequested(args: ListViewEventData) {
            var that = new WeakRef(this);

            var listView: RadListView = args.object;
            var initialNumberOfItems = that.get()._numberOfAddedItems;
            for (var i = that.get()._numberOfAddedItems; i < initialNumberOfItems + 2; i++) {
                
                that.get()._dataItems.push(new DataItem(i, posts.names[i]));
                that.get()._numberOfAddedItems++;
            }

            listView.notifyLoadOnDemandFinished();

            args.returnValue = true;
        }

    Above code works when we scroll down. But we want to load earlier meessages when user scrolls up like Whatsapp. Can anyone please suggest, how to achieve it?

    Thanks in advance!

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 15 Sep Link to this post

    Hi Roger,

    The current implementation of loadOnDemand does not support upwards direction.

    However, a custom solution workflow is suggested in this thread. The idea in the thread is to use the scrolledEvent to catch the current scroll offset. This way when the offset becomes zero or negative, you can initialize the fetching of your data items (e.g. new chat messages) and use flag (e.g. boolean property) to reset the process when the whole new data has arrived.

    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.
Back to Top