Android List Items Disappearing

Thread is closed for posting
4 posts, 0 answers
  1. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 17 Jun 2017 Link to this post

    Hello,

    I've ran into a problem where when updating the list with search queries, the list items become invisible. It works in iOS, the problem only occurs in android.

    Here is a video showing the problem: Video

     

    If I remove the line <ListViewStaggeredLayout tkListViewLayout spanCount="1"></ListViewStaggeredLayout> from the code, it works fine, but is there any way I can use staggeredlayout with this setup? I have no idea why it isn't working properly.

     

    .html

    <GridLayout rows="*">
      <RadListView #radListView scrollPosition="Top" backgroundColor="transparent" (itemLoading)="onItemLoading($event)" #contactsView [items]="filteredItems">
        <ListViewStaggeredLayout tkListViewLayout spanCount="1"></ListViewStaggeredLayout>
        <ng-template tkListItemTemplate let-item="item" let-index="index">
          <StackLayout class="item" [class.first]="index === 0" (tap)="itemTapped(item)">
            <ink-list-user *ngIf="showContacts" [user]="item"></ink-list-user>
            <ink-list-event *ngIf="showEvents" [event]="item"></ink-list-event>
            <ink-list-connection *ngIf="showConnections" [connection]="item" [selected]="selected.indexOf(item) > -1"></ink-list-connection>
          </StackLayout>
        </ng-template>
      </RadListView>
    </GridLayout>

     

    in .component.ts

    filteredItems: any[] = [];
     
      onItemLoading(args) {
        if (isIOS) {
          let color = new Color(0, 255, 0, 0);
          args.ios.backgroundView.backgroundColor = color.ios;
        }
      }
     
      onSearchChanged(query: string) { //called when text on textfield changes
          if (query.length) {
            this.localContactsService.filterContacts(query).subscribe(
              res => this.filteredItems = res.items,
              err => this._loadingError(err)
            );
          } else {
            this.filteredItems = [];
          }
      }

     

  2. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 19 Jun 2017 Link to this post

    Hi,
    Thank you for reporting this issue.
    I reviewed your case on my side and indeed there is a problem with updating the ListView UI while using ListViewStaggeredLayout on Android.

    For your convenience, I logged new issue here, where you could keep track on the problem.

    In the meantime in case you will order the items in one order, you could use some of the other available Layouts. For example:


    Let me know, whether this is applicable for you or if I could assist you further.
    Regards,
    nikolay.tsonev
    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.
  3. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 19 Jun 2017 Link to this post

    I achieved my goal by using ngIf with ListViewLinearLayout because the component needs to support different types of item views in my case and only one of them needs a known item height.

     

    Thank you for responding.

  4. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 19 Jun 2017 Link to this post

    Hello Ericky,

    In our further research, we found that this issue is related to the native component and the layout, which we have exposed. In a fact, this issue is not directly connected to the UI for NativeScirpt plugin and it is related to the native Android part.

    However, we found a solution how you could filter the items in the array and to be able to reload the ListView content properly. You could use ObservableArray and with its method splice to erase the content and to add the new data. For further help, you could review the attached sample project.

    Regards,
    nikolay.tsonev
    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