RadListView inside RadAutoCompleteTextView (Angular)?


#1

I am using RadAutoCompleteTextView and I would like to display the results in a grid format, like it is actually displayed in the demo image:

I have been trying everything, but have not been able to figure it out. I really don’t even need to use RadListView, I would just like a grid format in general.

Any help would be greatly appreciated.


#2

Take a look at the layout docs for RadListView. It shows how to use a grid layout.


#3

I’m asking how to combine RadAutoCompleteTextView with RadListView, not just using RadListView. I don’t understand how the ng-template works with a RadListView inside of it and how the linked data array [items] works with both of them.

<RadAutoCompleteTextView #autocomplete [items]="dataItems" suggestMode="Suggest" displayMode="Tokens">
  <SuggestionView tkAutoCompleteSuggestionView>
    <RadListView [items]="dataItems">
      <ListViewGridLayout tkListViewLayout scrollDirection="Vertical" ios:itemHeight="200" spanCount="2"></ListViewGridLayout>
      <ng-template tkListItemTemplate tkSuggestionItemTemplate let-item="item">
        <StackLayout orientation="vertical">
          <Label class="nameLabel" [text]="item.name"></Label>
          <Label class="descriptionLabel" [text]="item.description"></Label>
        </StackLayout>
      </ng-template>
    </RadListView>
  </SuggestionView>
</RadAutoCompleteTextView>

#4

suggestionView should be used only when you want to change the appearance of suggestions.

From your screenshot I understand you need a RadListView below RadAutoCompleteTextView and update data of your RadListView based on tokens selected in RadAutoCompleteTextView.