NativeScript ListView with button tapEvent using data binded function - nativescript

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 }}"

Related

Nativescript nested RadListView does not render on iOS 13

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.

How to remove separator line from listview on IOS?

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"

Adding a static header before the Listview in Nativescript

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.

Label text is being clipped in iOS

I have a drawer in my Dashboard page and every Label is being clipped, I have tried different things but no luck :(
This is my Drawer code:
<!-- >> sidedrawer-over-navigation-drawer -->
<dpg:DrawerPage.sideDrawer>
<drawer:RadSideDrawer id="mainMenuDrawer" gesturesEnabled="true">
<drawer:RadSideDrawer.drawerContent>
<GridLayout rows="75, *" columns="300" class="mainMenuContent">
<StackLayout row="0" verticalAlignment="middle" horizontalAlignment="center">
<Label text="Main Menu" class="mainMenuHeader" />
</StackLayout>
<lv:RadListView items="{{ menuItems }}" row="1" class="mainMenuItems">
<lv:RadListView.listViewLayout>
<lv:ListViewLinearLayout scrollDirection="Vertical"/>
</lv:RadListView.listViewLayout>
<lv:RadListView.itemTemplate>
<GridLayout rows="50" columns="50, *" class="mainMenuItems">
<Label class="fa mainMenuItemIcon" col="0" text="{{ icon | fonticon }}" horizontalAlignment="center" verticalAlignment="middle" />
<Label class="mainMenuItemLabel" col="1" text="{{ title }}" horizontalAlignment="left" verticalAlignment="middle" />
</GridLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
</GridLayout>
</drawer:RadSideDrawer.drawerContent>
</drawer:RadSideDrawer>
</dpg:DrawerPage.sideDrawer>
<!-- << sidedrawer-over-navigation-drawer -->
In the image you will see what is going on.
Any idea what is going on?
Thanks!!!
Always use <Label textWrap="true" to make those babies fit.
Try setting those labels to a width of a 100% or some width long enough to fit all your text. that will fix them truncating
There is no verticalAlignment="middle". Its top, center, bottom or stretch. This may affect your labels.
Also try removing the root GridLayout columns="300".
Your alignment at the main menu is redundant, try to use vertical alignment instead and customize the size of columns of the GridLayout. Example:
<GridLayout rows="50" columns="50, *" class="mainMenuItems">
set columns="(set column size) , (set column size) ".

How to animate an element inside a List Item in Nativescript?

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.

Resources