I cannot click the first item in a RadListView. However it works well in android.
In this code, onitemSelected is not called on the first item
<RadListView
class="jobs"
row="1"
loadOnDemandMode="Auto"
pullToRefresh="true"
selectionBehavior="Press"
[items]="jobPaginator.docs"
(itemSelected)="onItemSelected($event)"
(loadMoreDataRequested)="onLoadMoreItemsRequested($event)"
(pullToRefreshInitiated)="onPullToRefreshInitiated($event)">
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="vertical" class="jobs__card">
<Label class="jobs__card-customer-name" [text]="item.customerName"></Label>
<Label class="jobs__card-device-model" [text]="item.deviceModel"></Label>
<Label class="jobs__card-store-name" [text]="item.storeName"></Label>
<Label class="jobs__card-customer-email" [text]="item.email"></Label>
<Label class="jobs__card-customer-phone" [text]="item.phone"></Label>
</StackLayout>
</ng-template>
</RadListView>
Related
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)
How can i dock my Tabview items to the left of the screen like in the image below?
This is how my layout looks like currently.
<TabView dock="left" tabsBackgroundColor="red" selectedIndex="1" selectedColor="#FF0000" iosIconRenderingMode="alwaysOriginal" sdkExampleTitle sdkToggleNavButton>
<StackLayout tabsBackgroundColor="red" *tabItem="{ iconSource: 'res://ic_ham'}" >
</StackLayout>
<StackLayout *tabItem="{title: 'Home'}">
<ns-home></ns-home>
</StackLayout>
<StackLayout *tabItem="{title: 'Bookings'}">
<ns-booking></ns-booking>
</StackLayout>
</TabView>
Resulting layout
It may be a bit of overkill for your needs, but what I've found simplest for us was to change the tab buttons to be fully designable and customizable by disabling the current buttons and the add new tab buttons.
<StackLayout class="grid-tab-view" columns="*,100,100,100,*" ios:rows="auto, auto" android:rows="auto, *">
<label row="0" col="1" class="tab-button" text="Tab1" (tap)="switchTabByIndex(0)" [ngClass]="{'selected': tabSelectedIndex===0}"></label>
<label row="0" col="2" class="tab-button" text="Tab2" (tap)="switchTabByIndex(1)" [ngClass]="{'selected': tabSelectedIndex===1}"></label>
<label row="0" col="3" class="tab-button" text="Tab3" (tap)="switchTabByIndex(2)" [ngClass]="{'selected': tabSelectedIndex===2}"></label>
<TabView colSpan="5" row="1" col="0" #tabView class="tab-view" [(ngModel)]="tabSelectedIndex" (loaded)="onTabsLoaded()" (selectedIndexChanged)="onTabSwitch($event)">
<StackLayout class="tab" *tabItem="{title: 'Tab1'}">
<Label text="tab1 body"></Label>
</StackLayout>
<StackLayout class="tab" *tabItem="{title: 'Tab2'}">
<Label text="tab2 body"></Label>
</StackLayout>
<StackLayout class="tab" *tabItem="{title: 'Tab3'}">
<Label text="tab3 body"></Label>
</StackLayout>
</TabView>
</StackLayout>
And in code:
Add tap event handlers for when button selected and give it a custom selected class (for styling)
Hide the default tab buttons using the tabs loaded event:
onTabsLoaded(): void{
let tabViewElement = <TabView>this.tabView.nativeElement;
if (tabViewElement && tabViewElement.android) {
tabViewElement.android.removeViewAt(0);
} else {
tabViewElement.ios.tabBar.hidden = true;
}
};
and with a bit of css, our result:
Hope this helps, good luck!
<StackLayout width="100%" *ngFor="let item of (videos$ | async)">
<CardView class="studentCard" margin="2" elevation="10" radius="1">
<GridLayout rows="auto, auto, auto" columns="auto, auto, *">
<Image [src]="item.snippet.thumbnails.high.url" stretch="aspectFill" colSpan="3" row="0"></Image>
<Label [text]="item.snippet.channelTitle" textWrap="true" row="2" colSpan="1" ></Label>
<Label [text]="item.snippet.title" textWrap="true" row="2" col="1" colSpan="2" >></Label>
</GridLayout>
</CardView>
</StackLayout>
I tried to wrap it in ScrollView, didn't work.
I couldn't make (items$ | async) work with ListView either, seems ngFor can't work with ListView, we need ng-template for ListView.
I tried the following but only the first item is rendering
<ScrollView>
<ListView [items]="videos$ | async" class="list-group">
<ng-template let-item="item">
<GridLayout class="list-group-item">
<Image [src]="item.snippet.thumbnails.high.url"></Image>
<Label [text]="item.snippet.channelTitle" ></Label>
<Label [text]="item.snippet.title">></Label>
</GridLayout>
</ng-template>
</ListView>
</ScrollView>
Wraping the entire code first with StackLayout then with ScrollView worked
<ScrollView>
<StackLayout>
<StackLayout width="100%" *ngFor="let item of (videos$ | async)">
<CardView class="studentCard" margin="2" elevation="10" radius="1">
<GridLayout rows="auto, auto, auto" columns="auto, auto, *">
<Image [src]="item.snippet.thumbnails.high.url" stretch="aspectFill" colSpan="3" row="0"></Image>
<Label [text]="item.snippet.channelTitle" textWrap="true" row="2" colSpan="1" ></Label>
<Label [text]="item.snippet.title" textWrap="true" row="2" col="1" colSpan="2" >></Label>
</GridLayout>
</CardView>
</StackLayout>
</StackLayout>
</ScrollView>
I'm using the TKListViewHeaderDirective of teleriks RadListView in nativescript like so:
<GridLayout columns="*" rows="*" tkToggleNavButton>
<RadListView *ngIf="!loading" row="3" col="0" [items]="nodes" ...>
<ng-template tkListItemTemplate let-node="item">
<!-- list item -->
</ng-template>
<ng-template tkListViewHeader>
<GridLayout columns="*" rows="auto, auto, auto">
<GridLayout row="0" col="0" columns="40,*,40">
<Button class="fa action-item" row="0" col="0" [text]="'fa-sort-amount-asc' | fonticon" ios.position="right" android="actionBar" style="background-color:#c9c9ce;;"></Button>
<SearchBar row="0" col="1" #searchInput hint="Search" (submit)="search(searchInput.text)" (clear)="search('')" (textChange)="search(searchInput.text)"></SearchBar>
<Button class="fa action-item" row="0" col="2" [text]="'fa-th' | fonticon" ios.position="right" android="actionBar" style="background-color:#c9c9ce;"></Button>
</GridLayout>
<StackLayout row="1" col="0">
<Label text="Hello world"></Label>
<Label [text]="currentNode.name"></Label>
<Label [text]="nodes?.length ? nodes.length : 0"></Label>
</StackLayout>
<StackLayout row="2" col="0" *ngIf="!nodes?.length" class="list-group">
<!-- some contents -->
</StackLayout>
<StackLayout row="3" col="0" *ngIf="currentNode?.name !== '/'" class="list-group">
<!-- some contents -->
</StackLayout>
</GridLayout>
</ng-template>
</RadListView>
</GridLayout>
it seems like two things go wrong here:
this seems to be missing here (the *ngIf should show one of the StackLayouts in specific cases but does not
The GridLayout (does not have any effect if I change it to StackLayout) inside the list header shows only one child element
According to the docs: http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/ListView/header-footer
There is an issue on github concerning this: https://github.com/telerik/nativescript-ui-feedback/issues/207
# 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>