Skip to content

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

License

Notifications You must be signed in to change notification settings

moayadnajd/nativescript-filter-select

Repository files navigation

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
search_param index of the string value in the items object to search on it string : name
item_template 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
modal_title 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 :[]
primary_key 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