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.
Related
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>
I am trying to achieve the following:
I tried achieving this with a GridLayout and only get one of the following two things working:
The space between the Label and the StackLayout is filled (label is
stretched), but scrolling will not work when adding more labels into
the StackLayout
Scrolling will work when more labels are added into
the StackLayout, but when only one label is showed for example, the
label before the StackLayout will not stretch
Is there any way to achieve such a thing? GridLayout is not necessarily needed, but I tried several ways and could not find any way of doing this.
example code of (1)
<Page class="page dark">
<ScrollView backgroundColor="red">
<GridLayout rows="*, auto" height="100%" backgroundColor="blue">
<Label backgroundColor="green">Top Label</Label>
<StackLayout row="1" backgroundColor="green">
<Label backgroundColor="purple">Label A</Label>
<Label backgroundColor="purple">Label B</Label>
</StackLayout>
</GridLayout>
</ScrollView>
</Page>
example code of (2):
<Page class="page dark">
<ScrollView backgroundColor="red">
<GridLayout rows="*, auto" backgroundColor="blue">
<Label backgroundColor="green">Top Label</Label>
<StackLayout row="1" backgroundColor="green">
<Label backgroundColor="purple">Label A</Label>
<Label backgroundColor="purple">Label B</Label>
</StackLayout>
</GridLayout>
</ScrollView>
</Page>
I wanted to achieve this for months and I finally found a working solution, for iOS and Android.
The solution is to use FlexboxLayout instead of GridLayout. When placed in a ScrollView, FlexboxLayout will take the whole available height if it is not tall enough. If it is taller than the ScrollView, it will be scrollable.
Here is the solution for your example:
<Page class="page dark">
<ScrollView backgroundColor="red">
<FlexboxLayout
flexDirection="column"
justifyContent="space-between"
alignItems="stretch"
backgroundColor="blue"
>
<Label backgroundColor="green">Top Label</Label>
<StackLayout backgroundColor="green">
<Label backgroundColor="purple">Label A</Label>
<Label backgroundColor="purple">Label B</Label>
</StackLayout>
</FlexboxLayout>
</ScrollView>
</Page>
In my HTML file I have this markup: While the ActionBar shows the title , the tabviews in the stacklayout are not visible at all and I get no errors, but I do not understand why??? I am new to nativescript... ;-)
Anyone can see what I do wrong?
<ActionBar title="Working days planner" class="action-bar">
</ActionBar>
<StackLayout class="page">
<TabView id="tabViewContainer">
<TabViewItem title="First Tab">
<StackLayout>
<Label text="Working days" class="action-label m-15"></Label>
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>
</ng-template>
</ListView>
</StackLayout>
</TabViewItem>
<TabViewItem title="Second Tab">
<StackLayout>
<Label text="Second Tab" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
</StackLayout>
</TabViewItem>
</TabView>
</StackLayout>
The StackLayout code in the first TabViewItem does work when its put under the ActionBar, but the TabView component somehow screws everything.
I haven't seen that syntax with the TabViewItem element. Try starting from a simpler example from the documentation page:
NativeScript TabView for Angular
Once you get a basic example working take incremental steps to change the content over to yours. Also, this is a basic feature so you can set up a Playground example and share that if you have specific problems.
Try removing the StackLayout above, you really don't need it.
I'm trying to build an scrollable list by using a StackLayout with an ngFor (and a ScrollView, of course).
This is my code:
<StackLayout class="home-panel" verticalAlignment="top">
<StackLayout orientation="horizontal">
<!--Suggest Append SuggetAppend -->
<RadAutoCompleteTextView #autocmp [items]="items" suggestMode="Suggest" displayMode="Plain" width="80%">
<SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="300">
<ng-template tkSuggestionItemTemplate let-item="item">
<StackLayout orientation="vertical" padding="10">
<Label [text]="item.text"></Label>
</StackLayout>
</ng-template>
</SuggestionView>
</RadAutoCompleteTextView>
<Button text="Add" (tap)="onAdd()" width="20%"></Button>
</StackLayout>
<ScrollView>
<StackLayout *ngFor="let item of this.shopList">
<Label text="{{item}}" (tap)="itemSelected(item)" fontSize="36"></Label>
</StackLayout>
</ScrollView>
</StackLayout>
The problem arises with the ScrollView at the end of the main StackLayout, which apparently shows only the last element in the shoppingList. The functionality I want to have is a text box on top (with an 'add' button on the same line), and a scrollable list filling the rest of the screen.
You have to wrap your StackLayout with the *ngFor into another Layout container, so the ScrollView can calculate the height.
...
<ScrollView>
<StackLayout>
<StackLayout *ngFor="let item of this.shopList">
<Label text="{{item}}" fontSize="36"></Label>
</StackLayout>
</StackLayout>
</ScrollView>
...
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!