In my NS Core 6.3 app, I have nested RadListViews to display related items. The outer RadListView displays properly, but the nested one does not display at all. Here is my code:
<GridLayout row="1" rows="*" columns="*">
<lv:RadListView items="{{ asks }}">
<lv:RadListView.itemTemplate>
<StackLayout>
...
<GridLayout rows="*" columns="auto" marginTop="10">
<lv:RadListView items="{{ recs }}">
<lv:RadListView.listViewLayout>
<lv:ListViewLinearLayout scrollDirection="Horizontal" />
</lv:RadListView.listViewLayout>
<lv:RadListView.itemTemplate>
...
</lv:RadListView.itemTemplate>
</lv:RadListView>
</GridLayout>
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
</GridLayout>
If I replace the inner RadListView with a Repeater, the items render, but I cannot scroll through them horizontally.
Note that this code works as expected on Android.
Am I missing a setting or something?
Thank you.
I tried different combinations between RadListView, ListView, and Repeater, but I could not make this work. So, for the inner list, I ended up using https://github.com/manijak/nativescript-carousel.
Related
I'm facing issue in removing separator line after each list item and not able to change the separator line color.
I have tried separatorColor="transparent" property in Listview tag and in CSS but both of them are not working.
I have tried SeparatorVisibility="None" property also, but no luck.
I have tried this solution provided by GitHub, but it is not working.
Here is the code :
<GridLayout row="1" class="shop-list-container">
<ListView [items]="rewardsPageData?.shops" class="list-group" height="{{rewardsPageData?.shops?.length * 75}}" separatorColor="transparent">
<ng-template let-shop="item">
<GridLayout class="shop-item list-group-item" columns="2*, 6*, 2*" rows="*, auto" (tap)="goToShopDetails(shop.id)">
<Image src="{{shop.logoImageUrl}}" class="thumb img-circle" col="0" row="0" rowSpan="2" horizontalAlignment="left"></Image>
<Label class="shop-name" [text]="shop.title" row="0" col="1"></Label>
<Label class="shop-type" text="{{shop?.category}}" row="1" col="1"></Label>
<Label text="See location" class="see-location-text" textWrap="true" col="2" row="0" rowSpan="2" horizontalAlignment="right"></Label>
</GridLayout>
</ng-template>
</ListView>
</GridLayout>
I created an isolated example with setting separator-color to transparent in CSS and works just fine for me in iOS. Notice the ListView rule in app.css.
It works equally well if you remove the CSS rule and set separatorColor="transparent" to the ListView object in home.component.html.
Add this following line in your _app-common.scss file
ListView { separator-color: transparent; }
Also, when creating a ListView, use class = "list-group"
I have the following code:
<GridLayout row="7" col="0" colSpan="3" rows="*" cols="*">
<RadListView [items]="sourcesOptions" height="100%">
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="horizontal">
<Switch [checked]="true" class="switch"></Switch>
<Label [text]="item.label" textWrap="true" marginTop="15"></Label>
</StackLayout>
</ng-template>
<ListViewGridLayout tkListViewLayout itemHeight="200" scrollDirection="Vertical" spanCount="2"></ListViewGridLayout>
</RadListView>
</GridLayout>
It is working on Android, but on iOS it isn't showing anything.
Note
I don't know if this can be related to the issue, but I get the items from a rest service.
Any help is appreciated!!
The problem was with the height when the items are async, in that case I needed to set the height manually to the parent layout of the RadListView component (The GridLayout in my case).
It didn't work if I set a height with percentage (100%), it had to be a fixed number, it was very inconvenient because the number of items are not always the same, so I created a function to set the height according with number of items received.
This is the code that fixed the issue:
<GridLayout row="7" col="0" colSpan="3" rows="*" cols="*" [height]="setHeight()">
<RadListView [items]="sourcesOptions">
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="horizontal">
<Switch [checked]="true" class="switch"></Switch>
<Label [text]="item.label" textWrap="true" marginTop="15"></Label>
</StackLayout>
</ng-template>
<ListViewGridLayout tkListViewLayout itemHeight="70" scrollDirection="Vertical" spanCount="2"></ListViewGridLayout>
</RadListView>
</GridLayout>
Try a height value on the RLV component like height="100%" so it fills the parent. iOS doesn't do auto layouts the same android does, that's why you run into this :)
You haven't provided a rows or columns definition for your GridLayout. The RadListView will likely show up if you do:
<GridLayout row="7" col="0" colSpan="3" rows="*" columns="*">
I would like to implement a static content in my Page to show some values just before showing the RadListView provided by Telerik. This is my code example:
<lv:RadListView items="{{ dataItems }}" row="1" selectionBehavior="Press" itemSelected="onItemSelected">
<lv:RadListView.listViewLayout>
<lv:ListViewLinearLayout scrollDirection="Vertical"/>
</lv:RadListView.listViewLayout>
<lv:RadListView.itemTemplate>
<StackLayout orientation="vertical">
<Label fontSize="20" text="{{ itemName }}"/>
<Label fontSize="14" text="{{ itemDescription }}"/>
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
I am trying to add a Label just before the RadListView like this:
<StackLayout>
<Label text="Listview Header!!!" />
</StackLayout>
I am trying to make the Label non-scrollable.
Once I change my code, nothing shows up in the page, any idea?
Thanks!
You need one main layout for this route/page. There can only be one child to the page (I know there's no page in NativeScript angular) but try adding a stack then placing what you have inside that one stack and it shouldn't work.
I have a listview (code below), in the listview there is a Button with a tap event. I am trying to bind the function from my view-model code. The basic flow is the same as the typescript template for nativescript apps. However, this doesn't work because it's not a property of the items bound to the listview. I don't want to move the binded function outside of the view-model. I can't be the only crazy person doing something like this :P
<ListView.itemTemplate>
<GridLayout backgroundImage="{{ whatever }}" rows="auto, auto, auto" columns="70, *, auto">
<Label row="0" col="1" text="{{ title }}" color="{{ whatever }}" class="feed-title" textWrap="true" />
<Button text="" row="0" col="2" color="{{ whatever }}" tap="{{ moreOptionsTap }}" class="ionicon" />
</GridLayout>
</ListView.itemTemplate>
Ignore the incorrect listview template, I stripped out a bunch of stuff to make this readable.
Well forget the question, don't know why I didn't think to try what I was already doing inside the ListView on some other components. Docs here: https://docs.nativescript.org/core-concepts/data-binding#binding-to-a-parent-binding-context
tap="{{ $parents['ListView'].moreOptionsTap }}"
I'm trying to animate an element inside a list item when another item is tapped, but I can't fin a way to get it.
<Repeater items="{{ feedItems }}">
<Repeater.itemTemplate>
<GridLayout>
<GridLayout rows="1*,1*, 1*">
<GridLayout columns="4*,22*">
...
</GridLayout>
<GridLayout row="2">
...
<Image col="2" verticalAlignment="bottom" tap="showElementAndAnimate" />
</GridLayout>
</GridLayout>
<GridLayout cssClass="ElementToShow" columns="1*,1*">
<GridLayout rows="1*,1*,1*" col="1" cssClass="ElementToAnimate">
...
</GridLayout>
</GridLayout>
</GridLayout>
</Repeater.itemTemplate>
</Repeater>
The problem is to get the element to animate after tap since there is a repeater
What you can do is:
Add a attribute (or Id) to your first parent GridLayout.
Add id to the GridLayout that you want to animate (in your case - GridLayout with cssClass="ElementToAnimate").
Access the Image, which you want to tap on, from the args in the function showElementAndAnimate.
Then get the Image parent until you reach the parent with the already specified attribute (from point 1).
When the correct GridLayout is reached, use the function getViewById to get the GridLayout you want to animate (the one with the id from point 2.).
After you get the element, you can animate it.