how to make a radautocompletetextview with prefilled using nativescript-angular?
This is how i am trying to do it:
HTML:
<RadAutoCompleteTextView id="rice-cake" (didAutoComplete)="onTokenSelected($event)" marginTop="40px" style="border-width:0.5;border-radius:5px;border-color:#E6E6E6;"
#autocmp [items]="dataItems" suggestMode="Suggest" displayMode="Plain">
<SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="150">
`enter code here`<ng-template tkSuggestionItemTemplate let-item="item">
<StackLayout orientation="vertical" padding="10">
<Label [text]="item.text"></Label>
</StackLayout>
</ng-template>
</SuggestionView>
</RadAutoCompleteTextView>
TypeScript:
this.autocomplete =
<RadAutoCompleteTextView>view.getViewById(this.page,"rice-cake");
console.log(JSON.stringify(this.autocomplete))
var token = new TokenModel(_result.dish, undefined);
this.autocomplete.addToken(token)
You may want to check this out:
https://github.com/telerik/nativescript-ui-feedback/issues/323
Related
I try out Svelte Native and I try to hide "tags" with booleans. I try this, which works in the normal Svelte framework like:
{#if po.id !== null || po.id !== undefined}
<flexboxLayout flexWrap="wrap" class="v-a-c t-a-c" >
<label text="first" width="70%" backgroundColor="#63c3d0" class="m6"></label>
<label text="second" width="70%" backgroundColor="#63c3d0" class="m6"></label>
<label text="third" width="70%" backgroundColor="#63c3d0" class="m6"></label>
</flexboxLayout>
{:else }
<stackLayout flexWrap="wrap" class="v-a-c t-a-c">
<textField bind:text="{personName}" class="m6 new-person" ></textField>
<button text="add new value" on:tap="{createNewPlayer}" />
</stackLayout>
{/if}
So why it doesn't work? What am I doing wrong?
I want to have bottom navigation in my app as described on this page but I also have a login page which should not have the bottom navigation tabs. So as the user enters the app, he's shown the login page and after login he should get to the first tab of the bottom navigation. The docs do not mention how this would be achieved. How can this be done?
Attempt 1:
app.js
let startPage = 'login/login-page';
if(settings.hasKey('token')){
startPage = 'app-root';
}
application.run({ moduleName: startPage });
This does take me to the login page but then nothing works to get me to app-root or another similar page that could house a BottomNavigation
Attempt 2:
On login page, nothing happens.
app.js
application.run({ moduleName: 'app-root' });
app-root.xml
<Frame defaultPage="login/login-page"></Frame>
login/login-page.js
//send email and password. check if its correct. send user forward on authentication
page.frame.navigate({
moduleName: 'router/router-page',
clearHistory: true
});
router/router-page.xml
<BottomNavigation id="bottomNav" automationText="tabNavigation" selectedIndex="0">
<TabStrip>
<TabStripItem>
<Image src="font://" class="mdi"></Image>
<Label text="Products"></Label>
</TabStripItem>
<TabStripItem>
<Image src="font://" class="mdi"></Image>
<Label text="Gallery"></Label>
</TabStripItem>
</TabStrip>
<TabContentItem>
<Frame id="main" defaultPage="categories/categories-page"></Frame>
</TabContentItem>
<TabContentItem>
<Frame id="gallery" defaultPage="gallery/gallery-page"></Frame>
</TabContentItem>
</BottomNavigation>
//note there's no router-page.js
//is it necessary?
This exact scenario can be found in this post:
https://www.nativescript.org/blog/implementing-a-login-for-nativescript-apps-with-tab-based-navigation
The repo (https://github.com/NativeScript/login-tab-navigation-ng) is using TabView but you can quickly change that to use the newer BottomNavigation instead.
Here's how I finally did it
app.js
application.run({ moduleName: 'app-root' });
app-root.xml
<Page actionBarHidden="true" loaded="onLoaded" xmlns="http://schemas.nativescript.org/tns.xsd">
<Frame id="rootframe" defaultPage="{{ defaultPage }}"></Frame>
</Page>
app-root.js
const Observable = require("#nativescript/core/data/observable").fromObject;
const settings = require("#nativescript/core/application-settings");
exports.onLoaded = function(args){
const page = args.object;
page.bindingContext = Observable({
defaultPage: (settings.hasKey('token')) ? 'router/router-page' : 'login/login-page'
})
}
router/router-page.xml
<Page actionBarHidden="true" loaded="onLoaded" class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
<BottomNavigation id="bottomNav" automationText="tabNavigation" selectedIndex="0" selectedIndexChanged="onSelectedIndexChanged">
<TabStrip>
<TabStripItem>
<Image src="font://" class="mdi"></Image>
<Label text="Products"></Label>
</TabStripItem>
<TabStripItem>
<Image src="font://" class="mdi"></Image>
<Label text="Gallery"></Label>
</TabStripItem>
</TabStrip>
<TabContentItem>
<Frame id="main" defaultPage="categories/categories-page"></Frame>
</TabContentItem>
<TabContentItem>
<Frame id="gallery" defaultPage="gallery/gallery-page"></Frame>
</TabContentItem>
</BottomNavigation>
</Page>
Why does this following code produce this result: https://imgur.com/a/lQhLs8o ?
However, if I move the BottomNavigatorBar component to top position before CountryListComponent, it produces the desired result that looks like this: https://imgur.com/a/23z7bb2 ?
<template>
<Page actionBarHidden="true">
<DockLayout height="100%">
// first
<CountryListComponent dock="top">
// second
<BottomNavigationBar dock="bottom" activeColor="pink"
inactiveColor="yellow"
backgroundColor="black"
verticalAlignment="bottom"
#tabSelected="this.changeTab"
row="1">
<BottomNavigationTab title="Fiaarst" icon="icon-29.png" />
<BottomNavigationTab title="Second" icon="icon-29.png" />
<BottomNavigationTab title="Third" icon="icon-29.png" />
</BottomNavigationBar>
</DockLayout>
</Page>
</template>
CountryListComponent
<template>
<StackLayout backgroundColor="blue">
</StackLayout>
</template>
Refer the DockLayout documentation, by default stretchLastChild will be true which means BottomNavigationBar will take entire space if it's last child and vice versa.
I'm unable get showModal to pass context through a frame to the default page. Also, showingModally does not seem to fire when modal is loaded (I guess args from showingModally should pass context?).
I've tried the example provided on https://docs.nativescript.org/ui/modal-view under Custom Actionbar, because I need the modal to load within a frame. The modal opens and closes fine, but showingModally in the modal XML does not seem to run.
home/home-page.js
const modalView = "home/modal-root";
function openModal(args) {
console.log('Opens modal');
const mainpage = args.object.page;
const context = "some context";
mainpage.showModal(modalView, context, () => {
console.log('Modal closed');
}, true);
}
exports.openModal = openModal;
home/home-page.xml
<Page xmlns="http://www.nativescript.org/tns.xsd">
<Page.actionBar>
<ActionBar title="Modal view Navigation" />
</Page.actionBar>
<GridLayout rows="auto, *">
<Button text="Open modal" tap="openModal" textWrap="true" />
</GridLayout>
</Page>
home/modal-root.xml
<Frame defaultPage="home/modal-view-page" />
home/modal-view-page.js
function onShowingModally(args) {
console.log("onShowingModally");
}
exports.onShowingModally = onShowingModally;
function onCloseModal(args) {
args.object.closeModal();
}
exports.onCloseModal = onCloseModal;
home/modal-view-page.xml
<Page backgroundColor="green" showingModally="onShowingModally">
<Page.actionBar>
<ActionBar backgroundColor="red" title="Modal view" icon="">
</ActionBar>
</Page.actionBar>
<StackLayout backgroundColor="lightGreen">
<Label text="Modal view with ActionBar" style="text-align:center;" textWrap="true" />
<Button text="Close Modal" tap="onCloseModal" />
</StackLayout>
</Page>
I've added the example to https://play.nativescript.org/?template=play-js&id=lFxTi4&v=9
with console logging.
Console show "Opens modal" on open and "Modal closed" on close as expected (from home/home-page.js), but "onShowingModally" (home/modal-view-page.js) nevers shows in console.
I think the docs need to be fixed. When you have the Frame being shown modally, the event will be called on the Frame not on the page within. If you are showing a simple view instead of Frame, then the event should be called on the view, basically whatever is the root view for your modal and in your example it's the Frame.
Updated Playground
I'm using Telerik UI plugin in my NativeScript app for implementing drawer functionality.I'm following this tutorial for this - https://www.nativescript.org/blog/details/using-cross-platform-native-sidedrawer-component-in-nativescript
Here is my Code-
import {Component} from "#angular/core";
import listViewModule = require("nativescript-telerik-ui/listview");
import drawerModule = require("nativescript-telerik-ui/sidedrawer");
#Component({
selector: "my-app",
template: `
<drawer:SideDrawer id="drawer1">
<drawer:SideDrawer.mainContent>
<!-- Place your page content here -->
<StackLayout>
<Label text="Tap the button" class="title"></Label>
<Button text="TAP" (tap)="onTap()"></Button>
<Label [text]="message" class="message" textWrap="true"></Label>
</StackLayout>
<StackLayout>
<Button tap="openDrawer" text="ToggleDrawer"/>
</StackLayout>
</drawer:SideDrawer.mainContent>
<drawer:SideDrawer.drawerContent>
<StackLayout cssClass="drawerContent">
<StackLayout cssClass="headerContent">
<Label text="Drawer Header"/>
</StackLayout>
<StackLayout cssClass="drawerMenuContent">
<Label text="Item 1"/>
<Label text="Item 2"/>
<Label text="Item 3"/>
<Label text="Item 4"/>
</StackLayout>
</StackLayout>
</drawer:SideDrawer.drawerContent>
</drawer:SideDrawer>
`,
})
export class AppComponent {
public counter: number = 16;
public get message(): string {
if (this.counter > 0) {
return this.counter + " taps left";
} else {
return "Hoorraaay! \nYou are ready to start building!";
}
}
public onTap() {
this.counter--;
}
}
When I'm running this in my Emulator I'm getting a blank page. I'm using AngularJS2 with typescript & totally new to both these tools. So, can't able to understand what's I'm doing wrong.
Need some Guide.
nativescript-telerik-ui\listview and sidedrawer was before 2.0.0-rc.1 so they are currently working on it you can check this link - https://github.com/telerik/nativescript-ui-samples-angular/issues/1#issuecomment-225791969
if you are using beta version of angular then check this link to repository - https://github.com/telerik/nativescript-ui-samples-angular/tree/release/sdkAngular/app/sidedrawer