Cannot combine SearchBar with RadListView in a StackLayout


#1

Hi,

I’m trying to convert my regular ListView component to a RadListView (vanilla JS + XML). I have a SearchBar at the top of the page, and when the user types a search string, I get the search results, and set that to the page’s binding context. Simple. Works. (In my XML file, I’m binding the list view to {{ search }}.)

<ListView items="{{ search }}" class="list-group" itemTap="onTapSearchResult">
	<ListView.itemTemplate>
		<StackLayout class="list-group-item">
			<Label text="{{ name }}" class="" />
		</StackLayout>
	</ListView.itemTemplate>
</ListView>

And the code behind:

exports.onSubmit = function(args) {
	let searchBar = args.object;
	searchBar.page.bindingContext.set("search", new ObservableArray(searchResults));
}

However, when I switch out my ListView to RadListView, the list is not populating for some reason. The code behind is the same as above (since nothing has changed there), and the XML file is changed to:

<Page xmlns:lv="nativescript-pro-ui/listview" ... >
...
<lv:RadListView items="{{ search }}" class="list-group" itemTap="onTapSearchResult">
	<lv:RadListView.listViewLayout>
		<lv:ListViewLinearLayout scrollDirection="Vertical"/>
	</lv:RadListView.listViewLayout>
			
	<lv:RadListView.itemTemplate>
		<StackLayout verticalAlignment="center" orientation="vertical" class="m-y-15">
			<Label text="{{ name }}" />
		</StackLayout>
	</lv:RadListView.itemTemplate>
</lv:RadListView>
...
</Page>

Anyone have ideas what could be the issue?

Thanks.


#2

Further investigation shows that the RadListView doesn’t seem to like being inside a StackLayout. This is how I group things in order to have the SearchBar at the top (right below the ActionBar), but this does not get the RadListView populated.

<StackLayout orientation="vertical" verticalAlignment="top" class="form">
	<SearchBar id="searchBar" hint="City or Zip" submit="onSubmit" backgroundColor="#f5a623" />

	<lv:RadListView items="{{ search }}" class="list-group" itemTap="onTapSearchResult">
		<lv:RadListView.listViewLayout>
			<lv:ListViewLinearLayout scrollDirection="Vertical"/>
		</lv:RadListView.listViewLayout>
			
		<lv:RadListView.itemTemplate>
			<StackLayout>
				<StackLayout verticalAlignment="center" orientation="vertical" class="m-y-15">
					<Label text="{{ name }}" />
				</StackLayout>
				<StackLayout height="1" backgroundColor="#eee" />
			</StackLayout>
		</lv:RadListView.itemTemplate>
	</lv:RadListView>
</StackLayout>

However, when I comment out the outer StackLayout, then it works fine, except of course the SearchBar disappears and is not visible. So something is fishy. Even in the documentation (http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/ListView/overview) I did not see a single example where they enclose the RadListView inside a StackLayout. Maybe it’s having issues that way…


#3

It might have sorting to do with your css class. e.g. remove the form class from the stack layout and see if that would works.

However, why don’t you consider putting the search bar in the <lv:RadListView.headerItemTemplate>
http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/ListView/header-footer


#4

Ok, I just found the answer on StackOverflow (posted by Vladimir Amiorkov):

“Note that the RadListView cannot be placed in contains of the StackLayout type, since they are measured in a way that is not compatible with that control.”

(URL: https://stackoverflow.com/questions/42051794/getting-nativescript-telerik-ui-radlistview-to-work-in-angular#comment71393284_42051794)

So I swapped the StackLayout with a GridLayout (using 2 rows and 1 column) and that did the trick.

@ganas: Thanks for that tip! I have not gotten to headers/footers yet, but that’s an interesting solution I might look at as well.