TextChange in repeater nativescript - nativescript

i trying do to textchange in repeater and research this link.
Basic blur event in a Telerik Nativescript Mobile App
It work in single textfield but no work in repeater. Isn't set wrong anything?
XML:
<Repeater id="lstSelectedItemsSingle" items="{{itemsSingle}}">
<Repeater.itemTemplate>
<GridLayout columns="auto,*,auto,*,auto" rows="auto,auto,1" padding="6" id = "{{ matchId + dataType + 'GridSingle'}}">
<GridLayout columns="*,*,*" rows="40" col="3" borderRadius="6" borderWidth="1" borderColor="#DBDBDB" >
<button backgroundImage="res://reduce_enable" style="background-repeat:no-repeat;background-position: 50% 50%" backgroundColor="#BFBFBF" />
<TextField col="1" backgroundColor="#ffffff" col="1" text="{{stake}}" style="text-align:center" keyboardType="number" />
<button backgroundImage="res://add_icon_enable" col="2" style="background-repeat:no-repeat;background-position: 50% 50%" backgroundColor="#BFBFBF" col="2"/>
</GridLayout>
</GridLayout>
</Repeater.itemTemplate>
</Repeater>
Model:
exports.onPageLoaded = function(args){
page = args.object;
viewM.set("stake", "2");
viewM.addEventListener(observable.Observable.propertyChangeEvent, function (event) {
console.log(event.propertyName);
}
});
}

It's probably because repeaters are bound to a list of items - usually observables. If you bind inside the repeater using "{{ }}", NativeScript is going to look for that method on that specific object in the repeater. So your code should be structured something like this (TypeScript) ...
import { Observable, EventData } from 'data/observable';
import { Page } from 'ui/page';
class Item extends Observable({
text: string = '';
constructor(text: string) {
this.text = text;
this.todos.on(ObservableArray.changeEvent, (args: any) => {
// handle text change
});
}
});
class ViewModel extends Observable({
items: ObservableArray<Items>
constructor() {
this.items = new ObservableArray<Items>({
new Item('Thing 1'),
new Item('Thing 2')
});
}
});
let loaded = (args: EventData) => {
let page = <Page>args.object;
page.bindingContext = new ViewModel();
}
export { loaded }

Related

Is there a decent drop down menu for Nativescript 7?

I'm looking for an open source NS7 replacement for the nativescript-drop-down menu. Does anyone have suggestions. I'm porting my app to NS7 and having trouble finding a replacement for what has gone to a paid version of the plugin.
My workaround was to open a modal that has the dropdown items and then receiving the chosen item in the closeCallback function, like so:
dropdown-modal.xml
<Page ios:class="bg-light" xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally">
<StackLayout class="modal-view">
<Label android:class="p-l-10 font-weight-normal font-size-larger" ios:class="h2 font-weight-bold p-l-15 p-t-10" text="{{ title }}"></Label>
<Label class="hr"></Label>
<ScrollView class="page" height="40%">
<ListView class="list-group" itemTap="{{ onItemTap }}" items="{{ data }}">
<ListView.itemTemplate>
<Label android:class="h4 text-center font-weight-bold p-b-10" ios:class="h3 text-center font-weight-bold p-y-10" width="100%" text="{{ value }}"
textWrap="true"></Label>
</ListView.itemTemplate>
</ListView>
</ScrollView>
</StackLayout>
</Page>
Notice the difference between Android and iOS classes. This makes the dropdown more system-like.
dropdown-modal.js
import { DropDownViewModel } from "./dropdown-view-model";
export const onShownModally = function(args) {
const dropDownViewModel = new DropDownViewModel(args.context.title, args.context.list, args.closeCallback);
const page = args.object;
page.bindingContext = dropDownViewModel;
};
dropdown-view-model.js
import { Observable, ObservableArray } from "#nativescript/core";
export class DropDownViewModel extends Observable {
constructor(title, items, closeCallback) {
super();
this.title = title;
this.data = new ObservableArray(items);
this.selectedItem = '';
this.closeCallback = closeCallback;
}
onItemTap(args) {
this.selectedItem = args.view.bindingContext;
this.closeCallback(this.selectedItem);
}
}
And this is how it is called in another page.
sample-page.xml
<!--Roles-->
<StackLayout class="m-y-10 m-x-2" row="2" col="1">
<Label class="far h3 p-l-15 text-black m-b-1" text=" Role" textWrap="true" />
<TextField editable="false" tap="{{ toggleDropdown }}" dataListId="roles" dataName="role" dataTitle="Role" class="h4 fal text-black input-border-rounded-lg" text="{{ role.value }}" />
</StackLayout>
Notice how dataListId, dataName, and dataTitle were passed.
sample-page.js
import { SamplePageViewModel } from "./sample-page-view-model";
const samplePageViewModel = new SamplePageViewModel();
export const onNavigatingTo = async function(args) {
await samplePageViewModel.populateRolesList();
};
export const onNavigatedTo = async function(args) {
const page = args.object;
page.bindingContext = samplePageViewModel;
};
sample-page-view-model.js
import { Frame, Observable } from "#nativescript/core";
import { LookupService } from "~/services/lookupService";
import { AppSettingsUtility } from "~/utilities/appSettingsUtility";
export class SamplePageViewModel extends Observable {
constructor() {
super();
this.lookupService = new LookupService();
this.appSettingsUtility = new AppSettingsUtility();
this.routes = this.appSettingsUtility.getRoutes();
this.roles = [];
this.role = { code: 0, value: '' };
}
async populateRolesList() {
this.set('roles', await this.lookupService.getRoles()); // assume roles list
}
toggleDropdown(args) {
const page = args.object.page;
const that = this;
const options = {
context: { title: args.object.dataTitle, list: that.get(args.object.dataListId) },
closeCallback: (selectedItem) => {
if(selectedItem)
that.set(args.object.dataName, selectedItem);
}
};
page.showModal(this.routes.dropdown, options);
}
}

How can I change color / backgroundColor of list item in nativescript-vue?

I want to update selected item style when user taps on items. nextIndex/event.index is updated but style doesn't apply. Thanks for your help.
https://play.nativescript.org/?template=play-vue&id=ihH3iO
export default {
name: "CustomListView",
props: ["page", "title", "items", "selectedIndex"],
data() {
return {
nextIndex: this.selectedIndex ? this.selectedIndex : undefined
};
},
methods: {
onItemTap(event) {
this.nextIndex = event.index;
}
}
};
.selected {
color: white;
background-color: black;
}
<ListView for="(item, index) in items" #itemTap="onItemTap">
<v-template>
<Label :class="['list-item-label', { selected: index == nextIndex }]" :text="item" />
</v-template>
</ListView>
More info about this issue.
This is expected behavior because the ListView's item template is rendered and updated by the list view when scrolling (view recycling) if you need to make sure the list view is updated when you change your property, call refresh on it.
So the solution is
<template>
<Page class="page">
<ActionBar title="Home" class="action-bar" />
<ListView v-for="(item, index) in items" #itemTap="onItemTap" ref="listView">
<v-template>
<Label :class="[{selected: index === nextIndex}, 'list-item-label']"
:text="item" />
</v-template>
</ListView>
</Page>
</template>
<script>
export default {
name: "CustomListView",
data() {
let selectedIndex = 2;
return {
items: ["Bulbasaur", "Parasect", "Venonat", "Venomoth"],
nextIndex: selectedIndex
};
},
methods: {
onItemTap(event) {
this.nextIndex = event.index;
this.$refs.listView.nativeView.refresh();
}
}
};
</script>
You need refresh your listView the code for that is this.$refs.listView.nativeView.refresh();
Don't forget to add the ref on the <ListView>

How do I update or refresh a RadListView item on iOS platform?

I have a RadListView that gets data from an Observable Array of objects and displays its content as text.
When modify one of the value of the object in the Observable Array, the RadListView does not refresh or update the value, even with radlist.refresh();
On Android :android: platform, this is not an issue, it works and refreshes fine, but on iOS platform it does not.
Here is my XML code
```<lv:RadListView items="{{ groceryList }}" id="marad" row="1" height="100%"
itemSwipeProgressStarted="onSwipeCellStarted" swipeActions="true">
<lv:RadListView.itemTemplate>
<GridLayout class="grocery-list-item">
<Label
id="nameLabel" textWrap="true" class="p-15 radlist" text="{{ 'ناو: ' + name + '\n' + ' بڕ: ' + quantity + '\n' + ' نرخی یەک دانە: ' + sellPrice }}" />
</GridLayout>
</lv:RadListView.itemTemplate>
<lv:RadListView.headerItemTemplate>
<StackLayout>
<Button class="btn btn-primary" text="خوێندنه‌وه‌ بە باڕکۆد" tap="barcodeSell"></Button>
<Label class="page-placeholder" text="نرخی گشتی" textWrap="true"/>
<Label
text="0"
id="totalprice"
textWrap="true"
class="input input-border"/>
<Button class="btn btn-primary" text="بفرۆشە" tap="tapSell"></Button>
</StackLayout>
</lv:RadListView.headerItemTemplate>
<lv:RadListView.itemSwipeTemplate>
<GridLayout columns="auto, *, auto">
<GridLayout id="increase-view" col="2" tap="onIncrease"
class="increase-view">
<Label
text="" class="fonticon duplic" />
</GridLayout>
<GridLayout id="delete-view" col="0" tap="onDelete"
class="delete-view">
<Label
text="" class="fonticon duplic" />
</GridLayout>
</GridLayout>
</lv:RadListView.itemSwipeTemplate>
</lv:RadListView>```
Here is my 'modify the value' function in JS:
exports.onIncrease = function (args) {
var item = args.view.bindingContext;
var index = groceryList.indexOf(item);
var totalPrice = groceryList.getItem(index).sellPrice;
var element = groceryList.getItem(index);
var quantity = groceryList.getItem(index);
var quantity3 = quantity["quantity"];
dialogs.prompt({
message: "بڕی کاڵاکە دیاریبکە",
okButtonText: "هەڵبژێرە",
cancelButtonText: "داخە",
inputType: dialogs.inputType.number
}).then(function (r) {
if(r.result) {
element["quantity"] = r.text;
groceryList.setItem(index, element);
sumPrice = (sumPrice - (Number(totalPrice)*Number(quantity3)));
sumPrice = sumPrice + (Number(r.text)*Number(totalPrice));
label.text = sumPrice;
radlist.refresh();
}
else {
var rslt = false;
}
});
};
Here is the code which feeds the RadListView:
function onNavigatingTo(args) {
const page = args.object;
label = page.getViewById("totalprice");
const sideDrawer = app.getRootView();
sideDrawer.gesturesEnabled = false;
spanquantity = page.getViewById("quantbtn");
groceryList = new ObservableArray([
]);
pageData = observableModule.fromObject({
groceryList: groceryList,
});
page.bindingContext = pageData;
radlist = page.getViewById("marad");
sumPrice = 0;
}
exports.onNavigatingTo = onNavigatingTo;
And then an item data is pushed to the Observable Array if the input barcode was found the database, but this is not related to this issue, I'm saying these to make the code clear.
One more thing, if I swipe RadListView and tap delete item button, it deletes the item fine, so, in the case of delete button, it updates and refreshes the list, I guess.
So, this issue is related to the increase item quantity process.

RadListView better scrollToIndex() behavior

RadListView.scrollToIndex() seems to display the selected item at the bottom of the current window always - regardless of whether the item is already visible or not.
Is there a function like RadListView.isVisible()?
I have just tested the given scenario with scrollToIndex() and was unable to reproduce such a behavior. Selected row has been always displayed in the top of the screen. You could review my sample code.
main-page.xml
<Page loaded="onPageLoaded" xmlns:lv="nativescript-telerik-ui-pro/listview" xmlns="http://www.nativescript.org/tns.xsd">
<lv:RadListView id="rdid" loaded="radlistviewlaoded" items="{{ dataItems }}" >
<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>
</Page>
main-page.ts
import { EventData } from "data/observable";
import { Page } from "ui/page";
import { HelloWorldModel } from "./main-view-model";
import { ObservableArray } from "data/observable-array";
import { RadListView } from "nativescript-telerik-ui-pro/listview";
import {setTimeout} from "timer"
// Event handler for Page "navigatingTo" event attached in main-page.xml
export function onPageLoaded(args: EventData) {
// Get the event sender
var page = <Page>args.object;
var listview:RadListView = <RadListView> page.getViewById("rdid");
console.log("listview visibility "+listview.visibility);
//listview.scrollToIndex(3);
var array = new ObservableArray();
for(var i=0;i<20;i++){
array.push({itemName:"Name "+i, itemDescription:"desc "+i});
}
setTimeout(function(){
listview.scrollToIndex(3)
}, 2000)
page.bindingContext = {dataItems:array};
}
export function radlistviewlaoded(args:EventData){
console.log("RadListView loaded");
}
About the second question you could use loaded event in case you want to know when the view has been loaded on the screen. In case you would like to know if the RadListview is visible you could use visibility property.

in Listview while scrolling and fast click on item unable to stop scroll, intead it will open a item?

In listview inside i have listview template and its inside have different element and different tap event listener.
In IOS scroll fast and fast touch on screen.
it navigates to item page instead of stop scrolling so i would like to approach below method to stop scroll. Unable to fix.
Expected Result: To Stop Scroll
If touch on screen to stop scroll and then i touch on screen open item page.
Actual Result: It goes to els part, Unable to stop scroll.
While scrolling touch on screen(Tap event raised) instead of stop the scroll.
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
<ListView items="{{ menu }}" row="1" id="mylist" >
<ListView.itemTemplate>
<GridLayout columns="auto, *">
<Image src="{{ imageURL }}" row="0" cssClass="icon" tap="myTapListener"/>
<StackLayout col="1" tap="myTapListener1">
<Label text="{{ title }}" cssClass="name"/>
<Label text="{{ subtitle }}" cssClass="location"/>
</StackLayout>
</GridLayout>
</ListView.itemTemplate>
</ListView>
</Page
exports.myTapListener = function(args) {
var item = args.object;
if(item.page.getViewById("mylist").isScrolling) {
console.log("Scroll stopped: " + item.page.getViewById("mylist).isScrolling);
return;
} else {
console.log("unable to stop:" + item.page.getViewById("mylist).isScrolling);
}
}
exports.myTapListener1 = function(args) {
var item = args.object;
if(item.page.getViewById("mylist").isScrolling) {
console.log("Scroll stopped: " + item.page.getViewById("mylist).isScrolling);
return;
} else {
console.log("unable to stop:" + item.page.getViewById("mylist).isScrolling);
}
}
The Js code needs to be:
var frame = require('ui/frame');
exports.myTapListener = function(args) {
var page = frame.topmost().currentPage;
if(page.getViewById("mylist").isScrolling) {
console.log(page.getViewById("mylist").isScrolling);
} else {
topmost().navigate("module/a1")
}
}
exports.myTapListener1 = function(args) {
var page = frame.topmost().currentPage;
if(page.getViewById("mylist").isScrolling) {
console.log(page.getViewById("mylist).isScrolling);
} else {
topmost().navigate("module/a2")
}
}
args.object in these event handlers is NOT the page object; but the item generating the event. So you just need to reference to the currentPage which frame.topmost().currentPage

Resources