A NativeScript plugin to provide an listview widget to select AND filter items.
tns plugin add nativescript-filter-select
*Be sure to run a new build after adding plugins to avoid any issues
IMPORTANT: Make sure you include xmlns:FS="nativescript-filter-select" on the Page element
<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"
onSelect="{{ onSelect }}"
/>
</StackLayout>
</Page>| Sample 1 | Sample 2 |
|---|---|
 |
 |
| Attribute | Description | Default |
|---|---|---|
| multiple | to limit the options selected to one if set to false | boolean : true |
| selected_flag | index of selected boolean flag to mark item as selected | boolean : optional |
| 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" /> |
| onSelect | on select function treger when select done | function : optional onSelect(selectedArray,bindingcontextObject) |
| 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 | Array :[] |
| 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: [] |
FilterSelect{
border-style: solid;
padding: 3;
border-width: 1;
border-color: #ccc;
border-radius: 5;
}
.btn-filter-select{
vertical-align: middle;
align-content: center;
margin: 0;
padding: 1;
}
.filter-select-tag{
margin-left: 8;
border-width: 1;
border-color: #ccc;
border-radius: 5;
padding: 6;
}
.felter-select-list label{
padding: 20;
}
.felter-select-list{
margin: 2;
}
.filter-select-hint{
vertical-align: middle;
text-align: center;
margin-top: 8;
}
.filter-select-selected{
border-width: 1;
border-color: green;
}
.filter-select-tags-holder{
}
.base-filter-select{
}
.btn-filter-select{
}
.base-filter-select{
}.action-bar-title{
}
.text-center{
}
.text-left{
}
.text-right{
}
.action-bar{
}
.p-10{
}
.hr-light{
}
.btn{
}
.btn-primary{
}