nativescript-filter-select

Your awesome NativeScript plugin for select and filter items for a list.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
nativescript-filter-select
37201.3.05 years ago7 years agoMinified + gzip package size for nativescript-filter-select in KB

Readme

FilterSelect
npm npm
A NativeScript plugin to provide an listview widget to select AND filter items.

Sample Screenshots

Android and ios

Sample 1 | Sample 2 -------- | --------- Sample1 | Sample2

Installation

NativeScript 4.x
  • tns plugin add nativescript-filter-select

import css

@import 'nativescript-filter-select/styles.css';
Be sure to run a new build after adding plugins to avoid any issues

Vanilla NativeScript

IMPORTANT:
Make sure you include xmlns:FS="nativescript-filter-select" on the Page element

XML

<Page xmlns:FS="nativescript-filter-select">
   <StackLayout>     
     <FS:FilterSelect 
     items="{{ countries }}"
     hint="Please select some countries" 
     modal_title="Countries" search_param="name" 
     primary_key="code" 
     change="{{ onSelect }}"
     />
   </StackLayout>
</Page>

Angular NativeScript

Regiter plugin in Component class

import { registerElement } from 'nativescript-angular/element-registry';
import { FilterSelect } from 'nativescript-filter-select';
registerElement('FilterSelect', () => FilterSelect);

HTML

<FilterSelect 
    height="100%"
    [items]="items"
    (change)="onitemselected($event)"
    hint="Please select some items" 
    modal_title="item" search_param="name" 
    primary_key="id">

</FilterSelect>

Attributes

see demo examples for more information

| Attribute | Description |Default | ------------- | ------------------------------------------------------- |-------- | render | to render "tags" or "label" or "drop" | string : tags | multiple | to limit the options selected to one if set to false | boolean : true |searchparam| index of the string value in the items object to search on it |string : name |itemtemplate|xml template for the listview items | string : <Label col="0" text="{{ ${this._search_param} }}" textWrap="true" /> |change| change event treger when select is done | function : optional change(args) and selected item can be accessed as args.selected |modaltitle|title of the filter modal | String : Please select items |hint|string to show when no items selected |Please select some items |items|array of objects to populate the list of options | ObservableArray :
|primarykey|unique index of the items object | string : id |selected|array of objects to mark some options as selected and it will be the result when select is done | Array: |disabled| to disable select botton | boolean : false |allowSearch| to enable/disable search bar in the modal | boolean : true |refresh| to refresh the filter select with new values good with remote data | function |searchHint | search placeholder or hint in the items modal | "Search for item" |xbtn| remove tag text you can use tag icon here | "x" |closeText| close button text | "Close" |doneText| done button text | "Done" |clearText| clear button text | "Clear" |selectText| select button text | "Select" | autofocus | keyboard up when you open modal so you can start search | false | open() | open modal programmatically | function |close| close event treger when modal is closed | you can get the selected array by args.selected if the modal closed without any selection the array will be empty

CSS core-theme styles is required for modal page if you dont have them just make your own

see styles.css so you can override or make your own
  • and don't forget to share with us your nice styles :D

font icons

  • font icons are required if you are using dropdown render

and you can add fontawsome icon as a select triger ( hint="{{'fa-list-ul' | fonticon}}" )
see demo

For contributing

just do a pull request with description of your changes or open issue with your ideas

i need help with this issue