davecoffin / nativescript-filterable-listpicker Goto Github PK
View Code? Open in Web Editor NEWLicense: Apache License 2.0
License: Apache License 2.0
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
tns --version
to fetch it) - 4.2.0node_modules/tns-core-modules/package.json
file in your project)"tns-android"
and "tns-ios"
properties in the package.json
file of your project) - 4.2.0package.json
file of yourDescribe the steps to reproduce it.
Unlike in the animated example the picker popup is missing the white box around the content. Screenshot attached.
If the this is called from a disable TextField's tap even the focusOnShow doesnt work property. If i switch from a TextField to a label or button it works fine.
But i use the to help with a form where there are textBoxes.
I have an screen with the base parent layout as scroll view inside scroll view single stack layout and inside that many fields where there i have placed a country code picker using nativescript-filterable-listpicker everything works fine on ios, ina android the scroll view takes over the scroll of listpicker
hear is the code
what i am missing ?
<FilterableListpicker [rowSpan]="rowSpan" #myfilter blur="dark" enableSearch="true" [hintText]="hintText" [source]="source" (canceled)="cancelFilterableList($event)"
(itemTapped)="itemTapped($event)"></FilterableListpicker>
styling
.flp-container .flp-list-container {
border-radius: 10;
}
.flp-container .flp-list-container .flp-listview {
background-color: white;
}
.flp-container .flp-list-container .flp-listview .flp-row {
background-color: white;
}
/* .flp-container .flp-list-container .flp-listview .flp-row .flp-row-container {
padding: 10;
} */
.flp-container .flp-list-container .flp-listview .flp-row .flp-image {
margin: 10 0 10 5;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container {
margin: 10 10 10 5;
/* margin: 0 10 0 10; */
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-title {
font-weight: bold;
font-size: 16;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-description {
color: gray;
font-size: 13;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-no-title {
margin-left: 15;
padding: 10 0;
}
.flp-container .flp-list-container .flp-listview .flp-row .flp-item-selected {
color: lightblue;
}
.flp-container .flp-hint-field {
padding: 10 15;
height: 40;
background-color: #E0E0E0;
border-radius: 10 10 0 0;
}
.flp-container .flp-cancel-container {
background-color: #E0E0E0;
height: 40;
border-radius: 0 0 10 10;
}
.flp-container .flp-cancel-container .flp-btn-cancel {
font-weight: bold;
height: 40;
background-color: transparent;
border-color: transparent;
border-width: 1;
font-size: 12;
}
Hi Dave, this is more of a question on how to implement this than a bug of course.
I have a long form inside a Scrollview to allow for more space for the inputs.
I was able to put the picker on top thanks to your demo. But I can't figure out how to have the blur on the full page (the scrollable part goes without blur).
Also, and more important it seems that the scrolling within the long picker list can't be.. scrolled.
Any tip on how to best lay this out? Thanks!
<ScrollView>
<GridLayout rows="" columns="">
<GridLayout rows="*, auto, *">
<StackLayout class="form">
<StackLayout class="input-field">
<Label text="My Label" class="form-label font-weight-bold m-b-5" />
<TextView text="{{ listArray.req_cuit }}" class="input" hint="Enter data" returnKeyType="next" />
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
( .... Lot more input-field stacks ... )
</StackLayout>
</GridLayout>
<ui:FilterableListpicker id="picker" blur="dark" hintText="Tipee para buscar..." source="{{ pickerItems }}" itemTapped="pickerTapped" listHeight="435" />
</GridLayout>
</ScrollView>
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
"dependencies": {
"@angular/animations": "~6.1.0",
"@angular/common": "~6.1.0",
"@angular/compiler": "~6.1.0",
"@angular/core": "~6.1.0",
"@angular/forms": "~6.1.0",
"@angular/http": "~6.1.0",
"@angular/platform-browser": "~6.1.0",
"@angular/platform-browser-dynamic": "~6.1.0",
"@angular/router": "~6.1.0",
"nativescript-algolia": "0.0.4",
"nativescript-angular": "^6.1.0",
"nativescript-camera": "^4.0.2",
"nativescript-email": "^1.5.3",
"nativescript-filter-select": "^1.2.9",
"nativescript-filterable-listpicker": "^2.1.0",
"nativescript-geolocation": "^4.2.6",
"nativescript-imagepicker": "^5.0.2",
"nativescript-iqkeyboardmanager": "^1.3.0",
"nativescript-ngx-slides": "^6.0.0",
"nativescript-pdf-view": "^2.0.1",
"nativescript-plugin-firebase": "^6.5.0",
"nativescript-social-share": "^1.5.0",
"nativescript-theme-core": "~1.0.4",
"nativescript-toast": "^1.4.6",
"nativescript-ui-listview": "^3.5.11",
"nativescript-web-image-cache": "^4.2.2",
"reflect-metadata": "~0.1.8",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.2.2",
"tns-core-modules": "^4.2.0"
},
"devDependencies": {
"@angular/compiler-cli": "~6.1.0",
"@ngtools/webpack": "~6.1.0",
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"codelyzer": "~4.0.2",
"es6-promise-loader": "^1.0.2",
"lazy": "1.0.11",
"nativescript-dev-typescript": "^0.7.1",
"nativescript-dev-webpack": "^0.15.1",
"prettier": "^1.11.1",
"tslint": "^5.1.0",
"typescript": "~2.7.2",
"webpack": "^4.17.1",
"zone.js": "^0.8.26"
}
Have setup the plugin as described in the ReadMe file. On triggering showPicker()
the list of items shows correctly. However when I type in any string in the filterable listpicker the list of items becomes empty and nothing shows. Am not getting any error logs on the IOS (emulator) but on the android device I get the following error message
JS: search box focused.
JS: ERROR TypeError: _co.onSearchFocus is not a function
JS: ERROR CONTEXT {
JS: "view": {
JS: "def": {
JS: "nodeFlags": 453099521,
JS: "rootNodeFlags": 402653185,
JS: "nodeMatchedQueries": 6,
JS: "flags": 0,
JS: "nodes": [
JS: {
JS: "nodeIndex": 0,
JS: "parent": null,
JS: "renderParent": null,
JS: "bindingIndex": 0,
JS: "outputIndex": 0,
JS: "checkIndex": -1,
JS: "flags": 402653184,
JS: "childFlags": 0,
JS: "directChildFlags": 0,
JS: "childMatchedQueries": 0,
JS: "ngContentIndex": -1,
JS: "matchedQueries": {},
JS: "matchedQueryIds": 0,
JS: "references": {},
JS: "childCount": 0,
JS: "bindings": [],
JS: "bindingFlags": 0,
JS: "outputs": [],
JS: "element": null,
JS: "provider": null,
JS: "text": null,
JS: "query": {
JS: "id": 1,
JS: "filterId": 2,
JS: "bindings": [
JS: {
JS: "propName": "subjects",
JS: "bindingType": 0
JS: }
JS: ]
JS: },
JS: "...
<GridLayout #myGrid>
<StackLayout>
<Label text="Whats your favorite programming language?"></Label>
<Button text="Choose a Language" (tap)="showPicker()"></Button>
</StackLayout>
<FilterableListpicker #myfilter blur="dark" hintText="Type to filter..." [source]="showLessons" (canceled)="cancelFilterableList($event)" (itemTapped)="itemTapped($event)"></FilterableListpicker>
</GridLayout>
TS File
import {
Component,
OnInit,
ViewChild,
ElementRef,
Input,
AfterViewInit
} from "@angular/core";
import { FormGroup } from "@angular/forms";
import { registerElement } from "nativescript-angular/element-registry";
import { GradeSubjectService } from "../../services/grade-subject.service";
import { SearchModalComponent } from "../searchbar/searchModal.component";
registerElement(
"FilterableListpicker",
() => require("nativescript-filterable-listpicker").FilterableListpicker
);
@Component({
moduleId: module.id,
selector: "lessons",
templateUrl: "./lessons.component.html"
})
export class LessonsComponent implements OnInit, AfterViewInit {
@Input()
group: FormGroup;
@Input()
subjectSelected: any;
@Input()
gradeSelected: any;
@Input()
searchGrades: any;
@Input()
searchSubjects: any;
@ViewChild("myfilter")
myfilter: ElementRef;
@ViewChild("myGrid")
myGrid: ElementRef;
allLessons: any;
showLessons: any[];
constructor(private gradeSubjectService: GradeSubjectService) {
this.allLessons = this.gradeSubjectService.lessonsObject;
this.showLessons = [];
}
ngOnInit() {
console.log(
"subject selected in lessons is" + JSON.stringify(this.subjectSelected)
);
}
ngAfterViewInit() {
if (this.subjectSelected && this.gradeSelected) {
for (let key in this.searchSubjects) {
// skip loop if the property is from prototype
if (!this.searchSubjects.hasOwnProperty(key)) continue;
const subject = key;
for (let key2 in this.allLessons[subject]) {
const grade = key2;
this.prepareLessons(this.allLessons[subject][grade]);
}
}
// this.showLessons = this.allLessons[this.searchSubjects];
}
}
cancelFilterableList() {
console.log("canceled");
}
itemTapped(args) {
console.log("selected lesson is " + args.selectedItem);
}
showPicker() {
this.myfilter.nativeElement.show(this.lessonGrid.nativeElement);
}
prepareLessons(lessonObject) {
const self = this;
// const tempLessons = [];
for (const lesson of lessonObject) {
const lessonName = Object.keys(lesson);
const aLessonObject = { title: lessonName[0] };
self.showLessons.push(aLessonObject);
}
console.log("number of items is " + this.showLessons.length);
}
}
I did
I did
Android device
CLI: 4.2.4-2018-09-17-12236
Cross-platform modules: 4.2.1
Runtime(s): tns-ios: 4.2.0 / tns-android: 4.2.0
Plugin(s):
nativescript-camera ^4.0.3
nativescript-drop-down ^4.0.1
nativescript-email ^1.5.3
nativescript-filterable-listpicker ^2.2.3
nativescript-plugin-firebase ^7.3.0
nativescript-slides ^2.2.14
nativescript-theme-core ~1.0.4
nativescript-ui-dataform ^3.7.3
tns-core-modules ~4.2.0
DevDependencies
eslint ~4.9.0
nativescript-dev-sass ~1.6.0
nativescript-dev-typescript ^0.7.4
nativescript-dev-webpack ~0.16.0
typescript ^3.1.3
Describe the steps to reproduce it.
Using Nativescript Core, create slides in XML file using nativescript-slides plugin and create two FilterableListpicker widgets each in a separate slide. The first one displays (using show() function) but the second one does not and any widgets beneath it do not render in the view.
I tried to set each FilterableListpicker in each it's own namespace in the XML file but that didn't work. Tried to display multiple nativescript-drop-down widgets and that worked so the issue seems to be with the FilterableListpicker.
<Page class="page" navigatedTo="onNavigatedTo" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:Slides="nativescript-slides" xmlns:dd="nativescript-drop-down" xmlns:ui="nativescript-filterable-listpicker"> <ActionBar class="action-bar"> <NavigationButton text="Back" android.systemIcon="ic_menu_back" tap="{{ goBack }}"/> <Label class="action-bar-title" text="Stool Test"></Label> </ActionBar> <Slides:SlideContainer id="slides" pageIndicators="true" disablePan="true" pageIndicators="true" > <Slides:Slide class="slide-5"> <Label class="text-primary m-10" text="Stool Type" /> <Button class="btn btn-outline m-10" id="typeResult" tap="showListPicker" text="" /> <ui:FilterableListpicker id="type" blur="dark" source="{{ typeItems }}" itemTapped="{{ typeTapped }}" enableSearch="false" showCancel="false" /> <Button id="next" text="Next" class="btn btn-primary" tap="{{ nextSlide }}" /> </Slides:Slide> <Slides:Slide class="slide-6"> <Label class="text-primary m-10" text="Stool Color" /> <Button class="btn btn-outline m-10" id="colorResult" tap="showListPicker" text="" /> <ui:FilterableListpicker id="color" blur="dark" source="{{ colorItems }}" itemTapped="{{ colorTapped }}" enableSearch="false" showCancel="false" /> <Button id="next" text="Next" class="btn btn-primary" tap="{{ nextSlide }}" /> </Slides:Slide> </Slides:SlideContainer> </Page>
I appreciate the work put in to the plugin.
I have added this to the view and call
page.getViewById("myfilter").show();
but nothing happens in them emulator. any ideas? I can pull all properties from the filter picker but it just never shows
I have a filterable listpicker and I update it several times with different list as the user fills out a form. But the issue i have ran into if i load List A and the user scrolls down to select an item. The later on i load List B the list is show at the last scroll position. I need the ability to reset the scroll position everytime i update the list of items
Request / Question
"dependencies": { "nativescript-angular": "5.2.0", "nativescript-barcodescanner": "2.7.4", "nativescript-filterable-listpicker": "^2.0.0", "nativescript-i18n": "0.2.4", "nativescript-mapbox": "3.3.0", "nativescript-ng-shadow": "2.1.0", "nativescript-ngx-fonticon": "4.0.0", "nativescript-permissions": "1.2.3", "nativescript-pro-ui": "3.3.0", "nativescript-secure-storage": "2.2.1", "nativescript-swift-3.0": "1.0.0", "nativescript-swing-u": "file:nativescript-swing-u", "nativescript-textinputlayout": "2.0.2", "nativescript-theme-core": "1.0.4", "node-forge": "0.7.1", "reflect-metadata": "0.1.12", "rxjs": "5.5.6", "tns-core-modules": "3.4.0", "zone.js": "0.8.20" }, "devDependencies": { "babel-traverse": "6.26.0", "babel-types": "6.26.0", "babylon": "6.18.0", "lazy": "1.0.11", "nativescript-dev-sass": "1.3.5", "nativescript-dev-typescript": "0.6.0", "tns-platform-declarations": "3.4.0", "typescript": "2.6.2" }
Setting a font colour in a common or base scss file such as the following:
Page { background-image: url('~/images/foo.png'); background-repeat: no-repeat; background-position: center; background-size: cover; font-size: $font-size; color: $text-color; }
Then import that base scss file into any component that is using the FilterableListPicker
So the above where $text-color represents "white" or "#fff", results in the font colours being overridden.
I guess what I'm asking for is more of a feature request which allows passing a class to colour the modal or at least set the font colours.
I can force all colours to be black by setting a scss file style as:
FilterableListpicker{ color: "black" }
However going beyond this and specifying:
FilterableListpicker{ color: "black"; Button{ color: "red"; } }
Is not possible.
The obvious work around is to not import the common styling scss file or for components which require the FilterableListpicker.
However I don't think it's ideal that the component's font colours are not able to be specified or enforce the default style considering the rest of the styling is done via styles in the template.
If there is a better way of styling the component that I have missed I welcome any response.
Thanks for your work.
How can we change the default property "title" to something different ?
It would be nice to be able to bind this list to an array of objects and pass in the displayText property.
Example
listItems = [
{Id: 1, Name: "Item 1"},
{Id: 2, Name: "Item 3"},
{Id: 3, Name: "Item 3"},
]
It would be nice to have a property flag to be able to set the filter list to Auto focus on the textbox upon show
Most likely a question, not a bug. Nice plugin btw.
I'm wondering how I can set this up to work as a modal in nativescript-vue?
I have a StackLayout within a GridLayout, and it has many elements, and put a Button and the FilterableListpicker at the very bottom. Something like this:
<GridLayout>
<StackLayout>
(...)
<Button text="Choose an Item" @tap="showPicker()"></Button>
<FilterableListpicker focusOnShow=true ref="myFilter" @canceled="" @itemTapped="itemTapped($event)" listHeight=400 listWidth="100%" blur="light" :source="myList" hintText="Search...">
</FilterableListpicker>
</StackLayout>
</GridLayout>
And this would be the function to show it.
showPicker() {
this.$refs.myFilter.nativeView.show(?);
}
I'm not really sure what to send as a parameter ("?"), as in the docs it says it could be a Page or a GridLayout container, but where/how should I place those Page/GridLayout containers in order to make it look like a Modal? i.e. show it on top of my other elements.
Currently it will open just fine, but of course it's shown at the very bottom of the Page, where I placed it.
-Android emulator Pixel (Android 9 , Pie , API 28 ) and Oneplus 2
I used the code of listpicker for Nativescript Angular version, as given in README,md , the dialog pushed the views and does not appear at the center of the screen, though i would expect it to be positioned at the center of the screen and does not push the view.
Thank you for this awesome filter select. I have tried a few and this is the best so far. My only issue now is that I do not know how to show the item that was previously selected. I would like after an item was selected and the user taps to show the list again the previously selected item will be shown. It will not be a show stopper but a nice additive.
I'm using this plugin but after upgrade to NativeScript 7 it doesn't work anymore.
Are you going to update it?
I'm testing it on iOS running in Simulator.
CLI: 7.0.8
thanks
I am using webpack to bundle my app and it seems to be having an issue initializing a new instance of the FilterableListpicker. Is there any special configuration required in order to get this plugin working with webpack?
I am using Angular in my app and my best guess right now is that webpack is not including the filterable-listpicker.xml
file.
ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'bindingContext' of undefined
JS: TypeError: Cannot set property 'bindingContext' of undefined
JS: at new FilterableListpicker (file:///data/data/com.mycompany.myapp/files/app/bundle.js:56458:39)
JS: at ViewUtil.module.exports.ViewUtil.createView (file:///data/data/com.mycompany.myapp/files/app/vendor.js:80840:20)
JS: at EmulatedRenderer.module.exports.NativeScriptRenderer.createElement (file:///data/data/com.mycompany.myapp/files/app/bundle.js:54439:30)
JS: at EmulatedRenderer.module.exports.EmulatedRenderer.createElement (file:///data/data/com.mycompany.myapp/files/app/bundle.js:54691:51)
JS: at DebugRenderer2.module.exports.DebugRenderer2.createElement (file:///data/data/com.mycompany.myapp/files/app/vendor.js:15529:49)
JS: at createElement (file:///data/data/com.mycompany.myapp/files/app/vendor.js:10885:27)
JS: at createViewNodes (file:///data/data/com.mycompany.myapp/files/app/vendor.js:14060:61)
JS: at callViewAction (file:///data/data/com.mycompany.myapp/files/app/vendor.js:14533:13)
JS: at execComponentViewsAction (file:///data/data/com.mycompany.myapp/files/app/vendor.js:14442:13)
JS: at createViewNodes (file:///data/data/com.mycompany.myapp/files/app/vendor.js:14127:5)
JS: at createRootView (file:///data/data/com.mycompany.myapp/files/app/vendor.js:13988:5)
JS: at callWithDebugContext (file:///data/data/com.mycompany.myapp/files/app/vendor.js:15413:42)
JS: at Object.debugCreateRootView [as createRootView] (file:///data/data/com.mycompany.myapp/files/app/vendor.js:14696:12)
JS: at ComponentFactory_.module.exports.ComponentFactory_.create (file:///data/data/com.mycompany.myapp/files/app/vendor.js:11583:46)
JS: at ComponentFactoryBoundToModule.module.exports.ComponentFactoryBoundToModule.create (file:///data/data/com.mycompany.myapp/files/app/vendor.js:4354:29)
Because the IDs for the template section are the same you cant use multiple of these on the same page.
Hi Dave, having fun with your great component. Had to find the way to make it work now that I moved to TS (learning!) but now my problem is that I can't figure out how to include multiple pickers in the same form. My intention is also that they run at the top of the screen to leave room for the keyboard to type (and they look better).
So I put them on top of the form with a visibility toggle that I turn on (and then off when tapped) in the show function for each picker. Thing is only the first one of them runs and the other leaves the screen blank.. I tried several layouts but still the same.. is it the best approach or am I missing some utility or trick to make it simple?
Thanks!
<StackLayout class="form">
<GridLayout>
<StackLayout row="0" visibility="{{ isShowingPickerDest ? 'visible' : 'collapsed' }}" >
<Image src="about:blank"/>
<ui:FilterableListpicker id="dest_hacienda" image="" blur="dark" hintText="Tipee para filtrar..." source="{{ haciendaItems }}"
itemTapped="haciendaTapped" canceled="cancelPicker" />
</StackLayout>
<StackLayout row="0" visibility="{{ isShowingPickerCat ? 'visible' : 'collapsed' }}">
<Image src="about:blank"/>
<ui:FilterableListpicker id="cat_especie" image="" blur="dark" hintText="Tipee para filtrar..." source="{{ categoItems }}"
itemTapped="categoTapped" canceled="cancelPicker" />
</StackLayout>
</GridLayout>
<StackLayout class="input-field">
<Label class="form-label font-weight-bold m-b-5" text="Categoria Especie"></Label>
<Label class="input" tap="categoShow" text="{{ selectedCatego ? selectedCatego : 'Pulse para seleccionar' }}"></Label>
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
<StackLayout class="input-field">
<Label class="form-label font-weight-bold m-b-5" text="Destino Hacienda"></Label>
<Label class="input" tap="haciendaShow" text="{{ selectedHacienda ? selectedHacienda : 'Pulse para seleccionar' }}"></Label>
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
</StackLayout>
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
node_modules/tns-core-modules/package.json
file in your project)"tns-android"
and "tns-ios"
properties in the package.json
file of your project)"@angular/compiler": "~4.2.0",
"@angular/core": "~4.2.0",
"@angular/forms": "~4.2.0",
"@angular/http": "~4.2.0",
"@angular/platform-browser": "~4.2.0",
"@angular/router": "~4.2.0",
"nativescript-angular": "~4.2.0",
"nativescript-filter-select": "^1.1.1",
"nativescript-filterable-listpicker": "^2.0.2",
"nativescript-theme-core": "~1.0.2",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.4.2",
"tns-core-modules": "~3.1.0",
"zone.js": "~0.8.2"
Describe the steps to reproduce it.
@davecoffin I know if the update you changed the view/styling a bit but not it looks funky on android see the below image
When i select an item without using the filter box the args.selectedItem comes back as undefined. If i use the filter first the item comes back just fine
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
tns --version
to fetch it)node_modules/tns-core-modules/package.json
file in your project)"tns-android"
and "tns-ios"
properties in the package.json
file of your project)package.json
file of yourDescribe the steps to reproduce it.
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
tns --version
to fetch it) - 4.2.0node_modules/tns-core-modules/package.json
file in your project) - 4.2.1"tns-android"
and "tns-ios"
properties in the package.json
file of your project) - 4.2.0package.json
file of yourDescribe the steps to reproduce it.
Even though picker.enableSearch = false the search text field is visible when the picker is shown. Stepping through the plugin code the check happens on line 161:
if (this.enableSearch) {
var textField = this.viewContainer.getViewById('filterTextField');
if (JSON.parse(this.focusOnShow))
textField.focus();
}
and the value is false so the code is skipped but the field still shows up. It shouldn't.
When I call this.myFilter.nativeElement.show()
I got this error from the console -> 'container.visibility = 'visible'
Hi,
Thanks, the list picker is great. Does it work on Nativescript 4.2 with Angular 6.0?
When I select an item the args.selectedItem returns undefined unless I use the search box first. If I use the search box (just entering a single letter, and then deleting it) and then select an item, it will correctly set the selectedItem.
<FilterableListpicker #myfilter blur="dark" hintText="Type to filter..." (itemTapped)="otherPlayerSelected($event)"></FilterableListpicker>
otherPlayerSelected(args) { var selectedPlayerName = args.selectedItem; console.log(selectedPlayerName); }
Android
CLI: (run tns --version
to fetch it)
3.4.2
Cross-platform modules: (check the 'version' attribute in the
node_modules/tns-core-modules/package.json
file in your project)
3.4.1
Runtime(s): (look for the "tns-android"
and "tns-ios"
properties in the package.json
file of your project)
3.4.1
Plugin(s): (look for the version numbers in the package.json
file of your
project and paste your dependencies and devDependencies here)
"dependencies": { "@angular/animations": "~5.2.0", "@angular/common": "~5.2.0", "@angular/compiler": "~5.2.0", "@angular/core": "~5.2.0", "@angular/forms": "~5.2.0", "@angular/http": "~5.2.0", "@angular/platform-browser": "~5.2.0", "@angular/platform-browser-dynamic": "~5.2.0", "@angular/router": "~5.2.0", "nativescript-angular": "~5.2.0", "nativescript-filterable-listpicker": "^2.0.0", "nativescript-theme-core": "~1.0.4", "nativescript-tslib": "^1.8.1-beta.4", "reflect-metadata": "~0.1.8", "rxjs": "~5.5.2", "tns-core-modules": "~3.4.0", "zone.js": "~0.8.18" }, "devDependencies": { "babel-traverse": "6.4.5", "babel-types": "6.4.5", "babylon": "6.4.5", "lazy": "1.0.11", "nativescript-dev-typescript": "~0.6.0", "typescript": "~2.6.2" }
Describe the steps to reproduce it.
Show a list and select an item right away, the selectedItem property will be undefined. If you use the search box, the selectedItem will be correct.
Hi, I've been using this listpicker and so far it's been really helpful.
I got some demand on rich text html for it's description tho.
Is there a way to do it already? Is it on radar?
Thanks!
Dave, this is a fantastic component. Thanks for your good work with it!
What is the feasibility of having a find or create feature where if what the user is searching is not on the list, it could be added?
Hi Dave! Great work. I got this error in the console while running some code with your plugin
Error in downloadBitmap - java.io.FileNotFoundException: https://davecoffin.com/images/expert_badge.png)
Maybe you left this in the code by mistake? Thanks!
Can you point me an nativescript angular example?
Checked
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
For Angular, I am having trouble running the plugin and getting access issue described below. This also occurs when I try to run the Demo App.
tns --version
to fetch it) - 5.0.1node_modules/tns-core-modules/package.json
file in your project) - "version": "4.2.1""tns-android"
and "tns-ios"
properties in the package.json
file of your project)-package.json
file of yourDescribe the steps to reproduce it.
When I run the demo app i get this error:
Unable to apply changes on device: 04157df4e07b5b08. Error is: {
"error": "unregistered users are not allowed to access package tns-android"
}
This also occurs when I try to also use an Angular App. I use the command tns debug android to run it.
Using the demo app, the iOS location of the modal is still centered when the keyboard is present, though I would expect it to be positioned at the top of the screen.
It makes sense for it to be vertically centered when the keyboard is hidden, but the Android modal goes to the top of the screen as expected.
When I am increasing the listHeight to 400, only the wrapper is resized. leaving a blank space below the Cancel button.
<FilterableListpicker #myfilter blur="dark" hintText="Type to filter..."
listHeight="400" [source]="elements" (canceled)="cancelFilterableList($event)"
(itemTapped)="itemTapped($event)"></FilterableListpicker>
This is happening on iPhone SE iOS11 Simulator.
Btw, it would be great if listHeight could be set to 100% or auto.
Thanks.
IOS - both on emulator and physical device (iphone 5 and ipad)
CLI: 5.0.0
"5.0.1"
Runtime(s):
"tns-android": {
"version": "4.2.0"
},
"tns-ios": {
"version": "5.0.0"
}
Plugin(s):
"dependencies": {
"nativescript-barcodescanner": "^2.7.8",
"nativescript-camera": "^4.1.1",
"nativescript-filterable-listpicker": "^2.2.3",
"nativescript-fonticon": "^2.0.0",
"nativescript-iqkeyboardmanager": "^1.3.0",
"nativescript-loading-indicator": "^2.4.0",
"nativescript-theme-core": "^1.0.4",
"nativescript-ui-dataform": "^3.8.0",
"nativescript-ui-listview": "^3.8.0",
"nativescript-ui-sidedrawer": "^5.0.0",
"nativescript-vue": "^2.0.0",
"tns-core-modules": "^5.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.2",
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^1.0.0",
"lazy": "1.0.11",
"nativescript-dev-webpack": "next",
"nativescript-vue-template-compiler": "^2.0.0",
"nativescript-worker-loader": "~0.9.0",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"terser-webpack-plugin": "^1.1.0",
"vue-loader": "^15.2.6",
"webpack": "^4.16.4",
"webpack-bundle-analyzer": "~2.13.1",
"webpack-cli": "^3.1.0"
}
Describe the steps to reproduce it.
I do apologise if i have missed anything. I am having an issue when searching/filtering a large list of selectable options. The list looks fine when it first loads up, but upon making a search and deleting the search value, the list has many missing segments. But i can still search those values.
We have a list of 1138 selectable options, hence the importance of being able to search. Lets say i search the noun: 'Absorber'. If i then clear this search, the original list is there, but not all the values will be visible (there are many white empty boxes). I will try and attach some images to show this error.
I generate the list of nouns with this code:
We are using vuejs with nativescript.
<FilterableListpicker focusOnShow=true ref="myFilter" @canceled="cancelFilterableList($event)" @itemTapped="itemTapped($event)" listHeight=400 listWidth="100%" blur="light" :source="listNouns" hintText="Search nouns...">
Our script looks like this:
var NounJson = require('../../assets/nouns2.json')
this.listNouns = [];
for (var key in NounJson){
this.listNouns.push({"title": key, 'description': NounJson[key].Noun});
}
Can I have two or more instances in the same project?
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
tns --version
to fetch it)node_modules/tns-core-modules/package.json
file in your project)"tns-android"
and "tns-ios"
properties in the package.json
file of your project)package.json
file of yourDescribe the steps to reproduce it.
App Getting Crashed on android. Nativescript version 4.0
Hi @davecoffin @shiv19 ,
Please can you publish the last PR to npm
, because the is an issue with the Typescript
Webpack block the CLI with those errors
ERROR in node_modules/nativescript-filterable-listpicker/index.d.ts(30,9):
TS1086: An accessor cannot be declared in an ambient context.
ERROR in node_modules/nativescript-filterable-listpicker/index.d.ts(31,9):
I am pretty new at NativeScript,
just tried but got this error,
Error typeerror undefined is not an object frame.topmost().getViewById('dc flp container').parent')
As soon as I start typing something,
it doesn't show any prediction, and when I erase what I typed,
the list contains only 1 item, "Test"
Hi @davecoffin,
Thank you for your grate work.
Can we store caching
the images before show on the UI ? because for ร lot of contact list, the images will slowly appear; I recognized the plugin may use the cache image widget
of Nativescript because the second time when we open the list picker all images appear at once.
Thanks
Hello
Is it possible to translate the "Cancel" button?
git clone https://github.com/davecoffin/nativescript-filterable-listpicker.git
cd nativescript-filterable-listpicker/demo
tns run ios
The app installs on the device, but when trying to open the app, it hits an error:
Successfully synced application org.nativescript.demo on device 104B28BF-4BF7-44EF-BB0F-98EE7FC2250A.
***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1 0x1096b5359 NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2 0x1096dc1fb NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
3 0x109fd149e ffi_closure_unix64_inner
4 0x109fd1de2 ffi_closure_unix64
5 0x10c81d02f _CFXRegistrationPost
6 0x10c81cd71 ___CFXNotificationPost_block_invoke
7 0x10c903ae2 -[_CFXNotificationRegistrar find:object:observer:enumerator:]
8 0x10c81c694 _CFXNotificationPost
9 0x10a798589 -[NSNotificationCenter postNotificationName:object:userInfo:]
10 0x10dd7d8c2 -[UIApplication _callInitializationDelegatesForMainScene:transitionContext:]
11 0x10dd82c2f -[UIApplication _runWithMainScene:transitionContext:completion:]
12 0x10d5a14e9 __111-[__UICanvasLifecycleMonitor_Compatability _scheduleFirstCommitForScene:transition:firstActivation:completion:]_block_invoke
13 0x10d5aa29c +[_UICanvas _enqueuePostSettingUpdateTransactionBlock:]
14 0x10d5a1126 -[__UICanvasLifecycleMonitor_Compatability _scheduleFirstCommitForScene:transition:firstActivation:completion:]
15 0x10d5a1ae0 -[__UICanvasLifecycleMonitor_Compatability activateEventsOnly:withContext:completion:]
16 0x10d59fcb5 __82-[_UIApplicationCanvas _transitionLifecycleStateWithTransitionContext:completion:]_block_invoke
17 0x10d59f95f -[_UIApplicationCanvas _transitionLifecycleStateWithTransitionContext:completion:]
18 0x10d5a4a90 __125-[_UICanvasLifecycleSettingsDiffAction performActionsForCanvas:withUpdatedScene:settingsDiff:fromSettings:transitionContext:]_block_invoke
19 0x10d5a580e _performActionsWithDelayForTransitionContext
20 0x10d5a47ef -[_UICanvasLifecycleSettingsDiffAction performActionsForCanvas:withUpdatedScene:settingsDiff:fromSettings:transitionContext:]
21 0x10d5a993a -[_UICanvas scene:didUpdateWithDiff:transitionContext:completion:]
22 0x10dd8144e -[UIApplication workspace:didCreateScene:withTransitionContext:completion:]
23 0x10d925d09 -[UIApplicationSceneClientAgent scene:didInitializeWithEvent:completion:]
24 0x1169de2da -[FBSSceneImpl _didCreateWithTransitionContext:completion:]
25 0x1169e9443 __56-[FBSWorkspace client:handleCreateScene:withCompletion:]_block_invoke_2
26 0x1169e8b3a __40-[FBSWorkspace _performDelegateCallOut:]_block_invoke
27 0x10ce3854b _dispatch_client_callout
28 0x10ce3b60b _dispatch_block_invoke_direct
29 0x116a1dba8 __FBSSERIALQUEUE_IS_CALLING_OUT_TO_A_BLOCK__
30 0x116a1d860 -[FBSSerialQueue _performNext]
31 0x116a1de40 -[FBSSerialQueue _performNextFromRunLoopSource]
JavaScript stack trace:
1 @file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:244:56
2 @file:///app/tns_modules/tns-core-modules/xml/xml.js:148:20
3 parse@file:///app/tns_modules/tns-core-modules/js-libs/easysax/easysax.js:751:34
4 parse@file:///app/tns_modules/tns-core-modules/xml/xml.js:195:27
5 parse@file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:250:32
6 parseInternal@file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:212:16
7 loadInternal@file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:117:40
8 loadPage@file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:53:39
9 @file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:72:20
10 @file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:86:35
11 navigate@file:///app/tns_modules/tns-core-modules/ui/frame/frame-common.js:118:49
12 createRootView@file:///app/tns_modules/tns-core-modules/application/application.js:246:31
13 setWindowContent@file:///app/tns_modules/tns-core-modules/application/application.js:210:38
14 notifyAppStarted@file:///app/tns_modules/tns-core-modules/application/application.js:143:34
15 didFinishLaunchingWithOptions@file:///app/tns_modules/tns-core-modules/application/application.js:132:30
16 @[native code]
17 onReceive@file:///app/tns_modules/tns-core-modules/application/application.js:30:32
18 UIApplicationMain@[native code]
19 start@file:///app/tns_modules/tns-core-modules/application/application.js:272:26
20 anonymous@file:///app/app.js:5:18
21 evaluate@[native code]
22 moduleEvaluation@[native code]
23 @[native code]
24 promiseReactionJob@[native code]
JavaScript error:
file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:244:56: JS ERROR Error: Building UI from XML. @file:///app/main-page.xml:13:9
> Module '/Users/steven/Library/Developer/CoreSimulator/Devices/104B28BF-4BF7-44EF-BB0F-98EE7FC2250A/data/Containers/Bundle/Application/8DDF34AE-A259-48E0-90C8-2511F378DF33/demo.app/app/nativescript-filterable-listpicker' not found for element 'nativescript-filterable-listpicker:FilterableListpicker'.
> Could not find module '/Users/steven/Library/Developer/CoreSimulator/Devices/104B28BF-4BF7-44EF-BB0F-98EE7FC2250A/data/Containers/Bundle/Application/8DDF34AE-A259-48E0-90C8-2511F378DF33/demo.app/app/nativescript-filterable-listpicker'. Computed path '/Users/steven/Library/Developer/CoreSimulator/Devices/104B28BF-4BF7-44EF-BB0F-98EE7FC2250A/data/Containers/Bundle/Application/8DDF34AE-A259-48E0-90C8-2511F378DF33/demo.app/app/nativescript-filterable-listpicker'.
The app builds and runs fine on Android.
I tried changing the package.json file to point the plugin to npm:
"dependencies": {
"nativescript-filterable-listpicker": "^2.2.3",
...
}
npm i
runs fine. But when I try tns run ios
, I get the same message.
I have another app that uses the plugin on iOS on this same emulator, and it builds/installs/runs fine. I just wanted to try out the demo because because I wanted to see if an iOS keyboard issue existed on the demo, too (the keyboard just covers up most of the modal--unlike Android, which shifts the modal up. Anyway, that's another issue for another time, but I thought I'd let you know the demo wasn't working for me.
HI, it's people like you that make Nativescript so damn awesome to use, thank you so much for this, it's exactly what I was looking for!! :) I just came across it and will try it when I get back to work in a few hours.
Please advise, is there a way I can remove the filterable text input in some cases? I sometimes have small lists which don't need filtering, but would LOVE to also use this dialog as it's just so awesome!
Is there also a way I can style the dialog itself, like the background-color and border-radius etc?
Keep up the amazing work!
I tried to call api & bind the array of objects in listpicker.The listpicker dialog is working but i tried to keen the list item in itemtapped event , the item is always undefined.
Js :
var arraytems=new ObservableArray([]);
for (var i = 0; i < res.length; i++) {
arraytems.push(res[i].list.toString());
}
Observable.set("listitems",arraytems);
Observable1.bindingContext = Observable;
public itemTapped(args) {
}
@davecoffin ,show function is not working in android,I tried to use the visblility also it won't work.
var myfilter =frame.topmost().getViewById('myfilter').visbility = "visible";//android
var frame.topmost().getViewById('myfilter').show();//ios
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.