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.
Related
I've got a facebook like activity feed, and I'm using a repeater because I want to have multiple clickable items within each "activity", ie, clicking on the top portion goes to the users profile, vs. the body of the activity opens the activity, plus some links for comments, likes below that.
<ScrollView orientation="vertical">
<Repeater items="{{ activities }}">
<Repeater.itemsLayout>
<StackLayout orientation="vertical" />
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<StackLayout tap="goProfile" >
<Image src="{{image}}" height="35" verticalAlignment="top" />
<Label text="{{user_name}}" />
</StackLayout>
<StackLayout tap="goActivity">
...
</StackLayout>
<StackLayout orientation="horizontal">
<Image tap="addComment" src="{{comment}}" />
<Image tap="addLike" src="{{like}}" />
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
</ScrollView>
This is basically working fine, except tapping on any of the tappable items does not give any visual feedback, ie. briefly turning the background of the item grey, like it does with a ListView....
I can't figure out how to get this behavior on clickable layouts within my repeater? is this possible? is there another approach I should be following?
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 am using RadListView trying to use the header feature. If I try to use a StackLayout inside the header it disappears after the content is loaded. But if the header is one element (such as a Label) it works fine. The issue only appears on Android.
<GridLayout>
<RadListView [items]="products">
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="vertical">
<Label class="nameLabel" text="test title"></Label>
<Label class="descriptionLabel" text="test description"></Label>
</StackLayout>
</ng-template>
<ng-template tkListViewHeader>
<StackLayout orientation="vertical">
<Label text="This is header row 1"></Label>
<Label text="This is header row 2"></Label>
</StackLayout>
</ng-template>
</RadListView>
</GridLayout>
Before Load:
After load:
I found the issue. My data source for the list was not an Observable. So I guess it can't work with dynamic content being loaded directly into a normal array after it has been initialized.
I'm developing some app made on nativescript. Recently, i see that my app is more like website not an app, beacuse of how navigation works.
I'm having bottom nav (atached - this grey with 5 icons) that is used to load proper views.
But when i click on home or any other icon, new view is loaded, but also nav is 'reloaded'. So it will not stay in place but load with new view. My question is - is possible oto have static botom bar ? I've tried 2 plugins found on marketplace, but without success. Thanks for and help.
<Page class="page" loaded="loaded" xmlns:header="components/header" xmlns:footer="components/footer">
<GridLayout rows="120,*,60">
<StackLayout row="0">
<!-- Common header -->
<header:header/>
</StackLayout>
<ScrollView row="1" verticalAlignment="top" class="scrollview" tap="{{ loadPage }}">
<StackLayout class="redeem">
<Label text="Enter your code below to redeem your reward" class="info" textWrap="true"></Label>
<Label text="Code" class="info code" textWrap="true"></Label>
<TextField />
<Button text="Redeem" class="button blue"></Button>
</StackLayout>
</ScrollView>
<StackLayout row="2">
<!-- Common footer -->
<footer:footer/>
</StackLayout>
</GridLayout>
</Page>
:
<AbsoluteLayout class="footer" loaded="menu" horizontalAlignment="center" xmlns:sd="nativescript-ui-sidedrawer">
<GridLayout rows="auto" columns="*,*,*,*,*" horizontalAlignment="center">
<Label row="0" col="0" class="fa" text="" tap="{{ mainPage }}"></Label>
<Label row="0" col="1" class="fa" text="" tap="{{ creditPage }}"></Label>
<Label row="0" col="2" class="fa" text="" tap="{{ seatPage }}"></Label>
<Label row="0" col="3" class="fa" text="" tap="{{ refs }}"></Label>
<Label id="openMenu" row="0" col="4" class="fa" text="" tap="toggleDrawer"></Label>
<!--<Label id="openMenu" row="0" col="4" class="fa" text="" tap="{{ loadPage }}"></Label>-->
</GridLayout>
</AbsoluteLayout>
You could use DockLayout and dock the content to the bottom (Angular example here)
Also in the upcoming release 4.0.0 of NativeScript (expected April-2018) will provide support for different root views (apart from Page) meaning you could create bottom static layout like GridLayout or even better a bottom TabView (also coming for Android in 4.0.0) and create Frame in the upper layout for your dynamic content. (Look here)
# I am using listview inside the Scrollview but listview is not scrollable inside the scrollview as top parent view
component.html
<ScrollView>
<StackLayout class="zindex">
<!--<AutoComplete [items]="ArrayVillage" (itemTap)="itemTapped($event)"> </AutoComplete>-->
<SearchBar row="0" #sb hint="Search for a country and press enter" (clear)="onClear()" [text]="searchPhrase" (submit)="onSubmit(sb.text)"></SearchBar>
<ListView row="1" [items]="myItems" class="list-group">
<template let-item="item">
<GridLayout class="item" class="list-group-item">
<Label [text]="item.name" class="list-group-item-heading"></Label>
</GridLayout>
</template>
</ListView>
</StackLayout>
<ScrollView>
Try Using Repeater instead of ListView as mentioned in https://docs.nativescript.org/cookbook/ui/repeater. Following is an example of how you can include Repeater inside a ScrollView and can obtain whole layout as scrollable.
<ScrollView>
<StackLayout class="margin">
<Label text="{{ description }}"></Label>
<Repeater items="{{ options }}" row="1">
<Repeater.itemTemplate>
<StackLayout>
<Label text="{{ description }}"></Label>
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
</ScrollView>
Trying it by wrapping the scrollview into a AbsoluteLayout
<AbsoluteLayout>
<ScrollView>
<StackLayout class="zindex">
//Rest of stuff
</StackLayout>
<ScrollView>
</AbsoluteLayout>
Having a scrollview inside other one is not a good practice. It doesn't work beacuse scrollview tries to calculate the infinite view and do it with a scrollable inside could work just in some cases having control of the parent view, but don't go that painfull way.
In your code I have a question, why would you want to scroll the SearchBar? Try this structure I think is what you want.
<StackLayout>
<SearchBar></SearchBar>
<ListView>
<template>
<GridLayout >
<Label ></Label>
</GridLayout>
</template>
</ListView>
The SearchBar is fixed and the List scrolllable
Look at the video, play with the emulator and you will see that at the beggining it seems to work but is the "computer mouse scroll" when you use click trying to scroll it doesn't work anymore and is because the screen doesn't know which scrollable element has to scroll.
To do 2 scrollable parts can be a solution, as shown in the end of the video (I implemented in Nativescript with Javascript because I'm working in a project but is almost the same)
<StackLayout>
<Label fontSize="20" color="blue" text="You can do two scrollable parts" textWrap="true" />
<Button text="to" />
<ListView items="{{ items }}" height="300" loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap">
<ListView.itemTemplate>
<Label text="{{ name }}" textWrap="true" />
</ListView.itemTemplate>
</ListView>
<ScrollView>
<StackLayout>
<Button text="1" />
<Button text="2" />
<Button text="3" />
<Button text="4" />
<Button text="5" />
<Button text="6" />
<Button text="3" />
<Button text="4" />
<Button text="5" />
<Button text="6" />
</StackLayout>
</ScrollView>
</StackLayout>